在Javascript中數(shù)組的迭代最常用的兩個(gè)函數(shù)：forEach和map。可能很多人認(rèn)為這兩個(gè)函數(shù)在工作方式上是相同的，它們都進(jìn)行迭代并輸出數(shù)組的每一項(xiàng)。本文就來(lái)介紹一下forEach和map的差異，并因此加深對(duì)兩個(gè)函數(shù)的理解。

forEach

forEach方法是一個(gè)高階函數(shù)，因?yàn)樗邮芑卣{(diào)作為它的參數(shù)。它用于遍歷數(shù)組元素，并且返回undefined。回調(diào)函數(shù)接受三個(gè)參數(shù)（元素、值和索引）。

來(lái)看下面的代碼示例：

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 ]

從執(zhí)行的結(jié)果來(lái)看，上面的forEach函數(shù)執(zhí)行的結(jié)果打印出來(lái)的都是undefined，執(zhí)行完后并沒(méi)有對(duì)數(shù)組 arrAges 進(jìn)行任何改動(dòng)。

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

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

map

map函數(shù)用于遍歷數(shù)組元素。它接受一個(gè)回調(diào)函數(shù)作為參數(shù)，根據(jù)回調(diào)函數(shù)返回一個(gè)新數(shù)組和新元素。

回調(diào)函數(shù)接受三個(gè)參數(shù)（元素、值和索引）。

來(lái)看下面的代碼示例：

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 ]

從執(zhí)行結(jié)果來(lái)看，在數(shù)組上使用map函數(shù)返回一個(gè)數(shù)值翻倍的值作為元素的新數(shù)組。從上面的執(zhí)行結(jié)果可以看出，map函數(shù)執(zhí)行的結(jié)果還能附加其他方法。

如下代碼：

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

上面的示例，對(duì)map函數(shù)執(zhí)行后的結(jié)果的數(shù)組進(jìn)行reduce函數(shù)將所有元素值相加得到一個(gè)結(jié)果。關(guān)于map和reduce的妙用，可以參見(jiàn)《悟透前端：javascript數(shù)組之includes、reduce》

區(qū)別

從上面的示例，也看出一點(diǎn)不一樣。

forEach

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

map

• 遍歷后返回一個(gè)新數(shù)組
• 它接受附加其他函數(shù)

結(jié)論

如上所見(jiàn)，這些是forEach和map之間的差異。就我而言，我更喜歡使用map方法，因?yàn)樗祷匾粋€(gè)新的不同數(shù)組。當(dāng)然，如果不需要返回的數(shù)組，則使用forEach更好。