JS合并数组的几种方法及优劣比较


Posted in Javascript onSeptember 19, 2014

本文属于JavaScript的基础技能. 我们将学习结合/合并两个JS数组的各种常用方法,并比较各种方法的优缺点.

我们先来看看具体的场景:

var q = [ 5, 5, 1, 9, 9, 6, 4, 5, 8];

var b = [ "tie", "mao", "csdn", "ren", "fu", "fei" ];

很明显,数组 q 和 b 简单拼接的结果是:

[

    5, 5, 1, 9, 9, 6, 4, 5, 8, 

    "tie", "mao", "csdn", "ren", "fu", "fei"

]

concat(..)方法

最常见的用法如下:

var c = q.concat( b );
q; // [5,5,1,9,9,6,4,5,8]

b; // ["tie","mao","csdn","ren","fu","fei"];
c; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

如您所见, c 是一个全新的数组, 表示 q 和 b 这两个数组的组合, 但是 q 和 b 现在没用了是吧?

如果 q 数组有10000个元素, b 数组也有有10000个元素? 那么数组c现在就有20000个元素, 这种方式占用了2倍的内存.

“这没问题!”,你可能会觉得. 只要将 q 和 b 置空就行, 然后就会被垃圾回收,对吗?问题解决了!

q = b = null; // `q` and `b` 现在可以被垃圾回收了

额? 如果数组都很小,那自然没问题. 但对大型的数组,或需要多次重复处理时, 内存就被限制了, 它还需要进行优化.

循环插入

OK, 让我们把一个数组的内容加入到另一个中试试,使用 Array#push() 方法:

// 将数组 `b` 插入 `q`

for (var i=0; i < b.length; i++) {

    q.push( b[i] );

}
q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
b = null;

现在, q中存放了两个原始数组的内容(q + b).

看样子对内存优化做的不错.

但如果 q 数组很小而 b 又很大呢? 出于内存和速度的考虑,这时想把较小的 q 插入到 b 前面. 没问题,只要用 unshift() 方法代替 push() 即可, 对应的也要从大到小进行循环遍历:

// `q` into `b`:

for (var i=q.length-1; i >= 0; i--) {

    b.unshift( q[i] );

}
b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
q = null;

实用技巧

悲催的是,for循环很土并且难以维护. 我们能做得更好吗?
我们先试试 Array#reduce :

// `b` onto `q`:

q = b.reduce( function(coll,item){

    coll.push( item );

    return coll;

}, q );
q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
// or `q` into `b`:

b = q.reduceRight( function(coll,item){

    coll.unshift( item );

    return coll;

}, b );
b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

Array#reduce() 和 Array#reduceRight() 很高大上,但有点笨重,而且一般人也记不住.  JS规范6 中的 => 箭头函数(arrow-functions) 能让代码量大大减少, 但需要对每个数组元素执行函数调用, 也是很渣的手段.
那么下面的代码怎么样呢?

// `b` onto `q`:

q.push.apply( q, b );
q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
// or `q` into `b`:

b.unshift.apply( b, q );
b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

BIG更高了,是吧!? 特别是 unshift() 方法不需要像前面那样考虑相反的顺序. ES6 的展开运算符(spread operator, 加 ... 前缀)就更高端了: a.push( ...b ) 或者 b.unshift( ...a )

但是,事实上这种方法还是太乐观了. 在这两种情况下,不管是将 a 或 b 传递给 apply() 作为第二个参数(apply方式调用Function时第一个参数在内部变成this,即context,上下文,作用域), 还是使用 ... 展开运算符的方式, 实际上数组都会被打散成为函数的 arguments .
第一个主要的问题是,占用了双倍的内存(当然,是临时的!),因为需要将数组复制到函数栈之中. 此外,不同的JS引擎有不同的实现算法,可能会限制了函数可以传递的参数数量.

如果数组添加了一百万个元素, 那一定会超过函数栈所允许的大小, 不管是push() 或 unshift()调用. 这种方式只在几千个元素时可用,所以必须限制其不能超过一定范围.

注意: 你也可以试试 splice(), 肯定会发现他和 push(..)/unshift(..) 都是一样的限制.

一种选择是继续使用这种方法,但是采用分批次处理:

function combineInto(q,b) {

    var len = q.length;

    for (var i=0; i < len; i=i+5000) {

        // 一次处理5000条

        b.unshift.apply( b, q.slice( i, i+5000 ) );

    }

}

等等,我们损害了代码的可读性(甚至是性能!). 在我们放弃之前结束这个旅程吧.

总结

Array#concat() 是久经考验的方法, 用于组合两个(或多个)数组. 但他创建了一个新的数组,而不是修改现有的一个.

有很多变通的手法,但他们都有不同的优缺点,需要根据实际情况来选择.

上面列出了各种 优点/缺点,也许最好的(包括没有列出的)方法是 reduce(..) 和 reduceRight(..)

无论你选择什么,都应该批判性地思考你的数组合并策略,而不是把它当作理所当然的事情.

Javascript 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 #Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 #Javascript
JS应用正则表达式转换大小写示例
Sep 18 #Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 #Javascript
js实现按Ctrl+Enter发送效果
Sep 18 #Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 #Javascript
输入框过滤非数字的js代码
Sep 18 #Javascript
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Python制作动态字符图的实例
2019/01/27 Python
python读写csv文件的方法
2019/08/13 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
安全承诺书范文
2014/03/26 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
团队队名口号大全
2014/06/06 职场文书
个人总结与自我评价
2014/09/18 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
保送生自荐信
2015/03/06 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
成人成长感言如何写?
2019/08/16 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
关于Redis的主从复制及哨兵问题
2022/06/16 Redis