请不要使用Array.map来遍历数组

最近几天帮同事解决一个bug，发现同事在遍历一个数组时，大量使用Array.map而非Array.forEach，于是果断为他指出Array.map和Array.forEach的差异，为了更直观、更有说服力，于是我整理了这篇文章，来告诉大家，不要使用Array.map来遍历数组，请务必分清Array.map和Array.forEach的应用场景。

map和forEach的区别

Array.map和Array.forEach都是JavaScript中常用的数组方法，用于遍历数组并对数组中的元素进行操作。

• Array.map()方法会创建一个新数组，新数组的每个元素是调用原始数组中的每个元素上执行的函数的结果。它将原数组中的每个元素放入函数中进行处理，返回一个新的、处理过的数组，不会改变原数组。语法为：array.map(function(currentValue, index, arr), thisValue)。

• Array.forEach()方法对数组中的每个元素执行一次提供的函数，不会返回新的数组，而是对原数组进行操作。它将原数组中的每个元素依次放入函数中进行处理，不返回新的数组，但可在处理过程中改变原数组。语法为：array.forEach(function(currentValue, index, arr), thisValue)。

Array.map和Array.forEach的回调函数虽然长得一样，但是他们的作用是不一样的，Array.map的回调函数需要返回一个值，而Array.forEach的回调函数不需要返回值。这看起来区别不大，但是在实际使用中，两者之间的性能差异是很大的。

map和forEach的性能比较

测试环境准备

为了测试Array.map和Array.forEach的性能，我们需要先准备一个测试环境：

const arr = [];

for (let i = 0; i < 100000; i++) {
  arr.push(i);
}

测试方法

我们将对每个数组元素进行加1操作，比较Array.map和Array.forEach的执行时间。具体测试方法如下：

// 使用Array.map
console.time('Array.map');
const newArr1 = arr.map(item => item + 1);
console.timeEnd('Array.map');

// 使用Array.forEach
console.time('Array.forEach');
const newArr2 = [];
arr.forEach(item => newArr2.push(item + 1));
console.timeEnd('Array.forEach');

测试结果

我们将以上代码放入Chrome DevTools的Console中执行，得到以下结果：

Array.map: 15.180908203125ms
Array.forEach: 1.775146484375ms

从结果可以看出，使用Array.forEach的执行时间远远小于使用Array.map的执行时间，大约为其1/8左右。

分析原因

为什么使用Array.forEach的执行时间会比使用Array.map的执行时间要小呢？这是因为Array.map返回一个新的数组，而Array.forEach则只是遍历每个数组元素，并对每个元素进行操作，不返回新的数组，因此执行效率更高。

总结

在对大型数组进行操作时，我们建议使用Array.forEach来提高程序的执行效率。而在需要返回新的数组时，则需要使用Array.map。

本文永久链接: https://www.mulianju.com/map-vs-foreach/