本文屬于JavaScript的基礎技能. 我們將學習結合/合并兩個JS數(shù)組的各種常用方法,并比較各種方法的優(yōu)缺點.

我們先來看看具體的場景:

var q = [ 5, 5, 1, 9, 9, 6, 4, 5, 8]; var b = [ "tie", "mao", "csdn", "ren", "fu", "fei" ];

很明顯,數(shù)組 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 是一個全新的數(shù)組, 表示 q 和 b 這兩個數(shù)組的組合, 但是 q 和 b 現(xiàn)在沒用了是吧?

如果 q 數(shù)組有10000個元素, b 數(shù)組也有有10000個元素? 那么數(shù)組c現(xiàn)在就有20000個元素, 這種方式占用了2倍的內存.

“這沒問題!”,你可能會覺得. 只要將 q 和 b 置空就行, 然后就會被垃圾回收,對嗎?問題解決了!

q = b = null; // `q` and `b` 現(xiàn)在可以被垃圾回收了

額? 如果數(shù)組都很小,那自然沒問題. 但對大型的數(shù)組,或需要多次重復處理時, 內存就被限制了, 它還需要進行優(yōu)化.

循環(huán)插入

OK, 讓我們把一個數(shù)組的內容加入到另一個中試試,使用 Array#push() 方法:

// 將數(shù)組 `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;

現(xiàn)在, q中存放了兩個原始數(shù)組的內容(q + b).

看樣子對內存優(yōu)化做的不錯.

但如果 q 數(shù)組很小而 b 又很大呢? 出于內存和速度的考慮,這時想把較小的 q 插入到 b 前面. 沒問題,只要用 unshift() 方法代替 push() 即可, 對應的也要從大到小進行循環(huán)遍歷:

// `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循環(huán)很土并且難以維護. 我們能做得更好嗎?
我們先試試 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規(guī)范6 中的 => 箭頭函數(shù)(arrow-functions) 能讓代碼量大大減少, 但需要對每個數(shù)組元素執(zhí)行函數(shù)調用, 也是很渣的手段.?
那么下面的代碼怎么樣呢?

// `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() 作為第二個參數(shù)(apply方式調用Function時第一個參數(shù)在內部變成this,即context,上下文,作用域), 還是使用 ... 展開運算符的方式, 實際上數(shù)組都會被打散成為函數(shù)的 arguments .
第一個主要的問題是,占用了雙倍的內存(當然,是臨時的!),因為需要將數(shù)組復制到函數(shù)棧之中. 此外,不同的JS引擎有不同的實現(xiàn)算法,可能會限制了函數(shù)可以傳遞的參數(shù)數(shù)量.

如果數(shù)組添加了一百萬個元素, 那一定會超過函數(shù)棧所允許的大小, 不管是push() 或 unshift()調用. 這種方式只在幾千個元素時可用,所以必須限制其不能超過一定范圍.

注意: 你也可以試試 splice(), 肯定會發(fā)現(xiàn)他和 push(..)/unshift(..) 都是一樣的限制.

一種選擇是繼續(xù)使用這種方法,但是采用分批次處理:

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() 是久經(jīng)考驗的方法, 用于組合兩個(或多個)數(shù)組. 但他創(chuàng)建了一個新的數(shù)組,而不是修改現(xiàn)有的一個.

有很多變通的手法,但他們都有不同的優(yōu)缺點,需要根據(jù)實際情況來選擇.

上面列出了各種 優(yōu)點/缺點,也許最好的(包括沒有列出的)方法是 reduce(..) 和 reduceRight(..)

無論你選擇什么,都應該批判性地思考你的數(shù)組合并策略,而不是把它當作理所當然的事情.?

?

轉載于:https://www.cnblogs.com/love314159/p/7573990.html

總結

以上是生活随笔為你收集整理的JS合并数组的几种方法及优劣比较的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。