JavaScript数组遍历：forEach与map区别详解

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《JavaScript数组遍历：forEach与map区别解析》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

forEach不产生新数组，仅执行副作用；map必须返回等长新数组，用于转换。二者均跳过稀疏数组空位，且内部return不能中断循环。

forEach 不产生新数组，map 必须返回新数组；用错会默默出 bug，不是报错。

forEach 只用来「做事」，不关心返回值

它纯粹为执行副作用（比如发请求、改 DOM、打印日志）设计，内部 return 无效，也不会中断循环（break 和 continue 也不支持）。

• 常见错误：以为 return 能跳出循环，结果整个数组还是走完了
• 正确做法：真要提前退出，得用 for...of 或带标志位的 forEach
• 参数顺序是 (item, index, array)，和 map 一致，但你几乎不会用到后两个

const arr = [1, 2, 3];
arr.forEach(item => {
  if (item === 2) return; // 这个 return 只结束当前回调，不影响后续迭代
  console.log(item); // 仍会输出 1 和 3
});

map 必须返回值，且总是返回等长新数组

它本质是「转换」操作：每个输入项对应一个输出项。不写 return 或返回 undefined，新数组里对应位置就是 undefined。

• 常见错误：在 map 里写 console.log 就完事，忘了 return，结果得到 [undefined, undefined, undefined]
• 不能跳过某项：想条件过滤？该用 filter，或先 filter 再 map
• 性能上，如果只是遍历+副作用，map 多分配一次内存，纯浪费

const arr = [1, 2, 3];
const doubled = arr.map(item => item * 2); // [2, 4, 6]
const broken = arr.map(item => {
  console.log(item); // 有副作用，但没 return → [undefined, undefined, undefined]
});

什么时候该选哪个？看你的目标

关键判断依据不是「能不能用」，而是「你要不要那个新数组」。

• 要修改原数组某些元素？→ 先 map 得到新数组，再赋值给原变量（函数式习惯），或直接用 for 循环改原数组
• 要发多个请求但不等结果？→ forEach + fetch，但注意没有并发控制
• 要生成一组 Promise 然后 Promise.all？→ 必须用 map，因为需要返回 Promise 数组
• 要边遍历边根据条件终止？→ 别硬套，用 for...of 或 some/every

最常被忽略的一点：forEach 和 map 都无法处理稀疏数组中的空位（比如 [1, , 3]），它们会跳过空位，且不触发回调——这点和 for 循环不同，也容易导致逻辑遗漏。

今天关于《JavaScript数组遍历：forEach与map区别详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！