面试题：JavaScript 的 forEach 和 map 方法有什么区别？

forEach 和 map 都是 JavaScript 中用于遍历数组的方法，但它们在目的、返回值和使用场景上有本质的区别。

核心区别总结

特性	forEach	map
目的	执行副作用（如修改外部变量、操作 DOM、打印日志）	转换数组（创建一个新数组）
返回值	undefined	一个新数组，其长度与原数组相同
是否改变原数组	否（但回调函数内部可以修改）	否
链式调用	通常不能（返回 undefined）	可以（返回新数组）
何时使用	需要对每个元素进行操作，但不关心返回新数组	需要基于原数组的每个元素生成一个新数组

---

详细解释

1. 返回值 (Return Value)

这是最根本的区别。

• forEach: 它的返回值是 undefined。无论你在回调函数中 return 什么，forEach 方法本身总是返回 undefined。

const numbers = [1, 2, 3];
  const result = numbers.forEach(num => num * 2);
  console.log(result); // undefined

• map: 它的返回值是一个全新的数组。这个新数组的每个元素都是原数组对应元素经过回调函数处理后的返回值。

const numbers = [1, 2, 3];
  const doubled = numbers.map(num => num * 2);
  console.log(doubled); // [2, 4, 6]
  console.log(numbers); // [1, 2, 3] (原数组未变)

2. 目的和用途 (Purpose)

• forEach:
• 用于执行操作，而不是为了转换数据。
• 适用于需要对数组中的每个元素进行某种副作用操作的场景。
• 例子:
  • 打印每个元素：array.forEach(console.log)
  • 将每个元素添加到 DOM：items.forEach(item => list.appendChild(createItem(item)))
  • 累加计算：array.forEach(num => sum += num)
• map:
• 用于数据转换。
• 适用于需要将一个数组“映射”成另一个具有相同结构（长度）但内容不同的数组的场景。
• 例子:
  • 将数字数组转换为它们的平方：numbers.map(n => n ** 2)
  • 将用户对象数组转换为用户名数组：users.map(user => user.name)
  • 将字符串数组转换为大写：words.map(word => word.toUpperCase())

3. 对原数组的影响

• 两者都不会改变原数组的结构（如长度）。
• 但是，如果回调函数内部直接修改了原数组的元素（特别是当元素是对象时），原数组仍然可能被改变。这取决于你如何编写回调函数。

4. 链式调用 (Chaining)

• 因为 map 返回一个新数组，所以它可以很容易地与其他数组方法（如 filter, reduce）进行链式调用。

const result = numbers
    .map(n => n * 2)
    .filter(n => n > 3);

• forEach 返回 undefined，所以不能进行有意义的链式调用。

---

选择哪个？

• 你想创建一个新数组吗？ 如果是，用 map。
• 你只是想对每个元素做点事情（比如修改 DOM、发请求、打印）而不关心返回值？ 如果是，用 forEach。

记住口诀：

• map 是为了 return 一个新数组。
• forEach 是为了 do 一些事情。