如何合并两个json数组

如何合并两个JSON数组：实用方法与代码示例

在处理JSON数据时，经常需要将两个或多个JSON数组合并成一个，无论是前端开发还是后端数据处理，合并JSON数组的方法都非常实用，本文将介绍几种常见的合并JSON数组的方法,并提供详细的代码示例。

使用concat()方法

最简单直接的方法是使用JavaScript的concat()方法，它可以将两个或多个数组合并成一个新数组,而不会改变原始数组。

const jsonArray1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const jsonArray2 = [{id: 3, name: 'Charlie'}, {id: 4, name: 'David'}];
const mergedArray = jsonArray1.concat(jsonArray2);
console.log(mergedArray);
// 输出: 
// [
//   {id: 1, name: 'Alice'},
//   {id: 2, name: 'Bob'},
//   {id: 3, name: 'Charlie'},
//   {id: 4, name: 'David'}
// ]

使用扩展运算符(...)

ES6引入的扩展运算符提供了一种更简洁的合并数组的方式：

const jsonArray1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const jsonArray2 = [{id: 3, name: 'Charlie'}, {id: 4, name: 'David'}];
const mergedArray = [...jsonArray1, ...jsonArray2];
console.log(mergedArray);
// 输出与方法一相同

使用push()方法（修改原数组）

如果你不需要保留原始数组,可以直接修改其中一个数组：

const jsonArray1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const jsonArray2 = [{id: 3, name: 'Charlie'}, {id: 4, name: 'David'}];
jsonArray1.push(...jsonArray2);
console.log(jsonArray1);
// 输出与方法一相同，但jsonArray1已被修改

处理重复数据的合并

有时合并的JSON数组可能包含重复数据，你可能需要去重，可以使用filter()和findIndex()：

const jsonArray1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const jsonArray2 = [{id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]; // 注意有重复的id: 2
const mergedArray = jsonArray1.concat(jsonArray2);
const uniqueArray = mergedArray.filter((item, index, self) => 
  index === self.findIndex(t => t.id === item.id)
);
console.log(uniqueArray);
// 输出: 
// [
//   {id: 1, name: 'Alice'},
//   {id: 2, name: 'Bob'},
//   {id: 3, name: 'Charlie'}
// ]

深度合并（合并嵌套对象）

如果JSON数组中的对象包含嵌套对象,你可能需要更复杂的合并逻辑：

const jsonArray1 = [
  {id: 1, name: 'Alice', details: {age: 25, city: 'New York'}},
  {id: 2, name: 'Bob', details: {age: 30, city: 'London'}}
];
const jsonArray2 = [
  {id: 1, name: 'Alice', details: {age: 26, country: 'USA'}}, // 相同id，不同属性
  {id: 3, name: 'Charlie', details: {age: 35, city: 'Paris'}}
];
const mergedArray = jsonArray1.map(item1 => {
  const item2 = jsonArray2.find(item => item.id === item1.id);
  return item2 ? {...item1, ...item2, details: {...item1.details, ...item2.details}} : item1;
}).concat(jsonArray2.filter(item => !jsonArray1.some(item1 => item1.id === item.id)));
console.log(mergedArray);
// 输出: 
// [
//   {
//     id: 1,
//     name: 'Alice',
//     details: {age: 26, city: 'New York', country: 'USA'}
//   },
//   {id: 2, name: 'Bob', details: {age: 30, city: 'London'}},
//   {id: 3, name: 'Charlie', details: {age: 35, city: 'Paris'}}
// ]

使用第三方库

对于复杂的合并需求,可以考虑使用第三方库如Lodash：

const _ = require('lodash');
const jsonArray1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const jsonArray2 = [{id: 3, name: 'Charlie'}, {id: 4, name: 'David'}];
const mergedArray = _.concat(jsonArray1, jsonArray2);
console.log(mergedArray);
// 或者使用_.unionWith进行自定义合并
const jsonArray3 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const jsonArray4 = [{id: 2, name: 'Robert'}, {id: 3, name: 'Charlie'}];
const mergedWithCustom = _.unionWith(jsonArray3, jsonArray4, (a, b) => a.id === b.id);
console.log(mergedWithCustom);