首頁 > 開發者 > JavaScript
JS合并數組的幾種方法及優劣比較，js數組幾種方法
本文屬於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(..)
無論你選擇什麼,都應該批判性地思考你的數組合并策略,而不是把它當作理所當然的事情.
這是對象不是數組
花了點時間寫了個函數，樓主多加點分吧
<!--STATUS OK-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS 數組合并問題_百度知道 </title>
<link rel="alternate" type="application/rss+xml" title="“JS 數組合并問題”的最新回答（RSS 2.0）" href="zhidao.baidu.com/...=rssqb">
</head>
<body>
<script>
function objConcat(a1,a2){
var newarr={};
for (var k1 in a1){
newarr[k1]=a1[k1];
}
for (var k2 in a2){
newarr[k2]=a2[k2];
}
return newarr;
}
arr1 = {a:1, b:2, c:3};
arr2 = {b:5, h:6, k:7};
arr=objConcat(arr1,arr2);
for (var key in arr){
document.write(key+'->'+arr[key]+'</br>');
}
</script>
</body>
</html>
js中new 了兩個Object數組怎將數組內容合并，重複的內容？
如果是普通資料類型, 非常簡單
var ARR1=[1,2,3,4];
var ARR2=[3,4,5,6];
function mergeArray(arr1, arr2) {
var _arr = [];
for (var i = 0; i < arr1.length; i++) {
_arr.push(arr1[i]);
}
var _dup;
for (var i = 0; i < arr2.length; i++){
_dup = false;
for (var _i = 0; _i < arr1.length; _i++){
if (arr2[i] === arr1[_i]){
_dup = true;
break;
}
}
if (!_dup){
_arr.push(arr2[i]);
}
}
return _arr;
}
var b = mergeArray(ARR1, ARR2);
//b = [1, 2, 3, 4, 5, 6]
//樓上的方法得到的是['1','2','3','4','5'], 轉換成字串了
如果是複雜物件及數組, 則稍微麻煩一些, 需要序列化後比較
Object.prototype.Serialize = function()
{
var type = __typeof__(this);
switch(type)
{
case 'Array' :
{
var strArray = '[';
for ( var i=0 ; i < this.length ; ++i )
{
var value = '';
if ( this[i] )
{
value = this[i].Serialize();
}
strArray += value + ',';
}
if ( strArray.charAt(strArray.length-1) == ',' )
{
strArray = strArray.substr(0, strArray.length-1);
}
strArray += ']';
return strArray;
}
case 'Date' :
{
return 'new Date(' + this.getTime() + ')';
}
case 'Boolean' :
case 'Function' :
case 'Number' :
case 'String' :
{
return this.toString();
}
default :
{
var serialize = '{';
for ( var key in this )
{
if ( key == 'Serialize' ) continue;
var subserialize = 'null';
if ( this[key] != undefined )
{
subserialize = this[key].Serialize();
}
serialize +......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
