如何对数组中对象的属性求和？数组长度超2时出现NaN问题求助

你遇到的这个NaN问题，核心原因是没有给reduce方法设置初始累加值。我给你拆解一下为什么会出现这种情况：

当数组只有2个元素时，reduce的执行流程是：

1. 第一次迭代：p是数组的第一个对象{price:5}，c是第二个对象{price:10}，计算p.price + c.price得到15。
2. 因为数组只有2个元素，迭代直接结束，返回15，结果正确。

但当数组有3个及以上元素时，流程就出问题了：

1. 第一次迭代：p是第一个对象，c是第二个对象，得到15（数字类型）。
2. 第二次迭代：p变成了15（不再是对象），你去访问p.price就会得到undefined，undefined + 数字的结果就是NaN，之后所有迭代都会保持NaN，最终返回错误结果。

正确的写法 #

给reduce加上初始累加值（第二个参数，这里设为0），同时调整回调函数的逻辑，让每次迭代都用累加值加上当前元素的price：

const data = [
  { "id": "5ad772d199ce7c1366e5ce7d", "price": 5},
  { "id": "5ad772d199ce7c1366e5ce7d", "price": 10},
  { "id": "5ad772d199ce7c1366e5ce7f", "price": 7} // 新增元素
];

console.log(data.reduce((total, current) => total + current.price, 0));
// 输出：22

写法解释： #

• total是累加器，初始值为0（通过reduce的第二个参数设置）。
• 每次迭代，把当前元素的price加到total上，返回新的累加值。
• 不管数组长度是多少，累加器始终是数字类型，不会出现访问price属性的错误。

额外提示 #

如果你的数组里可能存在price为undefined或者非数字的情况，可以加个兜底处理，避免意外的NaN：

console.log(data.reduce((total, current) => total + (current.price || 0), 0));

这样就算某个元素没有price属性，也会用0来替代，保证求和结果正常。

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