JavaScript实现合并数组中相同key的对象

需求说明 #

需要将数组中拥有相同id的多个对象合并为单个对象，示例如下：

转换前数组

[
  {
    "speed": 779.5,
    "id": 1
  },
  {
    "code": "04.x.D3",
    "id": 1
  },
  {
    "temperature": 49,
    "id": 1
  },
  {
    "range": 0,
    "id": 1
  },
  {
    "temperature": 41,
    "id": 2
  },
  {
    "range": 3,
    "id": 2
  }
]

转换后数组

[
  {
    "speed": 779.5,
    "code": "04.x.D3",
    "temperature": 49,
    "range": 0,
    "id": 1
  },
  {
    "temperature": 41,
    "range": 3,
    "id": 2
  }
]

解决方案 #

可以使用JavaScript的reduce方法结合Object.assign实现合并，代码如下：

const originalArray = [
  { "speed": 779.5, "id": 1 },
  { "code": "04.x.D3", "id": 1 },
  { "temperature": 49, "id": 1 },
  { "range": 0, "id": 1 },
  { "temperature": 41, "id": 2 },
  { "range": 3, "id": 2 }
];

// 合并逻辑
const mergedArray = Object.values(
  originalArray.reduce((accumulator, currentObj) => {
    const objId = currentObj.id;
    // 如果当前id对应的对象不存在，先初始化一个空对象
    if (!accumulator[objId]) {
      accumulator[objId] = {};
    }
    // 将当前对象的所有属性合并到对应id的对象中
    Object.assign(accumulator[objId], currentObj);
    return accumulator;
  }, {}) // 初始累加器为一个空对象
);

console.log(mergedArray);

代码说明 #

1. 使用reduce遍历原数组，以id作为累加器对象的键，实现按id分组存储合并对象。
2. 每次遍历到对象时，若累加器中无对应id的对象，则先创建空对象占位。
3. 通过Object.assign将当前对象的所有属性合并到对应id的对象中（若同id下存在重复属性，后续属性会覆盖之前的，示例中无重复属性，刚好匹配需求）。
4. 最后用Object.values提取累加器对象的所有值，形成最终的合并数组。

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