如何在JavaScript中合并两个深度嵌套的对象？

首先看你提供的两个对象：

const obj1 = {
    prop1: 'value1',
    prop2: 'value2',
    prop3: { prop4: 'value4', prop5: {
         prop5: 'value5'
         } 
    },
}
const obj2 = {
    prop6: 'value6',
    prop2: 'value2',
    prop7: { prop8: 'value8', prop9: {
         prop10: 'value10'
         } 
    },
}

要实现相同属性保持不变、不同属性合并的深度嵌套对象合并，核心规则是：保留obj1的所有属性，仅将obj2中obj1没有的属性（包括嵌套层级的）添加进去，同名属性无论值是否一致都保留obj1的版本。下面提供两种可行方案：

原生JavaScript递归实现 #

自己写递归函数可以完全控制合并逻辑，不需要依赖第三方库：

function mergeDeepKeepOriginal(target, source) {
  // 复制目标对象，避免修改原数据
  const result = { ...target };

  for (const key in source) {
    if (!source.hasOwnProperty(key)) continue;

    // 若目标对象已有该属性，且两者都是非null对象，则递归合并子对象
    if (
      result.hasOwnProperty(key) &&
      typeof result[key] === 'object' && result[key] !== null &&
      typeof source[key] === 'object' && source[key] !== null
    ) {
      result[key] = mergeDeepKeepOriginal(result[key], source[key]);
    } 
    // 目标对象没有该属性时，才添加源对象的属性
    else if (!result.hasOwnProperty(key)) {
      result[key] = source[key];
    }
    // 已有属性则直接跳过，保留原值
  }

  return result;
}

// 调用示例
const mergedObj = mergeDeepKeepOriginal(obj1, obj2);
console.log(mergedObj);

合并结果说明 #

最终得到的mergedObj结构如下：

{
  prop1: 'value1',
  prop2: 'value2', // 保留obj1的属性
  prop3: { prop4: 'value4', prop5: { prop5: 'value5' } },
  prop6: 'value6', // 新增obj2的属性
  prop7: { prop8: 'value8', prop9: { prop10: 'value10' } } // 新增obj2的嵌套对象
}

这个函数的特点：

• 不修改原有的obj1和obj2，返回全新对象
• 处理了null值的边界情况（避免把null当成对象递归）
• 嵌套层级会深度遍历合并，同样遵循保留原属性的规则

使用Lodash简化实现 #

如果你的项目已经引入了Lodash库，可以用mergeWith方法快速实现：

const _ = require('lodash');

const mergedObj = _.mergeWith({}, obj1, obj2, (objValue, srcValue) => {
  // 只要目标对象已有属性值，就返回原属性，不覆盖
  if (objValue !== undefined) {
    return objValue;
  }
});

mergeWith会自动处理深度嵌套的对象，我们只需要通过自定义回调指定“保留原对象属性”的规则即可。

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