JavaScript 里怎么理解 reduce 函数？新手先排查这 3 个坑，附示例

reduce 是 JavaScript 数组里最容易被误用、也最强大的方法之一。本文先把结论放前面：它本质是把数组“累积”成一个最终结果，关键在于累加器 acc 的流转、回调的返回值、以及初始值 initialValue 是否给对。新手最常踩的三个坑是：忘了返回累加器导致下一轮拿到 undefined、没传初始值遇上空数组直接报错、把 reduce 当成 map 来用却没输出数组。下面按“先看结论、再讲三个坑的修复写法、最后给排查清单”的顺序讲清楚，帮你在写聚合逻辑时一次写对。

一、核心机制：累加器与返回值

reduce 的回调函数接收四个参数：acc（累加器）、cur（当前项）、index、array，其中最关键的是前两个。reduce 的返回值就是下一轮的 acc，所以回调里必须 return acc，否则下一轮累加器变成 undefined，整个累积链条断掉。基础语法可以先看 HTML 基础 里对脚本结构的说明，把函数返回值的概念先理顺，再理解 reduce 会更顺。

const sum = [1, 2, 3].reduce((acc, cur) => {
  return acc + cur;
}, 0);

把这段在浏览器控制台或 Node 里运行，预期结果（未在本机执行）是 sum 等于 6；想验证边界，就把数组换成 [] 再跑一次，确认没有初始值时直接抛 TypeError。

二、坑一：忘了返回累加器

这是新手调试 reduce 时最容易忽略的一点——函数的返回值就是下一轮的 acc。很多人在回调里写了累加逻辑却忘了 return，结果 acc 变成 undefined，后续计算全部 NaN。修复写法就是确保每一轮都显式 return acc（或返回新的累积结果）。需要给数据类型加约束时，TypeScript 基础 能让累加器的类型在编译期就暴露这类错误。

三、坑二与坑三：初始值缺失与当 map 用

不给 initialValue 时，reduce 会用数组第一项当初始 acc，空数组则直接抛 TypeError；所以遇到可能为空的数据，务必显式传初始值。另一个常见误用是把 reduce 当成 map——想在过程中产出新数组，却忘了在回调里 acc.push(...) 并 return acc，最后只拿到一个被反复修改的引用。聚合结果常以 JSON 数据格式 形式输出，理解“单值累积”和“数组映射”的边界，才知道该用 reduce 还是 map。服务端处理这类逻辑时，流式累积与分批聚合的思路也值得对照，避免一次性把大结果集拉进内存。

四、边界、版本与失败排查清单

reduce 出错按下面顺序排查，基本能覆盖绝大多数情况：

1. 回调是否每一轮都 return 了累加器；
2. 是否传了 initialValue，尤其数据源可能为空时；
3. 是否把 reduce 误当 map 用，忘了在回调里收集结果；
4. 累加器类型是否在每一轮保持一致（数字累加别混入字符串拼接）；
5. 是否对空数组调用了无初始值的 reduce。

性能层面要注意：reduce 是单次遍历，比先 map 再 filter 再求和更高效，但不要为了炫技把本该用 map/filter 的逻辑硬塞进一个 reduce，可读性会下降。版本层面，reduce 从 ES5 起就稳定存在，所有现代环境都支持；在老 IE 上需要 polyfill。理解这些边界，数组聚合逻辑的 bug 会明显减少。

五、进阶：用 reduce 做分组、统计与扁平化

reduce 的威力远不止求和。一个高频实战是把数组按某个字段分组，例如把订单按用户归类：

const byUser = orders.reduce((acc, o) => {
  (acc[o.userId] = acc[o.userId] || []).push(o);
  return acc;
}, {});

这里累加器从数字变成了对象，充分说明 reduce 的“累积结果”可以是任意类型。同样思路能做词频统计、去重计数、按条件拆分。另一个常见用法是扁平化嵌套数组：arr.reduce((acc, cur) => acc.concat(cur), [])，把二维数组压成一维。

但务必记住用途边界：当你只是想把每项变换成新数组，用 map；当你要按条件筛掉某些项，用 filter；只有当目标是“聚合成一个单值或单个结构”时才用 reduce。把三者各司其职，代码可读性最高，也最不容易出 bug。理解这些进阶用法后，再回头看求和、分组、扁平化这些需求，基本都能用同一个 reduce 心智模型统一解决。

再补充一个实战中极容易翻车的点：reduce 的初始值类型要和累加逻辑匹配。如果你期望累加出数字却传了 [] 当初始值，第一次 acc + cur 就会变成“数组拼接字符串”，结果完全跑偏；反过来想拼数组却传了 0，会得到 0[object Object] 之类的怪东西。所以写 reduce 时，初始值不是可选项而是“契约”：它定义了你最终要什么结构。另一个坑是空数组调用无初始值的 reduce 会直接抛错，这在数据来自后端、可能为空时尤其致命，务必养成“可能为空就传初始值”的习惯。最后提醒：reduce 虽强，但过度嵌套的累加逻辑可读性会变差，复杂聚合建议拆成多步或抽成命名函数，让每一步的意图清晰可读。还有一个性能注意点：用 reduce 做超大数组的复杂聚合时，如果每一步都创建新对象，会产生大量中间对象、既占内存又触发 GC；对性能敏感的场景，尽量原地修改累加器，或改用 for 循环，可读性未必差、性能却更可控。补充一句：数组方法里 reduce 与 reduceRight 方向相反，后者从右往左累积，当需要“从末尾开始”的语义（如组合函数、右结合运算）时更自然，但日常大多用 reduce 即可，不要为了不同而不同。把方向和用途都选对，reduce 才是真正顺手的积木。

总结

理解 reduce 的关键是抓住三件事：回调必须返回累加器、初始值要按数据情况显式传入、以及它做的是“单值累积”而非“数组映射”。新手最常踩的坑是忘了 return acc、initialValue 缺失导致空数组报错、把 reduce 当 map 用却没收集结果。把返回值、初始值和用途边界这三点和排查清单对应起来，reduce 的聚合逻辑基本都能一次写对。（以上示例与排查基于 JavaScript 官方文档与常见运行环境整理，文中示例为示意，未在本机逐条执行。）

常见问题

Q：为什么 reduce 算着算着变成了 NaN？

A：几乎都是回调里忘了 return acc，导致下一轮累加器变成 undefined，后续累加全部失效。确保每一轮都显式返回累积结果即可。

Q：什么情况下必须传 initialValue？

A：当数据源可能为空时，无初始值的 reduce 会直接抛 TypeError；另外想让累加器从特定类型（如对象、数组）起步时，也必须显式传入初始值。

Q：reduce 和 map 该怎么选？

A：reduce 适合把数组聚合成一个单值（求和、分组、统计）；想对每项做变换并保留数组，应该用 map。别把本该用 map 的逻辑硬塞进 reduce，可读性会变差。

延伸学习

• JavaScript 教程
• 判断数组空笔记
• 数组去重笔记