JavaScript迭代API之王：forEach与map的对比分析

前端

2023-02-24 23:13:51

深度探索 forEach 和 map：JavaScript 迭代 API 的利器

什么是 forEach 和 map？

在 JavaScript 中，遍历数组的常见工具是 forEach 和 map。它们都是非常有用的迭代 API，可以帮助你轻松地处理数据。

forEach： 此方法用于遍历数组中的每个元素，并对每个元素执行指定的回调函数。它不会返回任何值，主要用于执行不需要返回值的操作。
map： 此方法也遍历数组中的每个元素，但它会将回调函数的返回值作为一个新数组元素。它创建了一个新的数组，其中包含转换后的元素。

关键区别：forEach 与 map

虽然 forEach 和 map 都用于遍历数组，但它们在以下几个关键方面存在差异：

返回值： forEach 不会返回任何值，而 map 会返回一个包含所有转换后元素的新数组。
数组修改： forEach 不修改原始数组，而 map 创建一个新的数组。
终止遍历： forEach 不能终止遍历，而 map 可以。
元素顺序： forEach 和 map 都按照数组的顺序遍历元素。

何时使用 forEach 和 map？

使用 forEach： 当你需要遍历数组中的每个元素，但不需要返回值时，可以使用 forEach。例如，计算数组中所有元素的总和或对每个元素执行一些操作。
使用 map： 当你需要对数组中的每个元素进行某种转换，并将其存储在一个新的数组中时，可以使用 map。例如，将数组中的所有数字乘以 2 或从对象数组中提取特定属性。

代码示例

为了更好地理解 forEach 和 map，我们来看一些代码示例：

使用 forEach 计算数组中所有元素的和：

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

numbers.forEach((number) => {
  sum += number;
});

console.log(`The sum of the numbers is: ${sum}`); // Output: The sum of the numbers is: 15

使用 map 将数组中的所有元素乘以 2：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

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