欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

整理一下常用的JavaScript數組遍歷的方法。

for

let arr1 = ["Apple", "Orange", "Pear"];
for (let i = 0; i < arr1.length; i++) {
    console.log(arr1[i]); // Apple Orange Pear
}

for..of

// 使用for..of進行遍歷
let arr2 = ["Apple", "Orange", "Pear"];
// 遍歷數組元素
for (let key of arr2) {
    console.log(key);// Apple Orange Pear
}

for..in（不推薦）

for..in循環不僅可以遍歷對象，也可以遍歷數組【數組是一種特殊的對象】

let arr3 = ["Apple", "Orange", "Pear"];
// 遍歷數組元素
for (let key in arr3) {
    console.log(arr3[key]);// Apple Orange Pear
}

for..in還會遍歷非數字鍵

let a = [1, 2, 3];
a.foo = true;
for (let k in a) {
    console.log(k); // 1 2 3 foo
}

注意：

• for..in 循環會遍歷 所有屬性，不僅僅是這些數字屬性。在瀏覽器和其它環境中有一種稱為“類數組”的對象，它們 看似是數組。也就是說，它們有 length 和索引屬性，但是也可能有其它的非數字的屬性和方法，這通常是我們不需要的。for..in 循環會把它們都列出來。所以如果我們需要處理類數組對象，這些“額外”的屬性就會存在問題。

• for..in 循環適用于普通對象，并且做了對應的優化。但是不適用于數組，因此速度要慢 10-100 倍。更多可查看：為什么不推薦用for...in遍歷數組

forEach()

使用forEach()方法，允許為數組的每個元素都運行一個函數，forEach()方法與map()方法很相似，也是對數組的所有成員依次執行參數函數。但是，forEach()方法不返回值，只用來操作數據。這就是說，如果數組遍歷的目的是為了得到返回值，那么使用map()方法，否則使用forEach()方法。

接受三個參數：數組中正在處理的當前元素、當前元素的索引、調用forEach()數組本身。

arr4.forEach(function(element, index, array) {
     // ...
});
let arr4 = ["Apple", "Orange", "Pear"];
    // 遍歷數組元素
    arr4.forEach(function(element, index, arr4) {
        console.log('元素名稱：' + element)
        console.log("索引：" + index)
        console.log('數組：' + arr4); // Apple Orange Pear
    })

map()

map()方法將數組的所有成員依次傳入參數函數，然后把每一次的執行結果組成一個新數組返回。作為數組元素的映射，它提供了一個回調函數，參數依次為處于當前循環的元素、該元素下標、數組本身，三者均可選。默認會返回一個數組。

接受三個參數：數組中正在處理的當前元素、當前元素的索引、調用map()數組本身。

const resultArr = arr5.map(function(element, index, array) {
// 返回新值而不是當前元素
})
let arr5 = ["Apple", "Orange", "Pear"];
// 遍歷數組元素
const resultArr = arr5.map(element => {
  return element
})

console.log(resultArr); // [ 'Apple', 'Orange', 'Pear' ]

filter()

filter()方法用于過濾數組成員，滿足條件的成員組成一個新數組返回。它不會修改原始數組，而是返回一個新的數組，新數組包含滿足篩選條件的元素。

接受三個參數：數組中正在處理的當前元素、當前元素的索引、調用filter()數組本身。

let resultArr = arr6.filter(function(element, index, array) {
 // ...
});

它的參數是一個函數，所有數組成員依次執行該函數，返回結果為true的成員組成一個新數組返回。該方法不會改變原數組。

let arr6 = [1, 2, 3, 4, 5, 6];
// 過濾數組元素
const resultArr = arr6.filter(element => element > 3)

console.log(resultArr); // [ 4, 5, 6 ]

find()

找到具有特定條件的對象，使函數返回TRUE的第一個(單個元素)。

接受三個參數：數組中正在處理的當前元素、當前元素的索引、調用find()數組本身。

