JS数组遍历方法对比：forEach、map、filter与reduce怎么选

假设你正在处理一份电商购物车列表，业务需求层出不穷：需要将每个商品的名称打印在控制台、需要计算所有商品打折后的价格数组、需要筛除无库存商品，还需要统计所有在售商品的总金额。面对这四种诉求，JavaScript 数组原生提供的 forEach、map、filter 和 reduce 恰好一一对应。然而在工程实践中，许多初学者往往习惯用一个 forEach 搭配外部变量解决一切，或者在需要过滤时误用 map 产生大量 undefined 节点。本文将从输入输出模型、底层执行机制、真实代码示例及选型决策树四个维度，彻底讲透如何根据场景精准选择最合适的遍历方法。

一、四大遍历方法的本质定位与数据流动模型

要建立清晰的选型意识，关键在于理解每个方法在内存中对数据的处理形态。这四个方法虽然都接收一个回调函数并按索引顺序遍历数组，但它们在返回值语义与数据流动方向上有着本质差异：

• forEach（遍历消费）：单纯执行副作用（如 DOM 渲染、状态赋值、埋点日志）。它不会返回任何有效数据，其返回值固定为 undefined，无法融入链式调用。
• map（投影变换）：以一对一的形式将原数组中的每一个元素转换为新元素。它会返回一个全新的数组，新数组的长度严格恒等于原数组长度。
• filter（条件筛选）：根据回调函数返回的布尔真假（Truthy / Falsy）决定当前元素的去留。它返回一个新数组，新数组只包含通过测试的元素，长度小于或等于原数组。
• reduce（聚合折叠）：多对一或多对复杂结构的汇总工具。它维护一个累加器（Accumulator），逐项迭代并将当前元素与累加值结合，最终折叠为单一目标值（数字、对象、布尔值或新格式集合）。

二、同一组数据的实战代码对比

为了直观对比差异，我们使用一组统一格式的商品订单数据作为输入，在 Node.js 或浏览器开发者工具控制台中分别执行四种操作：

// 基础数据源：4笔订单记录
const orders = [
  { id: 101, name: '机械键盘', price: 399, paid: true },
  { id: 102, name: '游戏鼠标', price: 199, paid: false },
  { id: 103, name: '高清显示器', price: 1299, paid: true },
  { id: 104, name: '超大鼠标垫', price: 49, paid: false }
];

1. forEach：触发操作与外部消费

当只需要对每个元素执行特定动作，不需要产出新数据时使用 forEach。例如批量上报埋点或打印日志：

// 场景：批量打印未支付订单提醒
const resultForEach = orders.forEach((item, index) => {
  if (!item.paid) {
    console.log(`[提醒] 订单 ${item.id} (${item.name}) 尚未完成支付`);
  }
});

console.log('forEach 返回值:', resultForEach);

// 【示例输出】
// [提醒] 订单 102 (游戏鼠标) 尚未完成支付
// [提醒] 订单 104 (超大鼠标垫) 尚未完成支付
// forEach 返回值: undefined

2. map：提取或转换数据结构

当需要从原有对象中提取某些字段，或者做价格汇率转换时使用 map。它保证输入多少个就输出多少个：

// 场景：提取每个商品的简要卡片对象，并将价格折算为美元（汇率假设 7.0）
const usdSummaries = orders.map(item => ({
  name: item.name,
  priceUSD: Number((item.price / 7.0).toFixed(2))
}));

console.log('map 返回的新数组:', usdSummaries);

// 【示例输出】
// map 返回的新数组: [
//   { name: '机械键盘', priceUSD: 57.00 },
//   { name: '游戏鼠标', priceUSD: 28.43 },
//   { name: '高清显示器', priceUSD: 185.57 },
//   { name: '超大鼠标垫', priceUSD: 7.00 }
// ]

3. filter：剔除无效元素保留子集

当只需要满足特定条件的元素组成新集合时使用 filter。回调函数返回布尔值（或真假值）：

