js如何实现数组拼接

JavaScript中实现数组拼接主要有三种方法：concat()、扩展运算符（...）和push()，此外还可通过splice()在指定位置插入数组，处理重复元素可结合Set实现。以下是具体说明：

• concat()方法

  特点：创建新数组，不修改原数组，适合需要保留原数组的场景。

  示例：const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const newArr = arr1.concat(arr2); // 拼接多个数组：arr1.concat(arr2, arr3)console.log(newArr); // [1, 2, 3, 4, 5, 6]console.log(arr1); // [1, 2, 3]（原数组未修改）

  优缺点：简单易懂，但频繁拼接大量数组时可能影响性能。

• 扩展运算符（...）

  特点：ES6特性，语法简洁，可读性强，同样不修改原数组，少量数组拼接时性能良好。

  示例：const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const newArr = [...arr1, ...arr2]; // 拼接多个数组：[...arr1, ...arr2, ...arr3]console.log(newArr); // [1, 2, 3, 4, 5, 6]console.log(arr1); // [1, 2, 3]（原数组未修改）

  优缺点：与concat()相比，语法更灵活，但大数据量时性能差异需实际测试。

• push()方法结合扩展运算符

  特点：直接修改原数组，节省内存，但需谨慎使用以避免副作用。

  示例：const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];arr1.push(...arr2); // 直接修改arr1console.log(arr1); // [1, 2, 3, 4, 5, 6]console.log(arr2); // [4, 5, 6]（原数组未修改）

  替代方案（apply）：arr1.push.apply(arr1, arr2); // 效果同上，但大数据量可能引发栈溢出

  优缺点：避免创建新数组，但大数据量时可能栈溢出，且会改变原数组。

• 处理重复元素

  方法：先拼接数组，再通过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]

  对象去重：需自定义比较函数或使用Map/对象键值判断。

• 在指定位置插入数组

  方法：使用splice()，但会修改原数组，建议先复制原数组。

  示例：const arr1 = [1, 2, 3, 4, 5];const arr2 = [10, 20, 30];const insertIndex = 2;arr1.splice(insertIndex, 0, ...arr2); // 参数：插入位置、删除元素数（0）、插入元素console.log(arr1); // [1, 2, 10, 20, 30, 3, 4, 5]

• 性能考量

  concat() vs 扩展运算符：性能相近，扩展运算符在少量数组拼接时可能更优。

  push()：大数据量时可能栈溢出，但内存占用低。

  选择建议：

  需保留原数组：优先用concat()或扩展运算符。

  追求性能：少量数组用扩展运算符，大数据量需实际测试。

  内存敏感场景：可考虑push()，但需评估栈溢出风险。