javascript 陣列的深度複製

2021-08-19 12:49:03 字數 2077 閱讀 5245

一般情況下,使用 「=」 可以實現賦值。但對於陣列、物件、函式等這些引用型別的資料,這個符號就不好使了。

陣列的簡單複製

1.1 簡單遍歷

最簡單也最基礎的方式,自然是迴圈處理。示例:

function array_copy(arr)

for (i = 0, len = arr.length; i < len; i++)  else 

};return a;

//測試

var arr1 = [1, 2, 3, 4],

arr2 = array_copy(arr1);

console.log(arr1, arr2);

arr2[2] = 10;

console.log(arr1[2], arr2[2]);

1.2 變通的複製實現

經常出現在面試題中的取巧方法,是使用 slice 或 contcat 方法實現。示例:

var arr1 = [1, 2, 3, 4],

arr2 = arr1.slice(0),

arr3 = arr1.concat();

console.log(arr1, arr2, arr3);

arr2[2] = 10;

arr3[2] = 11;

console.log(arr1[2], arr2[2], arr3[2]);

陣列的深度複製

普通的一維陣列且值為非引用型別,使用上述方法是沒有問題的,否則就比較麻煩了。深度複製需要考慮陣列值為各種引用型別的情況。

2.1 使用 json 方法

json.stringify(array) 然後再 json.parse()。示例:

var arr1 = [1, 2, [3, 4], , 7],

arr2 = json.parse(json.stringify(arr1));

console.log(arr1, arr2);

arr2[1] = 10;

arr2[3].a = 20;

console.log(arr1[1], arr2[1]);

console.log(arr1[3], arr2[3]);

此方法存在對古老瀏覽器的相容性問題。如確需要作相容,可引入如下相容檔案解決:

注意:如果陣列值為函式,上述方法還是不行的。

2.2 深度複製的完全實現

考慮到多維陣列的巢狀,以及陣列值為物件的情況,可以作如下原型擴充套件(當然寫為普通函式實現也是可以的,原型擴充套件是不建議的方式):

object.prototype.clone = function () ;

for (var i in this)

return o;

}; array.prototype.clone = function () else

return arr;

};//測試1 object

var obj1 =

}; var obj2 = obj1.clone();

obj2.age++;

console.log(obj1.age);

//測試2 array

var fun = function(log) ,

arr1 = [1, 2, [3, 4], , fun],

arr2 = arr1.clone();

console.log(arr1, arr2);

arr2[2][1]= 『mike』;

arr2[3].a = 50;

arr2[4] = 10;

console.log(arr1, arr2);

2.3 使用 jquery 的 extend 方法

如果你在使用 jquery,那麼最簡單的方法是使用 extend 外掛程式方法。示例:

var arr1 = [1, 2, [3, 4], , 7],

arr2 = $.extend(true, , arr1);

console.log(arr1, arr2);

arr2[1] = 10;

console.log(arr1, arr2);

JavaScript中的陣列

陣列 引數 返回值原陣列是否改變 1 向陣列尾部新增push 引數可以是乙個或多個 返回值是新增後陣列的長度 原陣列改變 2 刪除陣列的最後一項pop 沒有引數 返回值是刪除的那個數 原陣列改變 3 向陣列的頭部新增unshift 引數可以是乙個或多個 返回值是新增後陣列的長度 原陣列改變 4 刪除...

JavaScript陣列的操作

建立乙個空的陣列 var arr new array 建立長度為5的空的陣列,只有乙個元素時,會把這個元素當成陣列的長度,從而建立乙個長度為該元素的值的陣列。如果只有乙個元素,而該元素又不是整型的數字時,會出現錯誤 uncaught syntaxerror unexpected token ille...

JavaScript的陣列練習

1.讀取學生的10門課的成績,然後輸出10門課成績的最高分,最低分,總分,平均分.2.建立100個隨機的10到60的隨機整數,然後分別統計每個數字出現的次數 3.定義乙個函式,判斷陣列中是否所有的數字都大於0 4.封裝函式 把兩個陣列共同的元素放入乙個新的陣列,並返回新的陣列 5.定義乙個函式 可以...