JavaScript中Map与ForEach的核心区别及性能对比

对于具备JavaScript开发经验的开发者而言，Array.prototype.map()与Array.prototype.forEach()是两种常见的数组遍历方法，它们表面上看似功能相似。

然而，这两者在实际行为与返回值上存在显著差异。

定义

首先参考MDN文档对这两个方法的官方定义。

forEach()：针对数组中的每个元素执行提供的回调函数（executes a provided function once for each array element）。

map()：创建一个新数组，该数组包含调用数组中每个元素执行提供的函数后返回的结果（creates a new array with the results of calling a provided function on every element in the calling array）。

核心区别在于：forEach()不返回有意义的值（返回undefined），通常用于直接修改原数组；而map()则返回一个新数组，原数组保持不变。

示例

假设有一个数组，我们需要将其中每个元素翻倍，可以通过map和forEach两种方式实现。

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

ForEach

需要注意的是，forEach()不会返回有意义的值。

我们通常在回调函数中直接修改原数组arr的值。

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]

执行速度对比

jsPref是一个用于比较不同JavaScript函数执行速度的优秀工具网站。

以下是forEach()与map()的测试结果对比。

在我的电脑环境中，forEach()的执行速度比map()慢约70%。具体结果因浏览器而异，你可以通过以下链接自行测试：Map vs. forEach - jsPref。

JavaScript行为灵活且复杂，遇到难以排查的BUG时，建议接入Fundebug进行线上实时监控。

函数式角度的理解

如果你倾向于函数式编程风格，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]

例如，我们先使用map将每个元素乘以2，然后紧接着使用filter筛选出大于5的元素，最终结果赋值给arr2。

核心要点

理论上，forEach()能实现的功能，map()也能实现，反之亦然。

map()会分配内存空间存储新数组并返回该数组；forEach()不返回数据，仅执行回调。

forEach()允许通过callback修改原始数组的元素；map()始终返回一个新的数组。