前言

ES5和ES6都新增了很多對數(shù)組遍歷的方法，本文主要介紹forEach、map、filter、some、every、reduce / reduceRight、find/findIndex方法，它們可以讓我們更方便的編寫代碼，拋棄for循環(huán)。而這些方法有個共同的特點都是不改變原有的數(shù)組。

forEach

forEach是最基本的方法，它的作用是對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。

function log(element, index, array) {
  console.log('[' + index + '] = ' + element);
}

[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

forEach方法中的回調(diào)函數(shù)會被依次傳入三個參數(shù)：

• 數(shù)組當前項的值
• 數(shù)組當前項的索引
• 數(shù)組對象本身

forEach方法除了可以傳入回調(diào)函數(shù)外，還可以傳入第二個參數(shù)。如果給forEach傳遞了第二個參數(shù)，回調(diào)函數(shù)里的this將指向這個參數(shù)。如果沒有傳入第二個參數(shù)，則this指向全局對象（在瀏覽器是為window），嚴格模式下是undefined。

var out = [];

[1, 2, 3].forEach(function(elem) {
  this.push(elem * elem);
}, out);

out // [1, 4, 9]

map

map方法的作用就是將原數(shù)組按照一定的規(guī)則映射成一個新的數(shù)組。再將其返回，返回的是一個新的數(shù)組，而不是將原數(shù)組直接改變。forEach和map的區(qū)別在于，forEach沒有返回值。 map需要返回值，如果不給return，默認返回undefined。使用方法和參數(shù)都跟forEach相似。

var numbers = [1, 2, 3];

numbers.map(function (n) {
  return n + 1;
});
// [2, 3, 4]

numbers
// [1, 2, 3]

map方法接受的三個參數(shù)：

• 數(shù)組當前項的值
• 數(shù)組當前項的索引
• 數(shù)組對象本身

map方法還可以接受第二個參數(shù)，用來綁定回調(diào)函數(shù)內(nèi)部的this變量(與forEach相視)。

var arr = ['a', 'b', 'c'];

[1, 2].map(function (e) {
  return this[e];
}, arr)
// ['b', 'c']

filter

filter方法用于過濾數(shù)組成員，滿足條件的成員組成一個新數(shù)組返回。用法和參數(shù)跟map差不多。與map方法不同的是，filter方法的回調(diào)函數(shù)需要返回等于true或false的值。如果為true，則通過，否則，不通過。

[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
})
// [4, 5]

filter方法的參數(shù)函數(shù)可以接受三個參數(shù)：當前成員，當前位置和整個數(shù)組。

[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
  return index % 2 === 0;
});
// [1, 3, 5]

filter方法還可以接受第二個參數(shù)，用來綁定參數(shù)函數(shù)內(nèi)部的this變量。

var obj = { MAX: 3 };
var myFilter = function (item) {
  if (item > this.MAX) return true;
};

var arr = [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, obj) // [8, 4, 9]

some & every

這兩個方法類似“斷言”（assert），返回一個布爾值，表示判斷數(shù)組成員是否符合某種條件。

• every：數(shù)組中是否每個元素都滿足指定的條件
• some：數(shù)組中是否有元素滿足指定的條件

every方法是所有成員的返回值都是true，整個every方法才返回true，否則返回false。

var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
  return elem >= 3;
});
// false

some方法是只要一個成員的返回值是true，則整個some方法的返回值就是true，否則返回false。

var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
  return elem >= 3;
});
// true

注意: 對于空數(shù)組，some方法返回false，every方法返回true，回調(diào)函數(shù)都不會執(zhí)行。

function isEven(x) { 
    return x % 2 === 0 
}

[].some(isEven) // false
[].every(isEven) // true

reduce / reduceRight

reduce方法和reduceRight方法依次處理數(shù)組的每個成員，最終累計為一個值,一般用來合并數(shù)組的值。它們的差別是，reduce是從左到右處理（從第一個成員到最后一個成員），reduceRight則是從右到左（從最后一個成員到第一個成員），其他完全一樣。

var a = [1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})

console.log(a) // 15
// 1 2
// 3 3
// 6 4
// 10 5
//最后結(jié)果：15

reduce方法和reduceRight方法的第一個參數(shù)都是一個函數(shù)。該函數(shù)接受以下四個參數(shù)。

• 累積變量，默認為數(shù)組的第一個成員
• 當前變量，默認為數(shù)組的第二個成員
• 當前位置（從0開始）reduce方法如果提供了第二個參數(shù)，從0開始；否則從1開始。
• 原數(shù)組
  這四個參數(shù)之中，只有前兩個是必須的，后兩個則是可選的。

var a = [1, 2, 3, 4, 5].reduce(function (a, b, c, d) {
  console.log(a, b, c, d)
  return a + b;
});
console.log(a) // 15

image

var a = [1, 2, 3, 4, 5].reduce(function (a, b) {
  return a + b;
}, 10);

console.log(a) // 25

上面的方法第二個參數(shù)相當于提供了默認值，由于空數(shù)組取不到初始值，reduce方法會報錯。這時，加上第二個參數(shù)，就能保證總是會返回一個值。

find / findIndex

find方法，用于找出第一個符合條件的數(shù)組成員。它的參數(shù)是一個回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。

var a = [1, 4, -5, 10].find((n) => n < 0)

var b = [1, 4, -5, 10].find((n) => n < -5)

console.log(a) // -5
console.log(b)  // undefined

find方法的回調(diào)函數(shù)可以接受三個參數(shù):

• 當前的值
• 當前的位置
• 原數(shù)組

var a = [1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
})

console.log(a)  // 10

findIndex方法的用法與find方法非常類似，返回第一個符合條件的數(shù)組成員的位置，如果所有成員都不符合條件，則返回-1。

var a = [1, 4, -5, 10].findIndex((n) => n < 0)

var b = [1, 4, -5, 10].findIndex((n) => n < -5)

console.log(a) // 2
console.log(b)  // -1

這兩個方法都可以接受第二個參數(shù)，用來綁定回調(diào)函數(shù)的this對象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
var a = [10, 12, 26, 15].find(f, person);    

console.log(a) // 26

另外，這兩個方法都可以發(fā)現(xiàn)NaN，彌補了數(shù)組的indexOf方法的不足。

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0