如何使用JavaScript的reduce方法计算数组元素的总和

核心思路 #

Array.reduce() 专门用于对数组所有元素做累积计算，你这个场景的实现逻辑非常直接：

• 给reduce传入初始累加值0，作为计算的起点
• 每遍历到一个数组元素，就把该元素的amount属性值加到累积结果中
• 遍历结束后返回的累积结果就是所有金额的总和

可直接运行的代码 #

const productList = [
  { name: 'shoe', amount: 100 },
  { name: 't shirt', amount: 200 },
  { name: 'hat', amount: 400 }
];

// reduce计算总和
const sumAmount = productList.reduce((accumulator, currentItem) => {
  return accumulator + currentItem.amount;
}, 0);

console.log(sumAmount); // 输出 700

也可以简写为一行：

const sumAmount = productList.reduce((acc, curr) => acc + curr.amount, 0);

关键点说明 #

• 回调第一个参数acc（累加器）：存储上一轮计算得到的总和，初始值就是我们传入的第二个参数0
• 回调第二个参数curr（当前项）：当前遍历到的数组元素，也就是每一个商品对象
• 一定要传第二个初始值参数0，如果不传且数组为空时reduce会直接报错，数组不为空时也会把第一个元素当作初始值，导致计算结果错误

兼容优化：如果数据可能存在无amount属性、属性值为null/undefined的情况，可以修改为acc + (curr.amount ?? 0) 做兜底，避免最终结果出现NaN。

内容的提问来源于stack exchange，提问作者nguyencuc2186