JS中如何按匹配主键深度合并两个对象且不覆盖原有属性

直接使用展开运算符或Object.assign仅支持浅层级对象合并，只会处理对象的第一层属性，如果第一层属性的值是对象类型，会直接整体替换原有属性值，不会深入合并子对象的内部属性，因此无法得到你预期的结果。

你当前的两个对象顶层键和子对象的id完全对应，只需要遍历顶层键，对每个键对应的两个子对象做合并即可，示例代码如下：

const Object1 = {'1234':{name: 'One'},'4567': {name: 'two'}};
const Object2 = {'1234':{id: 1234, location: 'paris'},'4567':{id: 4567, location: 'london'}};

const Object3 = Object.fromEntries(
  Object.keys(Object2).map(key => [key, { ...Object1[key], ...Object2[key] }])
);

运行后得到的Object3就是你期望的结果。

如果需要兼容两个对象顶层键不完全一致的场景（比如某个键只存在于Object1或只存在于Object2），可以先对两个对象的所有键去重后再遍历：

// 提取两个对象的所有顶层键并去重
const allKeys = [...new Set([...Object.keys(Object1), ...Object.keys(Object2)])];

const Object3 = Object.fromEntries(
  allKeys.map(key => [key, { ...(Object1[key] || {}), ...(Object2[key] || {}) }])
);

如果后续有多层嵌套对象合并的需求，可以使用通用递归深合并函数：

function deepMerge(target, source) {
  const merged = { ...target };
  for (const key in source) {
    if (typeof source[key] === 'object' && source[key] !== null && typeof merged[key] === 'object' && merged[key] !== null) {
      merged[key] = deepMerge(merged[key], source[key]);
    } else {
      merged[key] = source[key];
    }
  }
  return merged;
}

// 使用示例
const Object3 = Object.fromEntries(
  allKeys.map(key => deepMerge(Object1[key] || {}, Object2[key] || {}))
);

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