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 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
JS制作简单的三级联动
Mar 18 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
商场消防管理制度
2014/01/12 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
公司安全管理制度范本
2015/08/05 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js