JavaScript实现JSON合并操作示例【递归深度合并】

JavaScript实现JSON合并操作示例【递归深度合并】

在JavaScript开发中，我们经常需要合并两个或多个JSON对象。如果不加注意，使用原生JavaScript合并JSON对象会遇到一些问题，比如仅会执行浅合并（只合并顶级属性且不支持数组合并）、忽略null和undefined属性。下面我们来介绍递归深度合并两个JSON对象的方法，解决上述问题。

递归深度合并两个JSON对象

递归深度合并有利于在合并具有深层嵌套结构的JSON对象时获得更准确的结果。

function deepMerge(target, source) {
  // 遍历源JSON对象
  for (const key of Object.keys(source)) {
    // 如果源对象当前属性是一个JSON对象，则递归地对其进行合并
    if (source[key] instanceof Object) {
      Object.assign(source[key], deepMerge(target[key], source[key]))
    }
  }
  // 合并所有属性
  return Object.assign({}, target, source)
}

// 示例1
const obj1 = { x: { y: 1 }, z: [3, 4] }
const obj2 = { x: { z: 3 }, y: 2 }
console.log(deepMerge(obj1, obj2)) // 输出 { x: { y: 1, z: 3 }, y: 2, z: [3, 4] }

// 示例2
const obj3 = { x: { y: { z: 1 } }, w: [2] }
const obj4 = { x: { y: { w: 3 } }, z: 3 }
console.log(deepMerge(obj3, obj4)) // 输出 { x: { y: { z: 1, w: 3 } }, w: [2], z: 3 }

上述代码中，我们定义了一个deepMerge()函数，它把目标JSON对象和源JSON对象作为输入参数。其中，我们首先使用Object.keys()方法遍历源JSON对象。若源对象当前属性是一个JSON对象，则递归地对其进行合并。最后调用Object.assign()方法对合并后的JSON对象进行合并。

示例说明

示例1

obj1中有x和z两个属性。x是一个子对象，包含一个y属性，而z是一个数组，包含两个元素3和4。obj2中包含x、y两个属性，x也是一个子对象，包含z属性。运行结果表明，deepMerge()方法成功地将两个JSON对象合并为一个JSON对象，并递归地合并了它们的x子对象，将y属性的值从obj2合并到了obj1，同时z属性值也正确地合并了。

示例2

obj3比obj1更深层嵌套，包含x属性作为子对象，x又包含y属性作为子对象，y包含z属性作为末级属性。同样，对于obj4，x是一个子对象，包含y属性和z属性。运行结果表明，我们成功地把这两个JSON对象递归合并了，同时正确地合并了z属性，并将y子对象合并起来，并添加了一个新属性w到y子对象。