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 相关文章推荐
uploadify 3.0 详细使用说明
Jun 18 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 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
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
Python random模块常用方法
2014/11/03 Python
Python卸载模块的方法汇总
2016/06/07 Python
用Python解决x的n次方问题
2019/02/08 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
英国女士家居服网站:hush
2017/08/09 全球购物
程序员机试试题汇总
2012/03/07 面试题
易程科技软件测试笔试
2013/03/24 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
高中综合实践活动总结
2014/07/07 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
入党介绍人意见范文
2015/06/01 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python