👋 前言
在日常前端开发中,map、filter、forEach 我们都用得顺手,但一提到 reduce,很多人马上露出“🤯懵”的表情。虽然 reduce 看起来像是“现代高级语法”,但它其实早在 ES5(2009 年)就已经诞生了。
那一年,你可能还在用 IE8,但 reduce 已经在等你了 😎
我们常听到两种极端的说法:
那么问题来了:到底什么时候我们真的“需要” reduce?它的优势到底是什么?
🧩 一句话解释:reduce 是“归并器”
reduce 的作用是:把一个数组变成一个值(这个值可以是数字、对象、数组、字符串……都可以)。
举个简单例子:
const nums = [1, 2, 3];
const sum = nums.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 6
没错,它可以“累加”。但 reduce 远不止加法那么简单。
🚀 用 reduce 可以做什么?

🧠 举几个“值得用”的例子
✅ 1. 把数组变成对象(索引表)
const list = [
{ id: 'a1', name: '张三' },
{ id: 'b2', name: '李四' },
];
const map = list.reduce((acc, item) => {
acc[item.id] = item.name;
return acc;
}, {});
console.log(map);
// 👉 { a1: '张三', b2: '李四' }
比起先 forEach 然后一个个 map[item.id] = ...,reduce 一步到位,清晰干净。
✅ 2. 分组统计
const items = [
{ type: 'A', count: 1 },
{ type: 'B', count: 2 },
{ type: 'A', count: 3 },
];
const grouped = items.reduce((acc, item) => {
acc[item.type] = (acc[item.type] || 0) + item.count;
return acc;
}, {});
console.log(grouped);
// 👉 { A: 4, B: 2 }
很难用 map 或 filter 做得更清楚,这种“合并累加”的需求,reduce 天生就适合。
✅ 3. 复杂嵌套数据处理
比如后端返回了一堆数据,要按 tab 分类:
const data = [
{ tab: 'A', value: 1 },
{ tab: 'B', value: 2 },
{ tab: 'A', value: 3 },
];
const tabMap = data.reduce((acc, item) => {
if (!acc[item.tab]) acc[item.tab] = [];
acc[item.tab].push(item.value);
return acc;
}, {});
得到:
{
A: [1, 3],
B: [2]
}
😵 为什么有些人觉得 reduce 很难用?
它“抽象”太强,acc 是什么?cur 是谁?初始值又是啥?
很多时候,只是为了“副作用”用它(比如 acc[x] = ...),反而不如 forEach 来得直观
ESLint 常提示 no-param-reassign,让初学者更混乱
🎯 那到底什么时候该用 reduce?
总结一句话:
✅ 当你需要把一个数组“转化”为一个值/对象/结构时,推荐用 reduce
❌ 如果只是遍历数组执行操作,不推荐用 reduce,用 forEach 更好
❌ 什么时候不要硬上 reduce
情况 1:只是单纯做副作用(比如设置值)
// ❌ 没必要用 reduce
arr.reduce((_, item) => {
doSomething(item);
}, null);
// ✅ 应该用 forEach
arr.forEach(item => doSomething(item));
情况 2:代码变得难以阅读
如果你要解释 3 层嵌套的 reduce 才能让别人理解,那就说明它不该用 reduce,哪怕它写起来少几行。
🧘 小结

📘 reduce 这个名字是怎么来的?它英文到底什么意思?
有时候我们学一个 API,会忍不住问:“为什么叫它 reduce?不是叫 sumUp、combine、fold 呢?”
其实它确实是有语义基础的。
reduce 是英文中的动词,意思是:
“to make something smaller or simpler”
——「使某物减少、缩小、简化」
🔤 常见的英文用法举例:
🧠 在 JavaScript 中,reduce 就是这个含义的编程表达:
[1, 2, 3, 4] → 10 // 数字
[1, 2, 3] → {1: true, 2: true, 3: true} // 对象
也就是说:
reduce 是把“一堆数据”归约成“一个值”,
是从“多个” → “一个”的过程,是一种简化、压缩、归纳。
✅ 英文语义与代码行为对照:

所以这个 API 不是随便起名的,它的语义就是 “压缩”、“归并”、“总结”!
总结
reduce 是一个很强大的工具,但不是什么都要 reduce。
当你真正“需要把数组折叠成一个结构”时,reduce 能让你写出 少但更强的代码。
参考文章:原文链接
该文章在 2026/2/6 17:11:00 编辑过