还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
一、五种合并方法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() 方法提供了更灵活的合并场景解决方案。