如何在JavaScript对象数组中正确使用reduce方法访问属性求和

你当前代码无法得到正确总捐赠额，核心有两个错误：

• 对*reduce方法*的回调参数理解错误：回调的第一个参数是累计值（存储之前遍历得到的累加结果），第二个参数才是当前遍历到的数组元素。你直接把累计值和整个对象相加，会触发JS隐式类型转换，最终得到拼接的异常字符串，而非数值总和。
• 没有给reduce设置初始累加值，也没有主动访问数组对象上的*totalDonation*属性：不设置初始值时，第一轮回调的累计值默认取数组第一个元素（也就是一条捐赠对象），直接和后续对象做加法运算，完全不符合数值累加的逻辑。

只需要调整reduce的调用逻辑，给累加器设置数值类型的初始值，遍历过程中读取当前对象的捐赠额完成累加即可，修正后的JS代码如下：

const box = document.querySelector(".wholeBox");
let contribution = [
  {name:"charles", totalDonation:1000},
  {name:"oliver", totalDonation:500},
  {name:"leo", totalDonation:300},
];
// reduce第二个参数0是累加的初始值
// acc存储当前已经算出的总捐赠额，current是当前遍历到的单条捐赠记录
const totalContribution = contribution.reduce((acc, current) => acc + current.totalDonation, 0);
box.innerHTML = totalContribution; // 页面最终渲染正确结果1800

• 用reduce做数值累加时，始终建议传入明确的初始值（比如本例的0），可以避免空数组调用报错、首元素类型不符合预期的问题。
• 遍历对象数组做计算时，必须明确访问对象上需要参与计算的属性，不能直接把整个对象传入运算。

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