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 14 Javascript
js获取ajax返回值代码
Apr 30 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
vue 如何使用递归组件
Oct 23 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数据流应用的简单例子
2012/06/01 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
在Python下尝试多线程编程
2015/04/28 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python中http请求方法库汇总
2016/01/06 Python
python3中int(整型)的使用教程
2017/03/23 Python
python 反向输出字符串的方法
2018/07/16 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python判断是空的实例分享
2020/07/06 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
python 6种方法实现单例模式
2020/12/15 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
监察建议书范文
2014/03/12 职场文书
大专毕业生求职信
2014/07/05 职场文书
工作收入住址证明
2014/10/28 职场文书
2014年项目工作总结
2014/11/24 职场文书