// 场景：筛选出所有已支付且金额大于等于 300 的高价值订单
const highValuePaidOrders = orders.filter(item => item.paid && item.price >= 300);

console.log('filter 筛选出的订单:', highValuePaidOrders);

// 【示例输出】
// filter 筛选出的订单: [
//   { id: 101, name: '机械键盘', price: 399, paid: true },
//   { id: 103, name: '高清显示器', price: 1299, paid: true }
// ]

4. reduce：聚合指标与数据重构

当需要把整个数组折叠为一个数值、一个汇总对象或字典映射表时使用 reduce：

// 场景：统计所有已支付订单的总交易额
const totalPaidAmount = orders.reduce((accumulator, current) => {
  return current.paid ? accumulator + current.price : accumulator;
}, 0);

console.log('已支付订单总额:', totalPaidAmount);

// 场景进阶：按支付状态将订单归类为对象字典
const groupedByPaid = orders.reduce((acc, cur) => {
  const groupKey = cur.paid ? 'settled' : 'pending';
  acc[groupKey].push(cur.name);
  return acc;
}, { settled: [], pending: [] });

console.log('按支付状态分组:', groupedByPaid);

// 【示例输出】
// 已支付订单总额: 1698
// 按支付状态分组: { settled: [ '机械键盘', '高清显示器' ], pending: [ '游戏鼠标', '超大鼠标垫' ] }

三、选型决策路径：3 步锁定最佳遍历方法

面对具体的业务需求，不必纠结于语法细节，只需要沿着以下 3 个核心问题逐步排查，即可快速选定最符合规范的遍历方法：

1. 步骤一：你需要获得计算产物吗？

   如果当前逻辑只是“消费元素”（比如在循环中更新页面已有 DOM、向服务端发送埋点、调用第三方 SDK 方法），且不需要产生后续数据结果，直接选用 forEach。如果中途可能需要提前中断跳出循环，则优先考虑标准的 for...of 结构。

2. 步骤二：期望产出的数据形态是数组还是单值？

   如果期望产出的是单一数值（如求和、求最大值）、单一布尔判断，或者是一个重新组合的分组字典对象（例如 Record<string, Item[]>），选用 reduce。如果期望得到一个经过处理的新数组，则进入步骤三。

3. 步骤三：输出数组的元素个数与原数组一致吗？

   如果输出数组的长度必须与原数组完全相等，属于“每个元素做等价转换或字段提取”，使用 map。如果元素个数可能会减少，需要根据某些标准甄选保留部分项，使用 filter。

四、核心特性对比矩阵与边界情况分析

了解不同方法的底层细节与边界处理，能帮助我们在编写复杂业务逻辑时避免意外隐患：

1. 为什么这四个方法都不能使用 break 或 continue？

在传统的 for 或 for...of 循环中，我们可以随时使用 break 终止整个循环，或使用 continue 跳入下一轮。但在 forEach、map、filter 和 reduce 中，它们在内部封装了对传入回调函数的依次调用。在回调函数中使用 return 仅仅相当于普通函数的单次退出（类似 continue 的效果），而不能跳出外层的迭代器机制。在语法上直接使用 break 会报 SyntaxError: Illegal break statement 错误。

2. 稀疏数组（Sparse Arrays）与空槽处理

当数组存在未赋值的空槽（例如 [1, , 3]）时，这四个方法都会自动跳过该空槽，不会执行回调函数。但 map 比较特殊：它保留空槽的位置，返回的新数组在对应索引处依旧是空槽。而 filter 则会直接剔除空槽，返回紧凑的密集数组。

3. async/await 异步陷阱

很多开发者尝试在 forEach 或 map 中直接传递异步函数，例如 orders.forEach(async (item) => await save(item))。需要明确的是：forEach 并不会等待异步 Promise 的完成，循环会在微任务尚未结束时直接往下执行。如果需要并发处理多个异步并获取结果，正确的做法是结合 map 与 Promise.all：

// 正确做法：使用 map 收集 Promise 数组，再使用 Promise.all 并发等待
const updateTasks = orders.map(async item => {
  return await syncToServer(item);
});
const allResults = await Promise.all(updateTasks);

