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 对象比较实现代码
Apr 27 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
vue数字类型过滤器的示例代码
Sep 07 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 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
How do I change MySQL timezone?
2008/03/26 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
ArrayList类(增强版)
2007/04/04 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Python中为什么要用self探讨
2015/04/14 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
Java语言的优势
2015/01/10 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
青年教师培训方案
2014/02/06 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
归元寺导游词
2015/02/06 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
地道战观后感2000字
2015/06/04 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
公司考勤管理制度
2015/08/04 职场文书