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 1.4 中的Ajax问题
Jan 23 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
解读Vue组件注册方式
May 15 Vue.js
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
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
对公司合理化的建议书
2014/03/12 职场文书
服务质量承诺书
2014/03/27 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python