五、实战组合与链式流水线模式

在现代前端工程中，filter、map 和 reduce 常以声明式的链式调用（Chaining Pipeline）协同工作，让数据处理逻辑像流水线一样一目了然：

以下代码演示了从原始订单中先过滤已支付订单，再计算打折后净额，最后汇总总营收的管道式写法：

// 声明式链式处理管道
const netRevenue = orders
  .filter(order => order.paid)                      // 1. 过滤：只保留已支付订单
  .map(order => order.price * 0.9)                  // 2. 映射：计算9折优惠后实付价
  .reduce((sum, price) => sum + price, 0);           // 3. 聚合：累加总净营收

console.log('折后净营业额:', netRevenue.toFixed(2));
// 【示例输出】
// 折后净营业额: 1528.20

六、常见开发误区与避坑指南

在日常代码审查中，以下四个典型错误出现频率最高，应当特别警惕：

误区一：把 forEach 当成 map 使用（外部声明数组并 push）

// ❌ 反模式：手动管理外部数组状态，代码啰嗦且易引发并发修改缺陷
const names = [];
orders.forEach(item => {
  names.push(item.name);
});

// ✅ 推荐模式：直接使用 map 表达转换意图
const names = orders.map(item => item.name);

误区二：在 map 中执行条件过滤

map 的返回值必须是元素映射，无法通过 if 条件来剔除元素。如果某个分支没有 return，JavaScript 默认会返回 undefined，导致最终数组混入大量脏数据：

// ❌ 错误示范：试图在 map 内部做筛选
const result = orders.map(item => {
  if (item.paid) {
    return item.price;
  }
  // 没有显式 return 时，隐式返回 undefined！
});
// 结果将是: [ 399, undefined, 1299, undefined ]，而不是 [ 399, 1299 ]

// ✅ 正确做法：先 filter 筛选，再 map 提取
const result = orders.filter(item => item.paid).map(item => item.price);

误区三：reduce 忘记提供 initialValue 导致空数组抛错

在调用 reduce 时，如果省略初始值参数，JavaScript 会默认取数组的第一个元素作为初始累加器，并从第二个元素开始迭代。如果操作的数组恰好为空数组且没有初始值，运行时会直接抛出严重错误：

// ❌ 危险操作：未传初始值，空数组直接崩溃
const emptyList = [];
// 抛出 TypeError: Reduce of empty array with no initial value
// emptyList.reduce((acc, cur) => acc + cur.price);

// ✅ 严谨做法：始终显式声明初始值 0，空数组时优雅返回 0
const safeSum = emptyList.reduce((acc, cur) => acc + cur.price, 0);

误区四：在回调函数中意外修改原对象属性

虽然 map 和 filter 会返回新数组容器，但如果数组内部存放的是引用类型的对象，在回调函数中直接执行 item.price = 100 会直接修改原数组所指向的同一个堆内存对象，违背不可变数据原则。在需要变更对象属性时，应通过对象解构（Spread）返回新对象：

// ❌ 隐蔽缺陷：直接修改了原始 orders 列表中对象的 price
const discounted = orders.map(item => {
  item.price = item.price * 0.8;
  return item;
});

// ✅ 规范写法：浅拷贝新对象，保护原数据源不受污染
const discounted = orders.map(item => ({
  ...item,
  price: item.price * 0.8
}));

七、总结

JavaScript 提供了丰富的数组迭代工具，选择何种方法本质上是在向代码读者传达清晰的编程语义：

• 如果你只想借循环执行某些动作，不指望产出新数据，选 forEach；
• 如果你想对每个元素逐一加工并输出同等规模的新数组，选 map；
• 如果你想根据特定条件去粗取精保留子集，选 filter；
• 如果你想将整个集合浓缩汇总为一个综合结果，选 reduce。

牢记“先定目标形态，再定遍历语义”的判断原则，遵循纯函数原则避免原数据污染，就能在日常业务中写出既优雅高效、又不易出错的高质量 JavaScript 代码。