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 解析后的xml对象的读取方法细解
Jul 25 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
浅谈JS运算符&&和|| 及其优先级
Aug 10 Javascript
js评分组件使用详解
Jun 06 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
Vue常用指令详解分析
Aug 19 Javascript
Vue根据条件添加click事件的方式
Nov 09 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 301转向实现代码
2008/09/18 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
python strip()函数 介绍
2013/05/24 Python
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
Python中单例模式总结
2018/02/20 Python
python如何从文件读取数据及解析
2019/09/19 Python
python实现局域网内实时通信代码
2019/12/22 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
python给list排序的简单方法
2020/12/10 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
大学生毕业鉴定
2014/01/31 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
倡议书格式
2014/04/14 职场文书
会计出纳岗位职责
2015/03/31 职场文书