JavaScript中数组如何遍历_ForEach和Map方法有何不同

紅蓮之龍 2026-01-02 00:00:00 次阅读

forEach适合副作用操作且返回undefined，map必须返回值并生成等长新数组；二者语义不同，不可混用，性能差异可忽略。

forEach 适合只做副作用，不关心返回值

当你只是想对数组每个元素执行某个操作（比如打印、发请求、修改外部变量），forEach 是最直接的选择。它不产生新数组，也不允许中途跳出（break 无效），返回值固定是 undefined。

常见错误是误以为能用 return 中断循环——其实只能退出当前回调函数，不会终止整个遍历：

const arr = [1, 2, 3];
arr.forEach(item => {
  if (item === 2) return; // ✅ 跳过后续逻辑，但循环继续
  console.log(item); // 输出 1 和 3
});

不能用 continue 或 break
无法链式调用（因为返回 undefined）
不支持异步操作的顺序等待（async 回调会被忽略 await）

map 必须有返回值，且自动组装成新数组

map 的核心契约是：对每个元素调用回调函数，把每次的返回值收集起来，组成一个**等长的新数组**。它不修改原数组，也不允许返回 undefined 来“跳过”某项——哪怕你什么也不写，也会得到 undefined 占位。

典型误用是把它当 forEach 用，却忘了处理返回值：

const arr = [1, 2, 3];
const result = arr.map(item => {
  console.log(item * 2); // ✅ 打印 2, 4, 6
  // ❌ 没有 return，result 是 [undefined, undefined, undefined]
});

必须显式 return，否则新数组全是 undefined
返回值类型可任意（数字、对象、Promise……），但长度一定和原数组一致
适合纯函数式场景：输入确定 → 输出确定 → 可链式调用（如 .map().filter().reduce()）

性能与语义差异：别为“快一点”选错方法

两者底层都是循环，性能差异几乎可以忽略。关键区别在语义和约束：

forEach：声明「我要遍历并做点事」，隐含副作用（修改外部状态、IO 等）
map：声明「我要把每个元素转成另一个东西」，隐含不可变性（原数组不动，结果可预测）
如果需要筛选+转换，优先用 map + filter 组合，而不是在 forEach 里手动 push

混淆两者的代价不是性能，而是代码意图模糊、难以测试、容易引入隐藏状态。

替代方案：for...of 和传统 for 循环更灵活

当你要提前退出、处理稀疏数组、或需要索引+值+原数组三元信息时，forEach 和 map 都不够用：

for...of 支持 break/continue，且可解构获取值：for (const [i, item] of arr.entries()) { ... }
传统 for 循环性能略优（尤其超大数组），且完全可控：for (let i = 0; i
Array.from(arr, mapper) 是 map 的替代写法，支持类数组对象