如何按id分组对象数组并合并values属性的数组？

给定如下对象数组：

let data = [
    { "id": "12", "values": [ "_status.com", "_verify.com" ] },
    { "id": "12", "values": [ "_result.com"] },
    { "id": "15", "values": [ "_integrate.com"] }
]

需求是将相同id的对象分组，并合并它们的values数组，最终得到：

let result = [
    { "id": "12", "values": [ "_status.com", "_verify.com", "_result.com" ] },
    { "id": "15", "values": [ "_integrate.com"] }
]

实现方案 #

可以使用JavaScript的reduce方法结合Object.values完成需求，代码如下：

const result = Object.values(data.reduce((acc, current) => {
  // 若当前id未在累加器中，初始化对应结构
  if (!acc[current.id]) {
    acc[current.id] = { id: current.id, values: [] };
  }
  // 合并当前item的values数组到累加器对应项中
  acc[current.id].values.push(...current.values);
  return acc;
}, {}));

代码说明 #

1. reduce遍历分组：reduce的累加器acc是一个临时对象，以id作为键，存储对应id的合并后对象。
2. 初始化分组项：如果当前遍历到的id尚未在acc中，就创建一个包含该id和空values数组的对象。
3. 合并values数组：利用扩展运算符...将当前对象的values元素逐个添加到分组项的values数组中。
4. 转换为目标数组：最后通过Object.values提取临时对象中的所有值，得到最终的对象数组。

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