如何合并对象且不覆盖已有support.id对应的ghi属性？

原始对象结构 #

Object 1：

{ 
  value1: true,
  support: [{
      id: 5,
      ghi: 600
    },{
      id: 8,
      ghi: 900
  }], 
  value3: "any"
}

Object 2：

{
  support: [{
     id: 5
  },{
     id: 8
  },{ 
     id: 12
  }]
}

预期合并结果 #

只保留Object 2中support数组的所有id，同时保留Object 1中已有id对应的ghi属性：

{ 
  value1: true,
  support: [{
      id: 5,
      ghi: 600
    },{
      id: 8,
      ghi: 900
    },{
      id: 12
    }], 
  value3: "any"
}

遇到的问题 #

直接用扩展运算符{...(object1 ?? {}), ...object2}合并时，会完全覆盖support数组，导致原有ghi属性丢失。

解决方案 #

核心思路是单独处理support数组：先把Object1的support项转成以id为键的映射，再遍历Object2的support数组，将每个项与映射中对应id的已有属性合并，最后生成新的support数组，再和Object1的其他属性组合。

实现代码：

const object1 = { 
  value1: true,
  support: [{id:5, ghi:600}, {id:8, ghi:900}], 
  value3: "any"
};

const object2 = {
  support: [{id:5}, {id:8}, {id:12}]
};

// 把object1的support转成id -> 完整对象的映射
const supportMap = new Map(object1.support.map(item => [item.id, item]));

// 处理object2的support数组，合并已有属性
const mergedSupport = object2.support.map(item => {
  // 如果映射里有对应id，就合并属性，否则直接用当前项
  return supportMap.has(item.id) ? {...supportMap.get(item.id), ...item} : item;
});

// 合并最终对象
const mergedObject = {
  ...object1,
  support: mergedSupport
};

console.log(mergedObject);

代码说明 #

1. 创建映射：用Map存储Object1中support项的id和对应完整对象，方便快速查找。
2. 合并数组项：遍历Object2的support数组，每个项先检查映射中是否存在相同id，存在则合并原有属性和当前项（当前项的属性会覆盖原有同名属性，这里需求里无冲突，不影响结果），不存在则直接保留当前项。
3. 生成最终对象：用扩展运算符保留Object1的其他属性，替换处理后的support数组。

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