JS 合并数组（ 5种方法 ）

大家好，欢迎来到IT知识分享网。

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

在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() 方法提供了更灵活的合并场景解决方案。