JavaScript竟然有13種陣列遍歷方法，你都瞭解嗎？

整理一下常用的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 倍。

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, '趙六' ]
}