比較JS合并数组的各种方法及其优劣

Posted 2020-09-12

原文链接:  Combining JS Arrays
原文日期: 2014-09-09
翻译日期: 2014-09-18
翻译人员: 铁锚

本文属于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(..) 
无论你选择什么,都应该批判性地思考你的数组合并策略,而不是把它当作理所当然的事情.