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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
Vue中 axios delete请求参数操作
Aug 25 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
Python生成随机MAC地址
2015/03/10 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
什么是方法的重载
2013/06/24 面试题
就业自荐书
2013/12/05 职场文书
护士个人自我鉴定
2014/03/24 职场文书
高中学生期末评语
2014/04/25 职场文书
家装业务员岗位职责
2015/04/03 职场文书
2015年幼师工作总结
2015/04/28 职场文书
民事诉讼代理词
2015/05/25 职场文书
党员干部学习心得体会
2016/01/23 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Python函数中apply、map、applymap的区别
2021/11/27 Python