js如何拼接json数组

Hey小伙伴们，今天来聊聊一个超级实用的小技巧——如何在JavaScript中拼接JSON数组，是不是听起来就觉得很有技术含量呢？别急，我会用最简单易懂的方式来解释，保证你看完也能轻松上手！

我们得知道什么是JSON数组，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于文本，易于人阅读和编写，同时也易于机器解析和生成，JSON数组就是包含多个JSON对象的集合，这些对象可以是任何类型的数据，比如字符串、数字、布尔值或者是另一个JSON对象。

为什么要拼接JSON数组呢？在实际开发中，我们经常需要从不同的数据源获取数据，然后将这些数据合并到一个数组中，这样就可以更方便地进行后续的处理和展示。

就让我们一起来看看如何在JavaScript中拼接JSON数组吧！

基本的数组拼接

假设我们有两个JSON数组，我们可以直接使用数组的concat()方法来拼接它们，这个方法会创建一个新的数组，包含两个数组的所有元素。

let jsonArray1 = [{name: "Alice", age: 25}, {name: "Bob", age: 30}];
let jsonArray2 = [{name: "Charlie", age: 35}, {name: "David", age: 40}];
let combinedArray = jsonArray1.concat(jsonArray2);
console.log(combinedArray);

使用`push()`方法

如果你想要将一个数组中的所有元素添加到另一个数组的末尾，可以使用push()方法，这个方法会直接修改原数组，而不是创建一个新的数组。

let jsonArray1 = [{name: "Alice", age: 25}, {name: "Bob", age: 30}];
let jsonArray2 = [{name: "Charlie", age: 35}, {name: "David", age: 40}];
jsonArray1.push(...jsonArray2);
console.log(jsonArray1);

使用展开运算符

在ES6中，我们可以使用展开运算符...来合并数组，这种方法同样会创建一个新的数组，不会修改原数组。

let jsonArray1 = [{name: "Alice", age: 25}, {name: "Bob", age: 30}];
let jsonArray2 = [{name: "Charlie", age: 35}, {name: "David", age: 40}];
let combinedArray = [...jsonArray1, ...jsonArray2];
console.log(combinedArray);

处理异步数据

在现代Web开发中，我们经常需要处理来自API的异步数据，这时候，我们可以使用Promise.all()来处理多个异步请求，并将结果合并为一个数组。

fetch('api/endpoint1')
  .then(response => response.json())
  .then(jsonArray1 => {
    fetch('api/endpoint2')
      .then(response => response.json())
      .then(jsonArray2 => {
        let combinedArray = [...jsonArray1, ...jsonArray2];
        console.log(combinedArray);
      });
  });

合并具有相同属性的JSON对象

我们需要合并两个数组中的JSON对象，这些对象可能具有相同的属性，这时候，我们可以使用reduce()方法来合并这些属性。

let jsonArray1 = [{id: 1, name: "Alice"}, {id: 2, name: "Bob"}];
let jsonArray2 = [{id: 1, age: 25}, {id: 2, age: 30}];
let combinedArray = jsonArray1.reduce((acc, obj) => {
  let index = acc.findIndex(item => item.id === obj.id);
  if (index > -1) {
    acc[index] = {...acc[index], ...obj};
  } else {
    acc.push(obj);
  }
  return acc;
}, []);
console.log(combinedArray);