如何用JavaScript从另一JSON对象更新目标JSON对象（保留原有内容）

编辑说明：已更新JSON配置，在与"appArr"同级的位置添加了额外的键值对

我希望用另一个JSON对象的子集更新目标JSON对象中的匹配键，同时保留目标对象的所有子键。

全局JSON配置 #

var config_global = {
  "sub-heading": "This is the sub-heading",
  "content": {
    "par1": "asdf",
    "par2": "qwerty",
    "par3": "12345"
  },
  "appArr": {
    "app1": {
      "id": "ID_001",
      "name": "Application 1",
      "url": "https://app1.html",
      "is_visible": true,
      "in_list": true
    },
    "app2": {
      "id": "ID_002",
      "name": "Application 2",
      "url": "https://app2.html",
      "is_visible": true,
      "in_list": true
    },
    "app3": {
      "id": "ID_003",
      "name": "Application 3",
      "url": "https://app3.html",
      "is_visible": true,
      "in_list": true
    }
  }
}

用于更新的局部JSON配置 #

var config_local = {
  "content": {
    "par1": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure aperiam inventore nemo, asperiores dolorem nisi voluptate omnis quam sit doloremque expedita architecto dicta, at consequatur."
  },
  "appArr": {
    "app1": {
      "is_visible": false,
      "in_list": true
    },
    "app2": {
      "is_visible": false,
      "in_list": false
    },
    "app3": {
      "is_visible": true,
      "in_list": false
    }
  }
}

最终配置需要保留config_global的完整结构，仅应用config_local中的更新内容。尝试过Object.assign()方法，但它会直接替换整个子对象，而非更新其中的单个键值对。

解决方案：递归深度合并函数 #

写一个递归函数实现深度合并，遍历每个键，遇到嵌套对象时继续递归合并，而非直接替换：

function deepMerge(target, source) {
  for (const key in source) {
    if (source[key] instanceof Object && target[key] instanceof Object) {
      deepMerge(target[key], source[key]);
    } else {
      target[key] = source[key];
    }
  }
  return target;
}

// 使用时先深拷贝全局配置，避免修改原对象
var config = deepMerge(JSON.parse(JSON.stringify(config_global)), config_local);

期望的最终配置 #

var config = {
  "sub-heading": "This is the sub-heading",
  "content": {
    "par1": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure aperiam inventore nemo, asperiores dolorem nisi voluptate omnis quam sit doloremque expedita architecto dicta, at consequatur.",
    "par2": "qwerty",
    "par3": "12345"
  },
  "appArr": {
    "app1": {
      "id": "ID_001",
      "name": "Application 1",
      "url": "https://app1.html",
      "is_visible": false,
      "in_list": true
    },
    "app2": {
      "id": "ID_002",
      "name": "Application 2",
      "url": "https://app2.html",
      "is_visible": false,
      "in_list": false
    },
    "app3": {
      "id": "ID_003",
      "name": "Application 3",
      "url": "https://app3.html",
      "is_visible": true,
      "in_list": false
    }
  }
}

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