JS 合并数组( 5种方法 )

CSDN 2024-09-20 16:35:07 阅读 59

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;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. <code>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() 方法提供了更灵活的合并场景解决方案。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。