如何用数组reduce方法按条件统计对象数组中不同鞋码总数？

问题 #

我有一个名为data的对象数组，想要统计两种鞋码的总数。尝试用.reduce()方法结合条件累加，但返回结果是NaN和false，达不到预期效果。

原始代码：

const data = [
    { "shoeSize": "size 10", "total": 9 },
    { "shoeSize": "size 10", "total": 3 },
    { "shoeSize": "size 5",  "total": 2 }
];

const grandTotal = data.reduce((prev, curr) => {
    return {
        shoeSize10Total: 
            prev.shoeSize === "size 10" || 
            curr.shoeSize === "size 10" && 
            prev.total + curr.total,

        shoeSize5Total: 
            prev.shoeSize === "size 5" || 
            curr.shoeSize === "size 5" && 
            prev.total + curr.total
    };
});

console.log(grandTotal);

预期结果：

const grandTotal = {
    shoeSize10Total: 12,
    shoeSize5Total: 2
};

解决方案 #

错误原因分析 #

1. 未设置reduce初始值：不给.reduce()传初始值时，第一次迭代的prev是数组第一个元素，后续迭代prev变成返回的自定义对象，此时prev.shoeSize和prev.total不存在，直接访问会得到undefined，计算后出现NaN。
2. 逻辑运算符优先级错误：&&优先级高于||，导致条件判断逻辑完全偏离预期，最终返回布尔值而非累加数值。
3. 对prev结构理解错误：prev应该是存储累加结果的对象，而非数组元素，你错误地用它的元素属性做判断。

正确代码 #

const data = [
    { "shoeSize": "size 10", "total": 9 },
    { "shoeSize": "size 10", "total": 3 },
    { "shoeSize": "size 5",  "total": 2 }
];

const grandTotal = data.reduce((acc, curr) => {
    // 根据当前元素的鞋码，累加对应总数
    if (curr.shoeSize === "size 10") {
        acc.shoeSize10Total += curr.total;
    } else if (curr.shoeSize === "size 5") {
        acc.shoeSize5Total += curr.total;
    }
    return acc;
}, { shoeSize10Total: 0, shoeSize5Total: 0 }); // 初始化累加对象

console.log(grandTotal);
// 输出：{ shoeSize10Total: 12, shoeSize5Total: 2 }

代码说明 #

• 给.reduce()传入初始值{ shoeSize10Total: 0, shoeSize5Total: 0 }，确保第一次迭代时acc是我们需要的累加结构。
• 每次迭代判断当前元素的shoeSize，对应累加curr.total到acc的属性中。
• 最后返回更新后的acc，完成所有元素的遍历累加。

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