JS 合并数组（ 5种方法 ）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • 一、五种合并方法
  • • 1. `concat()` 方法
    • 2. 扩展运算符 (`...`)
    • 3. `push()` 方法配合循环
    • 4. 使用 `Array.from()` 结合 `Spread` 操作符
    • 5. `reduce()` 方法
  • 二、应用总结

在JavaScript中，合并数组有多种方法，下面是这些方法的语法、注意事项及代码示例：

一、五种合并方法

1. concat() 方法

语法:

array1.concat(array2, array3, ..., value1, value2, ...)

注意事项:

• concat() 方法不会改变原始数组，而是返回一个新的数组。
• 可以接收任意数量的数组和/或单个元素作为参数。

代码示例:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let mergedArray = array1.concat(array2);

console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]
console.log(array1); // 输出: [1, 2, 3] （原数组不变）

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

语法:

let mergedArray = [...array1, ...array2, value1, value2, ...];

注意事项:

• 扩展运算符是在ES6中引入的新特性，它可以将数组或其他可迭代对象转换为用逗号分隔的列表。
• 此方法会创建一个新的数组，因此也不会改变原始数组。

代码示例:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let mergedArray = [...array1, ...array2];

console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]
console.log(array1); // 输出: [1, 2, 3] （原数组不变）

3. push() 方法配合循环

语法:

for(let item of array2) {
  array1.push(item);
}

注意事项:

• 使用 push() 方法可以将一个数组中的元素逐个添加到另一个数组中。
• 这种方法会直接修改原始数组 array1。

代码示例:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

for(let item of array2) {
  array1.push(item);
}

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

4. 使用 Array.from() 结合 Spread 操作符

语法:

let mergedArray = Array.from([...array1, ...array2]);

注意事项:

• Array.from() 方法用于将类数组对象或可迭代对象转换为一个新的数组实例。
• 当与扩展运算符结合使用时，可以方便地合并多个数组。

代码示例:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let mergedArray = Array.from([...array1, ...array2]);

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

5. reduce() 方法

语法:

array1.reduce((accumulator, currentValue) => [...accumulator, currentValue], array2);

注意事项:

• reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，结果是一个单一输出值。
• 此方法在处理多个数组合并时需要初始化值为第二个数组，然后通过累积器返回每次合并的结果。

代码示例:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let mergedArray = array1.reduce((acc, curr) => [...acc, curr], array2);

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

二、应用总结

根据需求选择合适的方法，如需不改变原数组则推荐使用 concat() 或扩展运算符；如果希望合并的同时修改原始数组，可以采用 push() 方法。另外，Array.from() 和 reduce() 方法提供了更灵活的合并场景解决方案。