JS中数组合并的几种常见方法

更新时间：2023年07月11日 09:38:53 作者：忧郁的蛋~

这篇文章主要给大家介绍了关于JS中数组合并的几种常见方法,在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况,文中通过实例代码介绍的非常详细,出现需要的朋友可以参考下

JS 中有多种方法可以将多个数组合并成一个数组。

1、使用 Array.prototype.concat() 合并：concat() 方法可以将多个数组合并成一个新数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let mergedArr = arr1.concat(arr2, arr3);
console.log(mergedArr);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

2、使用扩展运算符 (...) 合并：扩展运算符可以将多个数组合并成一个新数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let mergedArr = [...arr1, ...arr2, ...arr3];
console.log(mergedArr);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

3、使用 Array.prototype.push.apply() 合并：push.apply() 方法可以将多个数组合并成一个新数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let mergedArr = [].concat.apply([], [arr1, arr2, arr3]);
console.log(mergedArr);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

4、使用 Array.prototype.reduce() 合并： reduce() 函数可以用来构建新数组，将多个数组元素添加到新数组中。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let mergedArr = [arr1, arr2, arr3].reduce((acc, cur) => acc.concat(cur), []);
console.log(mergedArr);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

5、使用 Array.prototype.forEach() 合并: forEach() 方法可以遍历多个数组，将元素添加到新数组中。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let mergedArr = [];
[arr1, arr2, arr3].forEach(function(array) {
    array.forEach(function(element) {
        mergedArr.push(element);
    });
});
console.log(mergedArr);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

6、使用第三方库 lodash 的 concat() 合并

7、使用第三方库 Ramda 的 concat() 合并

总结

到此这篇关于JS中数组合并的几种常见方法的文章就介绍到这了,更多相关JS数组合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

html5 canvas 详细使用教程
本文主要对html5 canvas的使用进行了详细的介绍。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JS遍历ul下的li点击弹出li的索引的实现方法
这篇文章主要介绍了JS遍历ul下的li点击弹出li的索引的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
JS控制阿拉伯数字转为中文大写示例代码
阿拉伯数字如何转为中文大写这个实现的方法有很多，在本文将为大家介绍下js中时如何实现的，感兴趣的朋友可以参考下
2013-09-09
微信小程序实现简单计算器
这篇文章主要为大家详细介绍了微信小程序写简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
分享JS表单验证源码（带错误提示及密码等级）
这篇文章主要介绍了JS表单验证源码（带错误提示及密码等级）,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
微信小程序实现页面浮动导航
这篇文章主要为大家详细介绍了微信小程序实现页面浮动导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
微信小程序scroll-view实现横向滚动和上拉加载示例
本篇文章主要介绍了微信小程序scroll-view实现横向滚动和上拉加载示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
BootStrap中Table分页插件使用详解
bootstrap-table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化。这篇文章介绍了bootstrap中table分页插件的使用，感兴趣的朋友一起看看吧
2016-10-10
cropperjs实现裁剪图片功能
这篇文章主要为大家详细介绍了cropperjs实现裁剪图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
uni-app PC端宽屏适配方案图文详解
现在uni-app终于官方支持PC宽屏,下面这篇文章主要给大家介绍了关于uni-app PC端宽屏适配方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03