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 21 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
jQuery DOM操作实例
Mar 05 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php去除重复字的实现代码
2011/09/16 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
PHP反向代理类代码
2014/08/15 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python类的动态修改的实例方法
2017/03/24 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
物业经理求职自我评价
2013/09/22 职场文书
行政助理岗位职责
2013/11/10 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
大学军训通讯稿
2014/01/13 职场文书
四查四看剖析材料
2014/02/14 职场文书
促销活动总结怎么写
2014/06/25 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2015中学教学工作总结
2015/07/22 职场文书
交通安全学习心得体会
2016/01/18 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
golang使用map实现去除重复数组
2022/04/14 Golang