你应该知道的 forEach() 和 map() 的 4 个主要区别

最后想说的话

原文发布于我的博客

JavaScript 提供了一些方便的方法来帮助我们遍历数组。其中最常用的两个方法是 ` Array.prototype.map()if` 和 `if` Array.prototype.forEach()，但它们之间的区别仍然有些模糊，尤其对于初学者而言。因为它们都会进行遍历并输出结果。那么，它们之间究竟有什么区别呢？

• 定义
• 1. 返回值
• 2. 能够与其他方法串联使用
• 3. 可变性
• 4. 性能速度
• 最后想说的话

定义

该map()方法创建一个新数组，数组中包含对调用数组中的每个元素调用提供的函数的结果。

该forEach()方法对数组中的每个元素执行一次提供的函数。

1. 返回值

map()两者之间的第一个区别forEach()在于返回值。该forEach()方法返回一个新数组undefined，而map()另一个方法返回一个包含转换后元素的新数组。即使它们执行相同的操作，返回值仍然不同。

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined

myAwesomeArray.map(x => x * x)
//>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25]

2. 能够与其他方法串联使用

这两个数组方法的第二个区别在于，`map`map()是可链式调用的，也就是说，你可以在对数组执行一个方法后，再添加 `map`、`map` 等reduce()方法sort()。而 `map` 则不能这样做，因为正如你可能猜到的那样，它返回的是 `null` 。filter()map()forEach()undefined

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined
myAwesomeArray.map(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>>return value: 55

3. 可变性

根据MDN 文档：

forEach()不会改变被调用时的数组。（但是，callback可能会改变数组。）

map()不会改变调用它的数组（尽管callback，如果调用，可能会改变数组）。

JavaScript 很奇怪。

GIF

这里我们看到了一个非常相似的定义，而且我们都知道它们都接受一个callback参数，那么，哪一个依赖于不可变性呢？

嗯，在我看来，这个定义并不清晰。要知道哪个方法不会改变原始数组，我们首先需要了解这两种方法的工作原理。

该map()方法返回一个全新的数组，其中包含转换后的元素，且数据量相同。在这种情况下forEach()，即使它返回undefined，它也会使用 修改后的原始数组callback。

因此，我们清楚地看到，它map()依赖于不可变性，并且forEach()是一种变异方法。

4. 性能速度

就性能速度而言，它们略有不同。但这重要吗？这取决于多种因素，例如计算机性能、数据量等等。您可以参考下面的示例或使用jsPerf自行测试，看看哪种方法更快。

const myAwesomeArray = [1, 2, 3, 4, 5]

const startForEach = performance.now()
myAwesomeArray.forEach(x => (x + x) * 10000000000)
const endForEach = performance.now()
console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)

const startMap = performance.now()
myAwesomeArray.map(x => (x + x) * 10000000000)
const endMap = performance.now()
console.log(`Speed [map]: ${endMap - startMap} miliseconds`)

最后想说的话

和往常一样，选择 `get() map()` 还是 ` forEach()get()` 取决于具体使用场景。如果您计划更改、替换或使用数据，建议选择 `get()` map()，因为它会返回一个包含转换后数据的新数组。但是，如果您不需要返回的数组，则不要使用 `get()` map()，而应该使用 `get() forEach()` 甚至for循环。

希望这篇文章能清楚地说明这两种方法的区别。如果还有其他区别，请在评论区留言，谢谢阅读。

照片由Franck V.在Unsplash上拍摄