JS合并数组的几种方法及优劣比较

在JavaScript编程中，经常需要将两个或多个数组合并成一个新数组。下面将会介绍几种常用的合并数组的方法，并对它们的优劣进行比较。

方法一：concat() 方法

concat() 方法是 JavaScript 中最基础的数组合并方法。它可以将两个或多个数组合并成一个新数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

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

concat() 方法将原数组复制到一个新数组中。因此，这种方法会占用额外的内存空间，特别是当原数组的长度很长时。但是，它有一个优点，就是不会修改原数组。如果需要保留原数组，可以使用这种方法。

方法二：扩展运算符 ...

...（扩展运算符）是 ES6 中引入的新特性，可以用来将一个数组打散成多个独立的元素。它也可以用来合并多个数组：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

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

... 方法也是将原数组复制到一个新数组中，因此会占用额外的内存空间。但是，它比 concat() 方法方便，也更直观明了。

方法三：push() 方法

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]

这种方法不会创建新的数组，所以不会占用额外的内存空间。但是，它会修改原数组，所以要注意保留原数组。

方法四：splice() 方法

splice() 方法可以用来向数组中添加或删除元素。但是，它也可以用来将多个数组合并：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

Array.prototype.splice.apply(arr1, [arr1.length, 0].concat(arr2));
console.log(arr1); // [1, 2, 3, 4, 5, 6]

这种方法可以将多个数组合并在一起，并且不会占用额外的内存空间。但是，它的语法比较复杂，不容易理解。

方法五：reduce() 方法

reduce() 方法可以用来将一个数组转换为另一个值或对象。它也可以用来将多个数组合并：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let arr3 = arr2.reduce(function(arr, val) {
    arr.push(val);
    return arr;
}, arr1);

console.log(arr3); // [1, 2, 3, 4, 5, 6]

这种方法可以将多个数组合并在一起，并且不会占用额外的内存空间。但是，它的语法较为复杂，且在性能方面可能不如其他方法。

总结

以上五种方法都可以用来合并数组，各有优劣。具体使用方法要根据实际情况来选择。

• concat() 方法是最基础的方法，容易理解和使用，但是会占用额外的内存空间，不适合合并大数组。
• ... 方法使用起来方便，可以直观明了地将多个数组合并在一起，但是也会占用额外的内存空间，不适合合并很大的数组。
• push() 方法不会占用额外的内存空间，但是会修改原数组，所以要注意保留原数组。
• splice() 方法可以将多个数组合并在一起，并且不会占用额外的内存空间，但是语法较为复杂。
• reduce() 方法可以将多个数组合并在一起，并且不会占用额外的内存空间，但是语法较为复杂，且在性能方面可能不如其他方法。

根据不同的情况，可以选择适合自己的方法来实现数组的合并。