JavaScript 中数组的forEach()和map()的区别

预测未来最好的方法就是去创造未来。——<亚伯拉罕·林肯>

作者：Ashish Lahoti
译者：cl9000
来源：https://codingnconcepts.com/javascript/difference-between-foreach-and-map-in-javascript-array/

在本教程中，我们将看到JavaScript Array中 Array.forEach() 和 Array.map() 方法之间的区别。

forEach() 和 map() 方法大多是通过数组元素用于迭代，但也有一些不同之处，我们会看他们一个接一个。

1. 返回值

forEach() 方法返回 undefined ，而 map() 返回一个包含转换后元素的新数组。

让我们使用以下两种方法找出数组中每个元素的平方：

const numbers = [1, 2, 3, 4, 5];

// using forEach()
const squareUsingForEach = [];
numbers.forEach(x => squareUsingForEach.push(x*x));

// using map()
const squareUsingMap = numbers.map(x => x*x);

console.log(squareUsingForEach); // [1, 4, 9, 16, 25]
console.log(squareUsingMap);     // [1, 4, 9, 16, 25]

由于 forEach() 返回 undefined ，因此我们需要传递一个空数组来创建一个新的转换后的数组。map() 直接返回新的转换数组的方法没有这种问题。在这种情况下，建议使用map() 方法。

2. 链接其他方法

map() 方法输出可以与 reduce()、sort()、filter() 等其他方法链接，以在一条语句中执行多个操作。

另一方面，forEach() 是一种终端方法，这意味着它不能与其他方法链接，因为它返回undefined。

让我们使用以下两种方法找出数组中 每个元素的平方和：

const numbers = [1, 2, 3, 4, 5];

// using forEach()
const squareUsingForEach = []
let sumOfSquareUsingForEach = 0;
numbers.forEach(x => squareUsingForEach.push(x*x));
squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square);

// using map()
const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total, value) => total + value);

console.log(sumOfSquareUsingForEach); // 55
console.log(sumOfSquareUsingMap);     // 55

当需要多次操作时，使用 forEach() 方法是如此繁琐的工作。在这种情况下，我们可以使用 map() 方法。

3. 性能

我们创建了一个具有1百万个随机数（范围从1到1000）的数组。让我们检查每种方法的性能。

// Array:
var numbers = [];
for ( var i = 0; i < 1000000; i++ ) {
    numbers.push(Math.floor((Math.random() * 1000) + 1));
}

// 1. forEach()
console.time("forEach");
const squareUsingForEach = [];
numbers.forEach(x => squareUsingForEach.push(x*x));
console.timeEnd("forEach");

// 2. map()
console.time("map");
const squareUsingMap = numbers.map(x => x*x);
console.timeEnd("map");

这是在MacBook Pro的Google Chrome v83.0.4103.106（64位）上运行上述代码后的结果。我建议复制上面的代码，然后在控制台中尝试一下。

1 2	forEach: 26.596923828125ms map: 21.97998046875ms

显然，map() 方法要比 forEach() 转换元素更好。

4. 中断迭代

这不是这两种方法之间的区别，但重要的是要知道，如果您在 forEach()或 map()中使用break;方法，则无法停止或进行迭代。唯一的方法是从回调函数引发异常，这在大多数情况下可能是不希望的。

如果我们在 forEach() 或 map() 方法的回调函数中使用 break; 声明，

const numbers = [1, 2, 3, 4, 5];

// break; inside forEach()
const squareUsingForEach = [];
numbers.forEach(x => { 
  if(x == 3) break; // <- SyntaxError 
  squareUsingForEach.push(x*x);
});

// break; inside map()
const squareUsingMap = numbers.map(x => {
  if(x == 3) break; // <- SyntaxError 
  return x*x;
});

JavaScript 会引发 SyntaxError ，如下所示：

ⓧ Uncaught SyntaxError: Illegal break statement

5. 总结

建议使用 map() 变换数组的元素，因为它语法短，可链接且具有更好的性能。

如果你不使用返回数组或者不转换数组的元素，你不应该使用 map()。这是一种反模式；相反，您应该使用 forEach()方法。

最后，如果要基于某种条件停止或中断数组的迭代，则应使用简单 for 循环或for-of/for-in循环。

参考

关注【公众号】，了解更多。

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！

1. 返回值

2. 链接其他方法

3. 性能

4. 中断迭代

5. 总结

参考

FEATURED TAGS

FRIENDS