突破前端开发面试（五）：你知道何时应该使用forEach而不是map吗？

引言

在JavaScript编程中，循环是不可或缺的工具，它们允许我们有效地处理和操作数组中的元素。然而，JavaScript提供了多种不同类型的循环方法，其中包括forEach和map。这两者可能看起来很相似，但它们在使用和用途上存在显著差异。

你是否曾经在编程中感到困惑，不确定何时应该使用forEach，何时应该使用map？本文将解开这个迷题，帮助你更好地理解这两种循环的区别，并提供实际的示例，以便你在日常编程中能够明智地选择合适的循环方法。让我们深入研究forEach和map，探讨它们的语法、用法，以及最佳实践。

问题的答案

为了理解两者的区别，我们看看它们分别是做什么的。

forEach

• 遍历数组中的元素。

• 为每个元素执行回调。

• 无返回值。

const a = [1, 2, 3]
const doubled = a.forEach((num, index) => {
  // 执行与 num、index 相关的代码
})

// doubled = undefined

map

• 遍历数组中的元素

• 通过对每个元素调用函数，将每个元素“映射（map）”到一个新元素，从而创建一个新数组。

const a = [1, 2, 3]
const doubled = a.map((num) => {
  return num * 2
})

// doubled = [2, 4, 6]

.forEach和.map()的主要区别在于.map()返回一个新的数组。如果你想得到一个结果，但不想改变原始数组，用.map()。如果你只需要在数组上做迭代修改，用forEach。

1.forEach 循环的解析

1.1 语法和用法

• 解释 forEach 循环的基本语法。

• 强调如何使用它来遍历数组并执行回调函数。 forEach 循环是 JavaScript 中的一种数组迭代方法，其语法如下：

array.forEach(callback(element, index, array));

• callback 是在数组的每个元素上执行的函数。

• element 代表当前数组元素。

• index 代表当前元素的索引。

• array 是调用 forEach 的数组本身。

forEach 循环对数组中的每个元素应用回调函数，但它不会创建一个新数组或改变原始数组。

1.2 使用示例

• 提供一个或多个具体的示例，展示 forEach 在实际编程中的应用场景。

• 以下是一个简单的示例，展示了 forEach 循环的用法

const fruits = ['苹果', '香蕉', '橙子', '葡萄'];

fruits.forEach((fruit, index) => {
  console.log(`第${index + 1}个水果是${fruit}`);
});

这个示例演示了如何使用 forEach 循环遍历数组中的水果，并在每个水果前输出它的索引。这对于执行遍历操作非常有用。

2. map 循环的解析

2.1 语法和用法

• 解释 map 循环的基本语法。

• 强调如何使用它来遍历数组并创建一个新数组，包含经过回调函数处理后的结果。 map 循环是 JavaScript 中的一种数组迭代方法，其语法如下：

const newArray = array.map(callback(element, index, array));

• callback 是在数组的每个元素上执行的函数。

• element 代表当前数组元素。

• index 代表当前元素的索引。

• array 是调用 map 的数组本身。

map 循环会遍历数组中的每个元素，并将回调函数的结果收集到一个新数组中，同时不会修改原始数组。

2.2 使用示例

• 提供一个或多个具体的示例，展示 map 在实际编程中的应用场景。 以下是一个简单的示例，演示了 map 循环的用法：

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => num * num);

console.log(squaredNumbers); 

在这个示例中，map 循环将遍历 numbers 数组中的每个数字，并将每个数字的平方存储在 squaredNumbers 数组中。这种操作非常适合生成一个新的数组，其中包含了原始数组元素的变换结果。

3. 区分 forEach 和 map

3.1 返回值的差异

• 比较 forEach 和 map 的返回值，解释为什么它们不同。

• 提供指导原则，基于返回值的需求，来决定何时使用哪个循环方法。 forEach 循环不返回一个新的数组，它的返回值是 undefined。这意味着 forEach 主要用于遍历数组并执行回调函数，而不会创建一个新的数组。

map 循环则返回一个新的数组，其中包含经过回调函数处理后的结果。这使得 map 非常适合在原始数组的基础上创建一个新的数组，而不会修改原始数据。

• 使用 forEach 当你只需要遍历数组，而不需要创建一个新的数组。

• 使用 map 当你需要创建一个新的数组，其中包含根据原始数组的元素生成的新值。

3.2 使用场景

• 讨论何时应该选择 forEach，以及何时应该选择 map。

• 提供具体的示例和场景，以帮助读者明智地选择适当的循环方法。

• 使用 forEach 当你需要在数组元素上执行操作，但不需要生成一个新的数组。例如，你可能会使用 forEach 来更新原始数组的值，而不关心返回的结果。

• 使用 map 当你需要创建一个新的数组，其中包含根据原始数组的元素生成的新值。这在将原始数据映射到新数据时非常有用，例如从一个数组中提取特定属性并创建一个包含这些属性的新数组。

示例：

const numbers = [1, 2, 3, 4];
numbers.forEach((num, index, arr) => {
  arr[index] = num * 2;
});


const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map((num) => num * 2);

结语

在本博客中，我们深入研究了 JavaScript 中的 forEach 和 map 循环，以及它们之间的重要区别。了解这两种循环方法的用法和适用场景对于每个 JavaScript 开发者都非常重要。让我们回顾一下我们讨论的主要观点。

• forEach 循环是一种用于遍历数组并执行回调函数的方法。它对于修改原始数组或执行某些操作而不需要生成新数组非常有用。但请记住，它的返回值是 undefined，因为它不创建新数组。

• map 循环也用于遍历数组，但它不仅执行回调函数，还创建一个新的数组，其中包含根据原始数组元素生成的新值。这使得 map 在从原始数据映射到新数据时非常有用。

选择正确的循环方法取决于你的具体需求。

• 如果你需要在原始数组上执行操作而不生成新数组，forEach 是合适的选择。

• 如果你需要生成一个新数组，其中包含根据原始数组元素生成的新值，那么 map 是更好的选择。

感谢你阅读本博客，希望它对你更好地理解和利用 forEach 和 map 循环提供了有价值的信息。如果你有任何问题或需要进一步的帮助，欢迎留下评论或联系我们。继续探索 JavaScript 的世界，愿你的编程之路充满成就和乐趣！