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 相关文章推荐
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 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中的密码加密的解决方案总结
2016/10/26 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
js实现放大镜特效
2017/05/18 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
django foreignkey(外键)的实现
2019/07/29 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python验证码图片处理(二值化)
2019/11/01 Python
python实现交并比IOU教程
2020/04/16 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2015年市场部工作总结
2015/04/30 职场文书
2016高考寄语集锦
2015/12/04 职场文书