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.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
js中有关IE版本检测
Jan 04 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 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
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
python人人网登录应用实例
2014/09/26 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Django实现文件上传和下载功能
2019/10/06 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
实习医生自我评价
2013/09/22 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python