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 相关文章推荐
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
layui原生表单验证的实例
Sep 09 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
javascript 写类方式之七
2009/07/05 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
python中reader的next用法
2018/07/24 Python
Python实现FM算法解析
2019/06/18 Python
python+pygame实现坦克大战
2019/09/10 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
python中adb有什么功能
2020/06/07 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
学生会竞选自荐信
2013/10/12 职场文书
人力资源管理毕业生自荐信
2013/11/21 职场文书
趣味运动会策划方案
2014/06/02 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
自我检讨书范文
2015/01/28 职场文书