JavaScript中数组对象指定键求和，多元素时返回NaN问题咨询

嘿，这个问题我太熟了！你踩了reduce的一个经典小坑——没搞清楚累加器(acc)的初始值和迭代过程中的类型变化。

先拆解下你代码的执行过程 #

当数组只有2个元素时：

1. 因为没给reduce传初始值，它会默认把第一个元素{ id: "1", quantity: 3 }作为初始的acc
2. 然后迭代第二个元素，计算acc.quantity + product.quantity，也就是3 + 3 = 6，直接返回这个结果，所以输出正确。

但当数组有3个元素时，问题就来了：

1. 第一次迭代：acc是第一个对象，计算后返回3 + 3 = 6（这时候acc的类型从对象变成了数字）
2. 第二次迭代：acc变成了数字6，而数字根本没有quantity属性，所以acc.quantity等于undefined
3. 最后计算undefined + 4，结果自然就是NaN了！

正确的写法很简单 #

给reduce加上初始值0，确保累加器从数字开始，每次都累加数字：

const products = [{ id: "1", quantity: 3 }, { id: "2", quantity: 3 }, { id: "3", quantity: 4 }]
console.log(products.reduce((acc, product) => acc + product.quantity, 0)) // 输出10，正确！

这样执行过程就变成了：

1. 初始acc = 0
2. 第一次迭代：0 + 3 = 3
3. 第二次迭代：3 + 3 = 6
4. 第三次迭代：6 + 4 = 10
   全程都是数字相加，不会出现类型混乱的问题。

小提醒 #

尽量给reduce传初始值，不仅能避免这种类型错误，代码可读性也更强——别人一眼就能看出你是要做数值累加。

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