JS数组合并方法全解析

本篇文章给大家分享《JS数组拼接方法大全》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

JavaScript中实现数组拼接主要有三种方法：1. concat()方法会创建新数组，不修改原数组，适合需要保留原数组的场景；2. 扩展运算符（...）语法更简洁，可读性强，性能在少量数组拼接时表现良好，同样不修改原数组；3. push()方法结合扩展运算符可直接修改原数组，节省内存但会改变原数组，需谨慎使用；若需去重，可先拼接再通过Set去除重复元素；在指定位置插入数组可用splice()方法实现，但会修改原数组，建议先复制原数组；性能方面，concat()和扩展运算符相近，push()在大数据量时可能引发栈溢出，应根据是否修改原数组及性能需求选择合适方法。

数组拼接，说白了，就是把几个数组“粘”到一起，变成一个更大的数组。JavaScript里实现这个功能，其实方法挺多的，各有各的特点。

解决方案

JavaScript中实现数组拼接主要有三种常见方法：concat()、扩展运算符（...）和 push() 方法。选择哪种方法取决于你的具体需求，例如是否需要修改原数组，或者是否需要拼接多个数组。

1. concat() 方法

concat() 方法是最常用的数组拼接方法之一。它会创建一个新的数组，包含被连接数组的所有元素。原数组不会被修改。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const newArr = arr1.concat(arr2, arr3); // 可以拼接多个数组
console.log(newArr); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr1); // 输出: [1, 2, 3] (原数组未被修改)

concat() 的优点是简单易懂，而且不会修改原数组，避免了一些副作用。缺点是每次调用都会创建一个新的数组，如果需要频繁拼接大量数组，可能会影响性能。

2. 扩展运算符 (...)

扩展运算符是ES6引入的新特性，可以更简洁地实现数组拼接。它也能创建新的数组，不会修改原数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const newArr = [...arr1, ...arr2, ...arr3];
console.log(newArr); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr1); // 输出: [1, 2, 3] (原数组未被修改)

扩展运算符的优点是语法简洁，可读性好。与 concat() 相比，它在某些情况下可能具有更好的性能，尤其是在拼接少量数组时。

3. push() 方法

push() 方法用于向数组末尾添加一个或多个元素。如果结合 apply() 方法，可以将一个数组的元素添加到另一个数组中，实现数组拼接。注意：push() 会修改原数组。

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

arr1.push(...arr2); // 直接将arr2的元素添加到arr1
console.log(arr1); // 输出: [1, 2, 3, 4, 5, 6] (arr1被修改)
console.log(arr2); // 输出: [4, 5, 6]

或者使用 apply

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

arr1.push.apply(arr1, arr2);
console.log(arr1); // 输出: [1, 2, 3, 4, 5, 6] (arr1被修改)
console.log(arr2); // 输出: [4, 5, 6]

push() 的优点是可以避免创建新的数组，节省内存空间。缺点是会修改原数组，如果需要保留原数组，则不适用。另外，如果拼接的数组非常大，push() 可能会导致栈溢出。

数组拼接时如何处理重复元素？

处理重复元素，方法就比较多了。可以考虑用 Set 来去重，因为 Set 里面的元素都是唯一的。

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

const combinedArr = [...arr1, ...arr2]; // 先拼接
const uniqueArr = [...new Set(combinedArr)]; // 再去重

console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5, 6]

或者，如果数组元素是对象，你需要自定义比较函数来判断对象是否重复。

如何在数组的指定位置插入另一个数组？

在指定位置插入数组，稍微麻烦一点。可以结合 splice() 方法来实现。splice() 方法可以在数组中添加/删除元素，并返回被删除的元素。

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [10, 20, 30];
const insertIndex = 2; // 在索引为2的位置插入

arr1.splice(insertIndex, 0, ...arr2); // 第一个参数是插入位置，第二个参数是要删除的元素个数（这里是0，表示不删除），后面的参数是要插入的元素

console.log(arr1); // 输出: [1, 2, 10, 20, 30, 3, 4, 5]

splice() 方法会直接修改原数组，所以在使用之前，最好先复制一份原数组，以免造成意外的修改。

数组拼接的性能考量：哪种方法更快？

性能方面，concat() 和扩展运算符在大多数情况下性能相近，但当需要拼接大量数组时，扩展运算符可能略胜一筹。push() 方法虽然避免了创建新数组，但在拼接大型数组时，可能会因为参数过多而导致栈溢出。

总的来说，选择哪种方法取决于你的具体需求。如果需要保持原数组不变，concat() 和扩展运算符是更好的选择。如果对性能要求较高，可以根据实际情况进行测试，选择最适合的方法。

好了，本文到此结束，带大家了解了《JS数组合并方法全解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！