在Javascript中數組的迭代最常用的兩個函數：forEach和map?？赡芎芏嗳苏J為這兩個函數在工作方式上是相同的，它們都進行迭代并輸出數組的每一項。本文就來介紹一下forEach和map的差異，并因此加深對兩個函數的理解。

forEach

forEach方法是一個高階函數，因為它接受回調作為它的參數。它用于遍歷數組元素，并且返回undefined?；卣{函數接受三個參數（元素、值和索引）。

來看下面的代碼示例：

const arrAges = [10, 20, 30, 40];
// ES5:
const es5Result = arrAges.forEach(function (item) {
    return item * 2;
});
console.log(es5Result); // undefined
console.log(arrAges); // [ 10, 20, 30, 40 ]

// ES6:
const es6Result = arrAges.forEach((item) => item * 2);
console.log(es6Result); // undefined
console.log(arrAges); // [ 10, 20, 30, 40 ]

從執行的結果來看，上面的forEach函數執行的結果打印出來的都是undefined，執行完后并沒有對數組 arrAges 進行任何改動。

forEach函數不接受將其他方法附加到它。 看下面的示例：

const es6Result = arrAges.forEach((item) => item * 2).reduce((a, b) => a + b);
// 異常，Cannot read property 'reduce' of undefined
console.log(es6Result); 

map

map函數用于遍歷數組元素。它接受一個回調函數作為參數，根據回調函數返回一個新數組和新元素。

回調函數接受三個參數（元素、值和索引）。

來看下面的代碼示例：

const arrAges = [10, 20, 30, 40];
// ES5:
const es5Result = arrAges.map(function (item) {
    return item * 2;
});
console.log(es5Result); // [ 20, 40, 60, 80 ]

// ES6:
const es6Result = arrAges.map((item) => item * 2);
console.log(es6Result); // [ 20, 40, 60, 80 ]

從執行結果來看，在數組上使用map函數返回一個數值翻倍的值作為元素的新數組。從上面的執行結果可以看出，map函數執行的結果還能附加其他方法。

如下代碼：

const arrAges = [10, 20, 30, 40];
// ES6:
const es6Result = arrAges.map((item) => item * 2).reduce((a, b) => a + b);
console.log(es6Result); // 200

上面的示例，對map函數執行后的結果的數組進行reduce函數將所有元素值相加得到一個結果。關于map和reduce的妙用，可以參見《悟透前端：javascript數組之includes、reduce》

區別

從上面的示例，也看出一點不一樣。

forEach

• 遍歷完后返回 undefined。
• 它不接受附加其他方法。

map

• 遍歷后返回一個新數組
• 它接受附加其他函數

結論

如上所見，這些是forEach和map之間的差異。就我而言，我更喜歡使用map方法，因為它返回一個新的不同數組。當然，如果不需要返回的數組，則使用forEach更好。