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 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
基于JavaScript实现瀑布流布局
Aug 15 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
我的论坛源代码(八)
2006/10/09 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
python创建临时文件夹的方法
2015/07/06 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
物流仓管员工作职责
2014/01/06 职场文书
简历中的自我评价范文
2014/02/05 职场文书
新品发布会策划方案
2014/06/08 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2014年服务员工作总结
2014/11/18 职场文书