JavaScript扩展运算符合并对象问题：如何实现深层合并覆盖？

现有两个嵌套对象：

obj1 #

{
   myObj: {
      key1: "value1",
      key2: "value2"
   }
}

obj2 #

{
   myObj: {
      key2: "new_value2",
      key3: "value3"
   }
}

尝试用扩展运算符合并：

let combined = {...obj1, ...obj2};

预期结果：

{
   myObj: {
      key1: "value1",
      key2: "new_value2",
      key3: "value3"
   }
}

实际结果：obj1的myObj被完全覆盖

{
   myObj: {
      key2: "new_value2",
      key3: "value3"
   }
}

1. 手动嵌套解构合并 #

要是嵌套层级固定、层数不多，直接针对嵌套的子对象单独合并就行：

let combined = {
  ...obj1,
  myObj: {
    ...obj1.myObj,
    ...obj2.myObj
  }
};

这种方式直观，适合简单场景，能精准控制每一层的合并逻辑。

2. 递归合并函数 #

如果对象嵌套层级不固定，或者需要通用的合并工具，可以写个递归函数处理：

function mergeNestedObjects(target, source) {
  const result = {...target};
  for (const key in source) {
    // 遇到嵌套对象就递归合并，普通值直接覆盖
    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
      result[key] = mergeNestedObjects(result[key] || {}, source[key]);
    } else {
      result[key] = source[key];
    }
  }
  return result;
}

const combined = mergeNestedObjects(obj1, obj2);

这个函数会遍历每一层，遇到嵌套对象就继续合并，不会直接覆盖整个子对象，同时能保证原对象不被修改。

3. ES2024原生Object.merge（注意兼容性） #

ES2024新增了Object.merge，原生支持深层合并，用法很简单：

const combined = Object.merge({}, obj1, obj2);

不过要注意，这个方法目前属于较新特性，部分旧环境可能不支持，使用前先确认目标环境的兼容性。

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