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 相关文章推荐
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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脚本中include文件出错解决方法
2008/11/20 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python学习资料
2007/02/08 Python
Python使用剪切板的方法
2017/06/06 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
求职简历自荐信范文
2013/10/21 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
人才市场接收函
2015/01/30 职场文书
公司财务部岗位职责
2015/04/14 职场文书
污染环境建议书
2015/09/14 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python