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 相关文章推荐
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
jquery easyui使用心得
Jul 07 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
JavaScript监听触摸事件代码实例
Dec 30 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 print类函数使用总结
2010/06/25 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
js仿360开机效果
2019/12/26 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
python绘图模块matplotlib示例详解
2019/07/26 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
厨师岗位职责
2013/11/12 职场文书
社区活动邀请函范文
2014/01/29 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
会计毕业生自荐书
2014/06/12 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
追讨欠款律师函
2015/05/27 职场文书
身份证丢失证明
2015/06/19 职场文书
业务员管理制度范本
2015/08/06 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python