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获取HTML静态页面参数传递值示例
Aug 18 Javascript
js函数调用的方式
May 06 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
js脚本中执行java后台代码方法解析
Oct 11 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
1.PHP简介
2006/10/09 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
中专生职业生涯规划书范文
2014/01/10 职场文书
房地产促销活动方案
2014/03/01 职场文书
请假条的格式
2014/04/11 职场文书
《悯农》教学反思
2014/04/28 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
体育个人工作总结
2015/02/09 职场文书
大连星海广场导游词
2015/02/10 职场文书
春秋淹城导游词
2015/02/11 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python