JavaScript中如何合并两个数组？

JavaScript中合并两个数组是日常开发里的高频操作，根据需求不同可以选择多种实现方式，每种方式都有对应的适用场景和特性。

使用concat方法合并数组

concat是JavaScript数组原生的合并方法，会返回一个新数组，不会修改原数组，是最基础的数组合并方式。

// 定义两个待合并的数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 使用concat合并，返回新数组
const mergedArr = arr1.concat(arr2);
console.log(mergedArr); // 输出 [1, 2, 3, 4, 5, 6]
console.log(arr1); // 原数组不变，输出 [1, 2, 3]
console.log(arr2); // 原数组不变，输出 [4, 5, 6]

使用扩展运算符合并数组

ES6引入的扩展运算符可以快速展开数组元素，通过数组字面量创建新数组完成合并，写法更简洁。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
// 扩展运算符展开两个数组元素，组成新数组
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // 输出 ['a', 'b', 'c', 'd']
// 也可以调整合并顺序
const mergedArr2 = [...arr2, ...arr1];
console.log(mergedArr2); // 输出 ['c', 'd', 'a', 'b']

使用push方法合并数组

如果想把第二个数组的元素追加到第一个数组中，修改原数组，可以使用push方法结合扩展运算符实现。

const arr1 = [10, 20];
const arr2 = [30, 40];
// push结合扩展运算符，把arr2的元素逐个追加到arr1
arr1.push(...arr2);
console.log(arr1); // 输出 [10, 20, 30, 40]
console.log(arr2); // arr2不变，输出 [30, 40]

使用循环遍历合并数组

也可以通过循环遍历第二个数组，逐个把元素添加到第一个数组中，这种方式更灵活，可以在添加时做额外处理。

const arr1 = [1, 3, 5];
const arr2 = [2, 4, 6];
// 遍历arr2，逐个添加到arr1
for (let i = 0; i < arr2.length; i++) {
    arr1.push(arr2[i]);
}
console.log(arr1); // 输出 [1, 3, 5, 2, 4, 6]

不同合并方式的注意事项

需要注意以上合并方式都是浅拷贝，如果数组中包含对象引用，合并后的数组和原数组会共享这些对象引用，修改其中一个会影响另一个。

const obj = { name: 'test' };
const arr1 = [obj];
const arr2 = [1, 2];
const mergedArr = arr1.concat(arr2);
// 修改原数组中的对象
obj.name = 'changed';
console.log(mergedArr[0].name); // 输出 'changed'，合并后的数组也受影响

如果需要深拷贝合并，需要先对数组中的对象做深拷贝处理，再执行合并操作。另外如果合并的数组数量较多，扩展运算符和concat方法的可读性会更高，循环方式适合需要自定义合并逻辑的场景。

JavaScript数组合并concat方法扩展运算符Array_push修改时间：2026-06-07 03:08:34