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 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
js切换div css注意的细节
Dec 10 Javascript
jsonp原理及使用
Oct 28 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
如何使用angularJs
May 08 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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 GD 图像处理组件的常用函数总结
2010/04/28 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
在父页面调用子页面的JS方法
2013/09/29 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python3实现生成随机密码的方法
2014/08/23 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
python字典与json转换的方法总结
2020/12/28 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
大学军训通讯稿
2014/01/13 职场文书
员工工作表扬信范文
2014/01/13 职场文书
淘宝活动策划方案
2014/02/06 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
工作表扬信范文
2015/01/17 职场文书
逃课检讨书
2015/01/26 职场文书
合作合同协议书范本
2015/01/27 职场文书
MySQL数据库 任意ip连接方法
2022/05/20 MySQL