#头条创作挑战赛#

　　本文同步本人掘金的原创翻译：https://juejin.cn/post/6857439837411082247

　　JavaScript中的Map和ForEach有什么区别？

　　如果你使用JavaScript一段时间了，你可能遇到两个相似的数组方法：Array.prototype.map()和Array.prototype.forEach()。

　　那么，它们有什么不同？

　　Map & ForEach 定义

　　我们先看一眼它们在MDN上的定义：

　　forEach() -- 对数组中的每个元素执行提供的函数map() -- 在被调用的数组基础上创建一个新数组，并对数组中的每个元素执行方法这到底意味着什么？

　　嗯，forEach方法实际上没有返回什么东西（undefined）。它只是简单为数组中的每个元素提供一个方法。允许该回调方法改变调用的数组。

　　译者加

　　let arr = [1, 2, 3] arr.forEach((item, index)=> { arr[index] = item * 3 }) console.log(arr) // [3, 6, 9] 复制代码

　　相似的，map()也为数组中的每个元素都提供了方法调用。区别在于，map()使用返回值，并实际返回和（旧）数组相同大小的新数组。

　　译者加

　　console.log(

　　[1, 2, 3].map(item => {

　　 console.log(item)

　　})

　　)

　　// 1

　　// 2

　　// 3

　　// [undefined, undefined, undefined]

　　代码示例

　　考虑到下面的数组。如果我们相对数组中的元素double，那么我们可以使用map或forEach。

　　let arr = [1, 2, 3, 4, 5];ForEach:

　　注意：你永远不会从forEach函数的返回return值，因为返回值被抛弃。

　　arr.forEach((num, index) => { return arr[index] = num * 2;});结果：

　　// arr = [2, 4, 6, 8, 10]Map:

　　let doubled = arr.map(num => { return num * 2;});结果：

　　// doubled = [2, 4, 6, 8, 10]速度注意事项

　　测试JavaScript方法和函数执行速度区别，jsPerf是一个很好的网站。

　　下面是我对forEach()vsmap()的测试结果。

　　正如你看到的，在我的机器上，forEach()比map()执行速度慢了超过70%。在你的浏览器上可能不同，你可以在此处查看完整的测试结果：

　　jsperf.com/map-vs-fore…

　　功能注意事项

　　如果你喜欢函数编程，明白如何使用map()很重要。

　　因为forEach()可以影响并更改我们原有的数组，然而，map()返回一个完整的新数组--它不会更改原数组。

　　哪个更好？

　　这取决于你尝试实现什么功能。

　　当你尝试不更改你数组元素的时候，forEach()更合适些。比如只是想简单干点什么：比如将元素存储到数据库或者打印出来。

　　let arr = ['a', 'b', 'c', 'd'];arr.forEach((letter) => { console.log(letter);});// a// b// c// d至于map()，当你想变更数据的时候，它更合适些。不仅仅因为它执行速度更快，而且它返回一个新数组。这就意味着我们可以做一些很棒的事，比如和其他方法（map()，filter()，reduce()等）链式调用。

　　let arr = [1, 2, 3, 4, 5];let arr2 = arr.map(num => num * 2).filter(num => num > 5);// arr2 = [6, 8, 10]上面的示例首先是遍历arr，为数组的每个元素乘2。接着，我们过滤新数组，并且只保留大于5的元素。这就得到了我们的最终数组arr2，值为[6,8,10]。

　　重点

　　几乎能用forEach()实现的功能，都可以使用map()实现，反之亦然。map()分配内存并存储返回值。forEach()摒弃返回值，并最终返回undefined（这个方法没有返回值）。forEach()允许回调函数更改当前的数组。map()将返回一个新数组。