Array.map() 与 Array.forEach()：JavaScript 中数组遍历的异同

在 JavaScript 中，遍历数组是编程中的常见任务。有两种主要方法可以做到这一点：Array.map() 和 Array.forEach(). 本文将深入探讨这两种方法之间的差异，以便你选择最适合你需求的方法。

Array.map() 与 Array.forEach()

相似之处

• Array.map() 和 Array.forEach() 都用于遍历数组。
• 它们都接受一个回调函数作为参数。
• 回调函数接受当前元素、当前索引和原始数组作为参数。
• 它们都按数组的顺序遍历元素。

不同之处

特性	Array.map()	Array.forEach()
返回值	返回一个新数组，其中包含经过回调函数处理的每个元素	无返回值，仅执行回调函数
变异	不变异原始数组	不变异原始数组
目的	创建一个新数组，其中包含转换后的元素	对每个元素执行副作用，如打印或修改原始数组

用法

Array.map() 用于创建原始数组中每个元素的新数组。回调函数用于转换每个元素。

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

const doubledNumbers = numbers.map((number) => number * 2);

console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

Array.forEach() 用于对原始数组中的每个元素执行副作用。回调函数用于执行此操作，但不能返回任何值。

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

numbers.forEach((number) => console.log(number));

// 输出:
// 1
// 2
// 3
// 4
// 5

何时使用 Array.map()？

使用 Array.map() 的场景包括：

• 需要创建原始数组中每个元素的新数组时。
• 需要对每个元素执行转换时。
• 需要根据每个元素创建一个新数据结构时。

何时使用 Array.forEach()？

使用 Array.forEach() 的场景包括：

• 需要对每个元素执行副作用时，例如打印或修改原始数组。
• 不需要返回任何值时。
• 需要遍历数组中的每个元素时，但不需要转换它们。

结论

Array.map() 和 Array.forEach() 都是 JavaScript 中遍历数组的有效方法。Array.map() 用于创建原始数组中每个元素的新数组，而 Array.forEach() 用于对每个元素执行副作用。根据你的具体需求，选择最合适的方法。