本文屬於JavaScript的基礎技能. 我們將學習結合/合併兩個JS數組的各種常用方法,並比較各種方法的優缺點.
我們先來看看具體的場景:
很明顯,陣列 q 和 b 簡單拼接的結果是:
concat(..)方法
最常見的用法如下:
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 置空就行, 然後就會被垃圾回收,對嗎?問題解決了!
額? 如果數組都很小,那自然沒問題. 但對大型的數組,或需要多次重複處理時, 內存就被限制了, 它還需要進行優化.
循環插入
OK, 讓我們把一個陣列的內容加入到另一個中試試,使用 Array#push() 方法:
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()即可, 對應的也要由大到小進行循環遍歷:
b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]
q = null;
實用技巧
悲催的是,for循環很土並且難以維護. 我們能做得更好嗎?
我們先試試 Array#reduce :
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) 能讓程式碼量大幅減少,但需要對每個數組元素執行函數呼叫, 也是很渣的手段.
那下面的程式碼怎麼樣呢?
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(..) 都是一樣的限制.
一種選擇是繼續使用這種方法,但是採用分批次處理:
等等,我們損害了程式碼的可讀性(甚至是效能!). 在我們放棄之前結束這個旅程吧.
總結
Array#concat() 是久經考驗的方法, 用於組合兩個(或多個)數組. 但他創建了一個新的數組,而不是修改現有的一個.
有很多變通的手法,但他們都有不同的優缺點,需要根據實際情況來選擇.
上面列出了各種 優點/缺點,也許最好的(包括沒有列出的)方法是 reduce(..) 和 reduceRight(..)
無論你選擇什麼,都應該批判性地思考你的數字組合併策略,而不是把它當作理所當然的事情.
