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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
通过原生vue添加滚动加载更多功能
Nov 21 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
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
js实现数组转换成json
2015/06/26 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python文件处理
2016/02/29 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
详解numpy的argmax的具体使用
2019/05/27 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
消防安全汇报材料
2014/02/08 职场文书
小学家长评语大全
2014/04/16 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
家庭经济困难证明
2015/06/23 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
KVM基础命令详解
2022/04/30 Servers