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 相关文章推荐
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 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连接mssql数据库的几种方法
2013/02/21 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
javaScript基础详解
2017/01/19 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python3.6数独问题的解决
2019/01/21 Python
python安装pil库方法及代码
2019/06/25 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
就业自我评价
2014/02/04 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
检讨书大全
2015/01/27 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP