淺談Javascript中的forEach和map之間的差別

​​假日出遊，為什麼顯示有票你卻搶不到？揭秘12306如何保證車票不超賣的關鍵技術！>>>

​​            

在Javascript中數組的疊代最常用的兩個函數：​

​forEach​

​和​

​map​

​。可能很多人認為這兩個函數在工作方式上是相同的，它們都進行疊代并輸出數組的每一項。本文就來介紹一下​

​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​​》

差別

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

• 周遊完後傳回 ​

  ​undefined​

  ​。
• 它不接受附加其他方法。

• 周遊後傳回一個新數組
• 它接受附加其他函數

結論