[译] JavaScript -- Map vs ForEach

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

banner

如果你使用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()的测试结果。

test_foreach_map

正如你看到的，在我的机器上，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()将返回一个新数组。

后话

• 原文：codeburst.io/javascript-…
• 文章首发：github.com/reng99/blog…
• 更多内容：github.com/reng99/blog…