翻譯 | JavaScript 小技巧之陣列合並

原文連結：https://davidwalsh.name/combining-js-arrays

這是一篇介紹 JavaScript 技術的小短文。我們將會講到組合/合併兩個陣列的不同策略，以及每一種方法的優缺點。

首先展示一下應用場景：

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ];

很顯然，拼接後的結果是這個樣子滴：

[
   1, 2, 3, 4, 5, 6, 7, 8, 9,
   "foo", "bar", "baz", "bam" "bun", "fun"
]

concat(..)

最常見的做法如下：

var c = a.concat( b );

a; // [1,2,3,4,5,6,7,8,9]
b; // ["foo","bar","baz","bam","bun","fun"]

c; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

從上述程式碼可以看出，c 是一個由 a 和 b 兩個陣列合並而成的全新的陣列，而 a 和 b 則不受影響。相當簡單，對吧？

假如 a 和 b 分別包含 10,000 元素呢？那麼 c 中就會包含 20,000 個元素，佔用的記憶體基本上讓 a 和 b 佔用的記憶體翻倍。

“這沒什麼大不了的！”你微微一笑。我們可以把 a 和 b 刪除嘛，這樣就可以將佔據的記憶體回收了，這樣總可以吧？危機解除！

a = b = null; // `a` and `b` can go away now

哦。對於一些小陣列來說，這樣做當然沒有問題。但是對於大陣列來說，或者經常性地執行這樣的操作，再或者在執行環境記憶體有限的情況下，這樣做還遠遠不夠。

迴圈插入

好吧，那使用 Array#push(..) 方法將一個陣列的內容追加到另外一個陣列呢：

// `b` onto `a`
for (var i=0; i < b.length; i++) {
    a.push( b[i] );
}

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

b = null;

現在，a 中包含的是原本 a 中的元素外加 b 中的元素。

看起來對於記憶體的使用有效多了。

可是假如 a 比較小而 b 相對來說很大呢？出於記憶體利用以及執行速度的考量，你一定希望把小陣列 a 插入到 b 的前面而不是把大陣列 b 追加到 a 後面。沒問題，只要用 unshift(..) 替換 push(..) 然後反方向遍歷就可以了：

// `a` into `b`:
for (var i=a.length-1; i >= 0; i--) {
    b.unshift( a[i] );
}

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

a = null;

使用函式小技巧

遺憾的是，for 迴圈不夠優雅，也不容易維護。還有沒有更好的辦法呢?

下面是我們的第一次嘗試，用的是 Array#reduce：

// `b` onto `a`:
a = b.reduce( function(coll,item){
    coll.push( item );
    return coll;
}, a );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:
b = a.reduceRight( function(coll,item){
    coll.unshift( item );
    return coll;
}, b );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Array#reduce(..) 與 Array#reduceRight(..) 看起來不錯，只是有點笨拙。ES6 中的 => 箭頭表示式可以對其進行適當“瘦身”，但是依然需要對於每一個元素進行一次函式呼叫，這一點有些令人遺憾。

下面的方法怎麼樣呢：

// `b` onto `a`:
a.push.apply( a, b );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:
b.unshift.apply( b, a );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

看起來好多了，是吧？！尤其是這裡的 unshift(..) 不再需要顧及遍歷順序的問題。ES6 中的展開運算子（spread operator）會更棒：a.push( ...b ) 或是 b.unshift( ...a )。

但是呢，公主與王子並沒有從此過上幸福無虞的生活。在兩種情況下，將 a 或 b 傳給 apply(..) 第二個引數（或者通過 ... ）展開運算子意味著陣列需要展開為函式的引數。

第一個主要問題在於，我們將要追加的陣列的元素數量翻倍了（當然是臨時性的），因為實質上要將陣列內容拷貝到函式呼叫棧上。另外，不同的 JS 引擎因實現方式的不同，對於可以傳入函式的引數的數量限制也不盡相同。

所以，假如要追加的陣列中有一百萬個元素，那麼幾乎一定會超過函式 push(..) 和 unshift(..) 的呼叫棧限制的大小。嗯！幾千元素應該是沒有問題的，不過需要小心設定一個合理的安全上限。

注意： 你可以嘗試使用 splice(..),但是結論與 push(..) / unshift(..) 相同。

一個可行的方式是，依然採用上述方法，將陣列劃分為處於安全範圍的片段，進行批處理：

function combineInto(a,b) {
    var len = a.length;
    for (var i=0; i < len; i=i+5000) {
        b.unshift.apply( b, a.slice( i, i+5000 ) );
    }
}

且慢，接下來我們要回到可讀性（或者還有執行效率）的老話題了。我們還是在拋棄當前所獲得的所有有效方式之前就此打住吧。

總結

Array#concat(..) 是合併兩個（甚至多個）陣列的行之有效的方法。但是隱含的風險是，它直接建立了一個新的陣列，而不是在原來陣列的基礎上進行修改。

在原來陣列的基礎上進行修改有多種可行的方式，但均有某種程度的妥協。

從不同方法（包括未在這裡展示的方法）的優缺點來看，或許最好的方法就是 reduce(..) 和 reduceRight(..)。

無論選擇採用哪種方法，都需要對陣列合並策略進行批判性思考，而不是想當然。