JavaScript数组合并的几种方法

一、concat()方法

1、concat()方法可以把多个数组合并成一个数组，该方法不会改变原数组，而是返回一个新数组，它将新的元素添加到了原始数组的尾部。

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  let result = arr1.concat(arr2);
  console.log(result); // [1, 2, 3, 4, 5, 6]

2、该方法还可以接受多个参数，不限数量。

  let arr1 = [1, 2, 3];
  let result = arr1.concat(4, 5, 6);
  console.log(result); // [1, 2, 3, 4, 5, 6]

二、spread operator（扩展运算符）

1、ES6引入了spread operator，...可以将数组拆解成个体元素。使用扩展运算符可以轻松地将多个数组合并为一个数组。

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  let result = [...arr1, ...arr2];
  console.log(result); // [1, 2, 3, 4, 5, 6]

2、可以在新数组前面添加其他元素。

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  let result = ['start', ...arr1, ...arr2];
  console.log(result); // ['start', 1, 2, 3, 4, 5, 6]

三、push()方法

1、push()方法可以将其他数组添加到一个数组中，该方法会改变原数组。

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  for (let i = 0; i < arr2.length; i++) {
    arr1.push(arr2[i]);
  }
  console.log(arr1); // [1, 2, 3, 4, 5, 6]

2、该方法也可以接受多个参数，不限数量。

  let arr1 = [1, 2, 3];
  arr1.push(4, 5, 6);
  console.log(arr1); // [1, 2, 3, 4, 5, 6]

四、unshift()和splice()方法

1、unshift()方法可以将其他数组添加到一个数组的开头，该方法会改变原数组。

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  for (let i = arr2.length - 1; i >= 0; i--) {
    arr1.unshift(arr2[i]);
  }
  console.log(arr1); // [4, 5, 6, 1, 2, 3]

2、splice()方法也可以将其他数组添加到一个数组中，该方法会改变原数组。需要指定要插入的位置以及要插入的元素。

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  arr1.splice(0, 0, ...arr2);
  console.log(arr1); // [4, 5, 6, 1, 2, 3]

五、reduce()方法

1、reduce()方法对数组中的所有元素执行一个指定操作，并将其结果累加到初始值上。

  let arr = [
    [0, 1],
    [2, 3],
    [4, 5]
  ];
  let result = arr.reduce((a, b) => {
    return a.concat(b);
  }, []);
  console.log(result); // [0, 1, 2, 3, 4, 5]

2、该方法的第二个参数是初始值，如果省略该参数，则默认使用第一个元素作为初始值。

  let arr = [1, 2, 3];
  let result = arr.reduce((a, b) => {
    return a + b;
  });
  console.log(result); // 6

六、总结

JavaScript数组合并的几种方法已经介绍完毕，合理选择合并方法可以提高代码效率、减少代码量、提高代码可读性。concat()方法和spread operator是最常用的方法，也是最好记忆的方法。如果想要改变原数组，可使用push()和unshift()方法，如果想要在任意位置插入元素，使用splice()方法即可。最后，reduce()方法也是不错的选择。