在 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); // undefinedconsole.log(arrAges); // [ 10, 20, 30, 40 ]// ES6:const es6Result = arrAges.forEach((item) => item * 2);console.log(es6Result); // undefinedconsole.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 undefinedconsole.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更好。
