如何实现嵌套数组同名字段的数值分组求和与结构转换

以下JS代码可直接实现需求，已修正原示例中listName未加引号的语法问题：

const data = [
    {
        id: 8434,
        name: "listName", 
        data: [
            {name: "a name", quantity: 20},
            {name: "another name", quantity: 40},
            {name: "another new name", quantity: 40}
        ]
    }, 
    {
        id: 54343,
        name: "new list name", 
        data: [
            {name: "a name", quantity: 12},
            {name: "another name", quantity: 10},
            {name: "another new name", quantity: 16}
        ]
    }
]

const countMap = new Map()
for (const group of data) {
    for (const item of group.data) {
        countMap.set(item.name, (countMap.get(item.name) ?? 0) + item.quantity)
    }
}

const transformed = Array.from(countMap, ([name, quantity]) => ({ name, quantity }))

运行后得到的transformed完全匹配预期结果：

[
  {name: "a name", quantity: 32},
  {name: "another name", quantity: 50},
  {name: "another new name", quantity: 56}
]

实现逻辑说明 #

• 用Map作为临时计数容器，避免普通对象的原型链属性干扰，键值存取效率更高
• 两层遍历直接读取所有内层项，不需要额外调用数组打平方法，减少性能开销
• 用空值合并运算符??做兜底，第一次遇到新的name值时从0开始累加，不会出现计算结果为NaN的问题
• 最后通过Array.from直接把Map结构转为要求的对象数组格式，不需要额外循环转换

如果需要兼容不支持??运算符的老旧JS环境，可以把(countMap.get(item.name) ?? 0)替换为(countMap.get(item.name) || 0)，效果一致。

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