如何用原生JavaScript合并两个对象，使后者覆盖前者（含深层属性）

要实现第二个JSON对象覆盖第一个的对应属性，同时保留未被覆盖的深层属性，JavaScript原生没有直接提供内置方法，但可以通过递归函数实现，以下是具体方案：

示例输入 #

const json1 = {
  "color": "#101017",
  "fontSize": "15px",
  "h1": {
    "color": "#101017",
    "fontSize": "32px"
  }
}

const json2 = {
  "h1": {
    "color": "blue"
  }
}

期望输出 #

const mergedJson = {
  "color": "#101017",
  "fontSize": "15px",
  "h1": {
    "color": "blue",
    "fontSize": "32px"
  }
}

原生实现方案 #

写一个递归的深层合并函数，遍历对象属性：遇到嵌套对象时继续递归合并，非对象属性直接覆盖：

function deepMerge(target, source) {
  // 遍历源对象的所有可枚举属性
  for (const key in source) {
    // 仅当双方都是纯对象（非数组、非null）时，递归合并深层属性
    if (typeof source[key] === 'object' && source[key] !== null 
        && typeof target[key] === 'object' && target[key] !== null
        && !Array.isArray(source[key]) && !Array.isArray(target[key])) {
      deepMerge(target[key], source[key]);
    } else {
      // 非对象属性直接覆盖
      target[key] = source[key];
    }
  }
  return target;
}

// 使用时先复制原对象，避免修改原始的json1
const mergedJson = deepMerge({...json1}, json2);
console.log(mergedJson);

说明 #

• 用{...json1}复制原对象作为合并目标，防止修改原始数据。
• 函数会递归处理嵌套对象，确保深层未被覆盖的属性得以保留。
• 如果需要支持数组合并，可以调整判断逻辑（比如数组直接替换或合并元素，根据需求修改）。

内容的提问来源于stack exchange，提问作者Arbind Kumar Prasad