浅谈 Javascript 中的 forEach 和 map 之间的区别

关注

发布于: 2021 年 04 月 21 日

在 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更好。

发布于: 2021 年 04 月 21 日阅读数: 15

原文链接:【http://xie.infoq.cn/article/9203ebc792d7effe92b0375db】。文章转载请联系作者。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

浅谈 Javascript 中的 forEach 和 map 之间的区别

forEach

map

区别

forEach

map

结论

devpoint

评论