javascript合并两个数组最简单的实现方法


Posted in Javascript onSeptember 14, 2019

在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况出现。

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

// 将arr1和arr2合并成为[1, 2, 3, 4, 5, 6]

这里总结一下在JavaScript中合并两个数组的方法。

for循环数组

这个方式是最简单的,也是最容易实现的。

var arr3 = [];

// 遍历arr1
for (var i = 0; i < arr1.length; i++) {
  arr3.push(arr1[i]);
}

// 遍历arr2
for (var j = 0; j < arr2.length; j++) {
  arr3.push(arr2[j]);
}

console.log(arr3); // [1,2,3,4,5,6]

另外也可以用增强型for循环或forEach()方法去实现。

for循环这种方式几乎没有任何问题,只是很多追求精简编程的人会鄙视这种方式(摊手)。

concat()方法

JavaScript的Array对象中提供了一个concat()方法,作用是连接两个或更多的数组,并返回一个新的数组。

var arr3 = arr1.concat(arr2);

console.log(arr3); // [1,2,3,4,5,6]

要注意的是,concat()方法不会改变原数组,而是返回一个新的数组。这样,当我们需要进行多次数组合并的时候,就会造成内存浪费。

apply()方法

函数的apply方法有一个特性,那就是func.apply(obj,argv),argv是一个数组。所以我们可以利用这点。

arr1.push.apply(arr1, arr2);

调用arr1.push这个函数实例的apply()方法,同时把arr1、arr2当作参数传入,这样arr1.push这个方法就会遍历arr1和arr2数组的所有元素,达到合并的效果。

简单理解就是,上面这段代码可以看做是:

arr1.push(4, 5, 6);

这种方式只用一行代码就解决了问题,可以说非常6了。

总结

上面三种方法在常规使用上其实并没有区别,只是要另外注意两个小问题:

1.以上3种合并方法在举例的时候并没有考虑过两个原数组谁的长度更小,好的做法是预先判断两个原数组哪个更大,然后使用大数组合并小数组,这样就能减少了数组元素操作的次数,提高了代码的执行效率。

2.有时候我们既不希望原数组(arr1、arr2)改变,又不想手动新增一个变量,这时就只能使用concat()方法了。

以上方法很简单,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
使用Ajax实现无刷新上传文件
Apr 12 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 #Javascript
Layui表格行工具事件与数据回填方法
Sep 13 #Javascript
layui使用表格渲染获取行数据的例子
Sep 13 #Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 #Javascript
layui表格数据复选框回显设置方法
Sep 13 #Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 #Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 #Javascript
You might like
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
二级域名转向类
2006/11/09 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python中取整的几种方法小结
2017/01/06 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
学习python可以干什么
2019/02/26 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
宿舍违规检讨书
2014/01/12 职场文书
教师旷工检讨书
2014/01/18 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python