js如何实现数组拼接-js教程-PHP中文网

js如何实现数组拼接

月夜之吻

发布： 2025-08-12 13:44:01

原创

909人浏览过

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

js如何实现数组拼接

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

解决方案

JavaScript中实现数组拼接主要有三种常见方法：

concat()

登录后复制

、扩展运算符（

...

登录后复制

）和

push()

登录后复制

方法。选择哪种方法取决于你的具体需求，例如是否需要修改原数组，或者是否需要拼接多个数组。

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()

登录后复制

相比，它在某些情况下可能具有更好的性能，尤其是在拼接少量数组时。

push()

登录后复制

方法

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

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]

登录后复制