JS合并两个数组的3种方法详解


Posted in Javascript onOctober 24, 2019

这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

需要将两个数组合并成为一个的情况。比如:

var a = [1,2,3];
var b = [4,5,6];

有两个数组a、b,需求是将两个数组合并成一个。方法如下:

1、concat

js的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果。

var c = a.concat(b); //c=[1,2,3,4,5,6];

这里有一个问题,concat方法连接a、b两个数组后,a、b两个数组的数据不变,同时会返回一个新的数组。这样当我们需要进行多次的数组合并时,会造成很大的内存浪费,如果是数据量比较小的时候,还可以勉强用,如果数据量大的时候,这个就不妥了,所以这个方法肯定不是最好的。

2、for循环

大概的思路是:遍历其中一个数组,把该数组中的所有元素依次添加到另外一个数组中。直接上代码:

for( var i in b)
{
  a.push(b[i]);
}

这样的写法可以解决第一种方案中对内存的浪费,但是会有另一个问题:丑!这么说不是没有道理,如果能只用一行代码就搞定,岂不快哉~

3、apply

函数的apply方法有一个特性,那就是func.apply(obj,argv),argv是一个数组。所以我们可以利用这点,直上代码:
a.push.apply(a,b);

调用a.push这个函数实例的apply方法,同时把,b当作参数传入,这样a.push这个方法就会遍历b数组的所有元素,达到合并的效果。

这里可能有点绕,我们可以把b看成[4,5,6],变成这样:

a.push.apply(a,[4,5,6]);

然后上面的操作就等同于:

a.push(4,5,6);

这样就很清楚了!

另外,还要注意两个小问题:

1)以上3种合并方法并没有考虑过a、b两个数组谁的长度更小。

所以好的做法是预先判断a、b两个数组哪个更大,然后使用大数组合并小数组,这样就减少了数组元素操作的次数!

2)有时候我们不希望原数组(a、b)改变,这时就只能使用concat了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
js实现简单掷骰子小游戏
Oct 24 #Javascript
js实现GIF图片的分解和合成
Oct 24 #Javascript
js实现掷骰子小游戏
Oct 24 #Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 #Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 #Javascript
js实现简单掷骰子效果
Oct 24 #Javascript
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
You might like
php批量删除数据
2007/01/18 PHP
php递归json类实例
2014/12/02 PHP
php自动加载方式集合
2016/04/04 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
JSON取值前判断
2014/12/23 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
python中的全局变量用法分析
2015/06/09 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
五种Python转义表示法
2020/11/27 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
管理学专业个人求职信范文
2013/12/13 职场文书
小学毕业家长寄语
2014/01/19 职场文书
工作迟到检讨书
2014/02/21 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
赔偿协议书范本
2014/09/12 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
计划生育个人总结
2015/03/02 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
Redis实现一个账号只能登录一个设备
2022/04/19 Redis
解决Oracle数据库用户密码过期
2022/05/11 Oracle