let resultArr = arr7.find(function(element, index, array) {
 // ...
});
let arr7 = [
  {
    id: 1,
    name: 'John'
  },
  {
    id: 2,
    name: 'Pete'
  },
  {
    id: 3,
    name: 'Mary'
  },
]
const resultArr = arr7.find(element => element.id == 2);

console.log(resultArr); // { id: 2, name: 'Pete' }

findIndex()

接受三個參數：數組中正在處理的當前元素、當前元素的索引、調用findIndex()數組本身。

let resultIndex = arr8.findIndex(function(element, index, array) {
 // ...
});

返回找到元素的索引，而不是元素本身，找不到符合條件的元素返回-1。

let arr8 = [
  {
    id: 1,
    name: 'John'
  },
  {
    id: 2,
    name: 'Pete'
  },
  {
    id: 3,
    name: 'Mary'
  },
]
const resultIndex = arr8.findIndex(element => element.id == 2);

console.log("索引：", resultIndex); // 1

reducer()

接收一個函數作為累加器，每一次運行reducer會將先前元素的計算結果作為參數傳入，最后將其結果匯總為單個返回值。

let resultCount = arr9.reduce(
  function(accumulator, item, index, array) {
     // ... 
  },[initial]);

參數

• accumulator：是上一個函數調用的結果，第一次等于 initial（如果提供了 initial 的話）。

• item：當前的數組元素

• index：當前索引

• arr：數組本身

• initial：初始值

應用函數時，上一個函數調用的結果將作為第一個參數傳遞給下一個函數。因此，第一個參數本質上是累加器，用于存儲所有先前執行的組合結果。最后，它成為 reduce 的結果。

let arr9 = [1, 2, 3, 4, 5]
let resultCount = arr9.reduce((sum, current) => sum + current, 0);
console.log(resultCount); // 15

• 初始值為0，第一次運行sum值為0，current是第一個數組元素 為1

• 在第二次運行時，sum = 1，我們將第二個數組元素2與其相加并返回。

• 在第三次運行中，sum = 3，我們繼續把下一個元素與其相加，以此類推……

• 如果沒有初始值的話，reduce會將第一個元素作為初始值，并從第二個元素開始迭代，如果數組為空，在沒有初始值的情況下會報錯。

reducerRight()

reduceRight()遍歷為從右到左。

let arr9 = [1, 2, 3, 4, 5]
let resultCount = arr9.reduceRight((sum, current) => sum + current, 0);
console.log(resultCount); // 15

some()

接受三個參數：數組中正在處理的當前元素、當前元素的索引、調用some()數組本身。

let resultArr = arr10.some(function(element, index, array) {
  // ...
});

檢查數組中是否有元素滿足條件，如果滿足條件返回true，否則返回false。不會修改數組。

let arr10 = [1, 2, 3, 4, 5]
const result = arr10.some(item => item > 3);
console.log(result); // true

every()

接受三個參數：數組中正在處理的當前元素、當前元素的索引、調用every()數組本身。

let result = arr11.every(function(element, index, array) {
 // ...
});

檢查數組中元素是否都滿足條件，如果都滿足條件返回true，否則返回false

let arr11 = [1, 2, 3, 4, 5]
const result = arr11.every(element => element > 3);
console.log(result); // false

keys()，values()，entries()

ES6 新增的三個方法用于遍歷數組，它們都返回一個遍歷器對象，可以用for...of循環進行遍歷，唯一的區別是keys()是對鍵名的遍歷，values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

let arr12 = ['張三', '李四', '王五', '趙六']
// 鍵名遍歷
for (let index of arr12.keys()) {
  console.log("index", index); // 0 1 2 3
}
// 鍵值遍歷
for (let items of arr12.values()) {
  console.log("items", items); // 張三 李四 王五 趙六
}
// 鍵值對遍歷
for (let items of arr12.entries()) {
  console.log("items", items); // [ 0, '張三' ][ 1, '李四' ][ 2, '王五' ][ 3, '趙六' ]
}