箭头函数配合reduce可简化累加逻辑,需注意参数顺序为(acc, curr)、显式传入初始值、单表达式时隐式返回,多逻辑时用花括号加return,避免NaN和类型错误。

箭头函数配合 reduce 能让累加逻辑更简洁,关键在于写对参数顺序、显式传入初始值,并利用隐式返回减少样板代码。
单表达式累加:一行搞定数字求和
对纯数字数组求和,直接用 (acc, curr) => acc + curr,不加花括号,自动返回结果:
const sum = [1, 2, 3, 4].reduce((acc, curr) => acc + curr, 0);- 初始值
0必须显式写出,否则空数组会报错,首项类型不一致还可能引发NaN - 参数名可自定义(如
(total, item)),但顺序不能变:累加器在前,当前值在后
对象数组累加:字段访问直写在表达式里
处理商品列表、订单等对象数组时,把属性访问嵌进箭头函数体即可:
const total = items.reduce((sum, item) => sum + item.price, 0);- 支持复合计算,比如含数量:
sum + item.price * item.qty - 无需解构或额外变量,保持内联性;字段不存在时建议用
item.price ?? 0防undefined
带条件或多步逻辑:用花括号 + return
一旦需要判断、过滤或执行多个操作,就得加 {} 并手动 return:
立即学习“Java免费学习笔记(深入)”;
orders.reduce((sum, order) => { if (order.status === 'paid') return sum + order.amount; return sum; }, 0)- 漏写
return会导致该次回调返回undefined,后续累加变成NaN - 仍需提供初始值,且所有分支都必须有返回值
避免常见掉坑点
看似简单,但几个细节一错就失效:
- 不传
initialValue→ 空数组直接报错,单元素数组会跳过第一次累加 - 箭头函数用了
{}却没return→ 返回undefined,后续计算崩为NaN - 把
curr写在前面、acc写在后面 → 参数错位,结果完全不可控 - 混用字符串和数字(如
'1' + 2)→ 得到'12'而非3,必要时用Number()或一元加号+curr


















