如何在 JS 中展平来自孩子的分层对象数组 + 总和值

问题描述

这个让我很头疼，我不知道如何实现重组这个对象数组：

const obj = [
  {
    id: 10,name: "foo",// parent
    value: 20
  },{
    id: 11,name: "foo - 1",// child
    value: 2
  },{
    id: 12,name: "foo - 2",// child
    value: 4
  },{
    id: 20,name: "bar",// parent
    value: 10
  },{
    id: 21,name: "bar - 1",// child
    value: 8
  }
];

为此：

const desired = [
  {
    id: 10,value: 26 // "foo" + "foo - 1" + "foo - 2"
  },value: 18 // "bar" + "bar - 1"
  }
];

我想对各个孩子的值进行求和，然后用结果更新父母的值，然后删除孩子。

该实现应该符合 ES6+，并且没有像 lodash（或类似的库）这样的库。

解决方法

使用reduce按名称关键字分组（通过应用正则表达式），然后取Object.values获取数组数据

const arr = [ { id: 10,name: "foo",value: 20 },{ id: 11,name: "foo - 1",value: 2 },{ id: 12,name: "foo - 2",value: 4 },{ id: 20,name: "bar",value: 10 },{ id: 21,name: "bar - 1",value: 8 }];

const result = Object.values(arr.reduce((a,e)=>{
    const name = e.name.match(/\w+/g)[0];
    // OR also you can split like e.name.split("-")[0]
    a[name] ??= {...e,name,value:0};
    a[name].value+=e.value;
    return a;
},{}));

console.log(result);