Javascript实用方法之json合并的场景分析

Javascript实用方法之json合并的场景分析

在开发中，JSON合并是一项非常常见的需求。本篇攻略将介绍典型的JSON合并场景及其解决方案。

场景分析

假设有两个JSON对象，分别为：

let object1 = {
  name: 'John',
  age: 25,
  location: {
    city: 'New York',
    country: 'USA'
  },
  interests: ['reading', 'music']
}

let object2 = {
  name: 'Andy',
  age: 30,
  location: {
    country: 'Canada'
  },
  interests: ['sport', 'travel']
}

现在需要将这两个对象合并为一个对象。使用传统的方式，如下所示：

let mergedObject = {
  name: object2.name,
  age: object2.age,
  location: {
    city: object1.location.city,
    country: object2.location.country
  },
  interests: [...object1.interests, ...object2.interests]
}

console.log(mergedObject)

但是，当JSON嵌套层数很多时，这样的处理方式将变得非常麻烦和耗时，而且容易出错。

解决方案

使用Object.assign()方法可以比较好地解决上述问题，示例代码如下：

let mergedObject = Object.assign({}, object1, object2)
console.log(mergedObject)

Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象。该方法将源对象合并到目标对象中，如果有重复的属性，后面的对象的属性值会覆盖前面的对象的属性值。

示例说明

下面用两个示例说明Object.assign()方法的使用：

示例1

假设有一个已有的JSON对象：

let object1 = {
  name: 'Mary',
  age: 28,
  skills: ['programming', 'design']
}

现在需要将其中的age属性值修改为30，可以使用Object.assign()方法进行修改，示例代码如下：

let updatedObject = Object.assign({}, object1, { age: 30 })
console.log(updatedObject)

输出结果为：

{
  name: 'Mary',
  age: 30,
  skills: ['programming', 'design']
}

示例2

现在有两个JSON数组，分别为：

let array1 = [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }]
let array2 = [{ id: 1, age: 25 }, { id: 2, age: 30 }]

需要将这两个数组按照id属性进行合并，可以使用Object.assign()方法结合reduce()方法进行操作，示例代码如下：

let mergedArray = array1.reduce((result, item) => {
  let mergedItem = Object.assign({}, item, array2.find(i => i.id === item.id))
  result.push(mergedItem)
  return result
}, [])

console.log(mergedArray)

输出结果为：

[
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Mary', age: 30 }
]

通过以上两个示例可以看出，Object.assign()方法非常灵活，并且可以方便地解决JSON合并问题。