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的AutoComplete插件
May 04 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
JS实现鼠标移动拖尾
Dec 27 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分页函数代码(简单实用型)
2010/12/02 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
python实现俄罗斯方块游戏
2020/03/25 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
Python如何定义一个函数
2015/09/01 面试题
幼儿教师工作感言
2014/02/14 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
Python中的socket网络模块介绍
2022/07/23 Python