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 入门基础学习
Mar 10 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
js断点调试经验分享
Dec 08 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
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
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
javascript数组详解
2014/10/22 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
深入理解python try异常处理机制
2016/06/01 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python join方法使用详解
2019/07/30 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Django日志及中间件模块应用案例
2020/09/10 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
优秀员工自荐信范文
2013/10/05 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
单位单身证明范本
2014/01/11 职场文书
党员大会主持词
2014/04/02 职场文书
学校运动会感想
2015/08/10 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
python Polars库的使用简介
2021/04/21 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