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 相关文章推荐
清除div下面的所有标签的方法
Feb 17 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
js URL参数的拼接方法比较
2012/02/15 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
Python检测网络延迟的代码
2018/05/15 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
优秀的自荐信要注意哪些
2014/01/03 职场文书
小学数学国培感言
2014/03/10 职场文书
意向书范文
2014/03/31 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
青岛海底世界导游词
2015/02/11 职场文书
护理心得体会范文
2016/01/22 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
MySQL读取JSON转换的方式
2022/03/18 MySQL