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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
KnockoutJs快速入门教程
May 16 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
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
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
PHP生成压缩文件实例
2015/02/07 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
JS实现轮播图效果
2020/01/11 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
python实现计算器简易版
2020/12/17 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
大学活动邀请函
2014/01/28 职场文书
篝火晚会策划方案
2014/05/16 职场文书
2015年企业新年寄语
2014/12/08 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
通知范文怎么写
2015/04/16 职场文书