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 相关文章推荐
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
基于vue实现图片验证码倒计时60s功能
Dec 10 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获取服务器端信息的方法
2014/11/28 PHP
php实现倒计时效果
2015/12/19 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python的print用法示例
2014/02/11 Python
Python常用小技巧总结
2015/06/01 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Django如何实现上传图片功能
2019/08/16 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
构建高效的python requests长连接池详解
2020/05/02 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
英文自荐信
2013/12/19 职场文书
党校培训思想汇报
2014/01/03 职场文书
教师职称自我鉴定
2014/02/12 职场文书
市场调查策划方案
2014/06/10 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
教师节获奖感言
2015/07/31 职场文书