1. 程式人生 > >js深拷貝和淺拷貝----尊重原創,轉自:http://www.cnblogs.com/yichengbo/archive/2014/07/10/3835882.html

js深拷貝和淺拷貝----尊重原創,轉自:http://www.cnblogs.com/yichengbo/archive/2014/07/10/3835882.html

一、陣列的深淺拷貝

在使用JavaScript對陣列進行操作的時候,我們經常需要將陣列進行備份,事實證明如果只是簡單的將它賦予其他變數,那麼我們只要更改其中的任何一個,然後其他的也會跟著改變,這就導致了問題的發生。

var arr = ["One","Two","Three"];

var arrto = arr;
arrto[1] = "test";
document.writeln("陣列的原始值:" + arr + "<br />");//Export:陣列的原始值:One,test,Three
document.writeln("陣列的新值:" + arrto + "<br />");//
Export:陣列的新值:One,test,Three
像上面的這種直接賦值的方式就是淺拷貝,很多時候,這樣並不是我們想要得到的結果,其實我們想要的是arr的值不變,不是嗎? 
方法一:js的slice函式 
對於array物件的slice函式,
返回一個數組的一段。(仍為陣列)
arrayObj.slice(start, [end])
引數
arrayObj
必選項。一個 Array 物件。
start
必選項。arrayObj 中所指定的部分的開始元素是從零開始計算的下標。
end
可選項。arrayObj 中所指定的部分的結束元素是從零開始計算的下標。
說明
slice 方法返回一個 Array 物件,其中包含了 arrayObj 的指定部分。
slice 方法一直複製到 end 所指定的元素,但是不包括該元素。如果 start 為負,將它作為 length 
+ start處理,此處 length 為陣列的長度。如果 end 為負,就將它作為 length + end 處理,此處 length 為陣列的長度。如果省略 end ,那麼 slice 方法將一直複製到 arrayObj 的結尾。如果 end 出現在 start 之前,不復制任何元素到新陣列中。

var arr = ["One","Two","Three"];

var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("陣列的原始值:" + arr + "<br />");//Export:陣列的原始值:One,Two,Three
document.writeln("陣列的新值:" + arrtoo + "<br />");//Export:陣列的新值:One,set Map,Three

方法二:js的concat方法 

concat() 方法用於連線兩個或多個數組。
該方法不會改變現有的陣列,而僅僅會返回被連線陣列的一個副本。
語法
arrayObject.concat(arrayX,arrayX,......,arrayX)
說明
返回一個新的陣列。該陣列是通過把所有 arrayX 引數新增到 arrayObject 中生成的。如果要進行 concat() 操作的引數是陣列,那麼新增的是陣列中的元素,而不是陣列。

var arr = ["One","Two","Three"];

var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("陣列的原始值:" + arr + "<br />");//Export:陣列的原始值:One,Two,Three
document.writeln("陣列的新值:" + arrtooo + "<br />");//Export:陣列的新值:One,set Map To,Three

二、物件的深淺拷貝

就是把物件的屬性遍歷一遍,賦給一個新的物件。

var deepCopy= function(source) { 
var result={};
for (var key in source) {
      result[key] = typeof source[key]===’object’? deepCoyp(source[key]): source[key];
} 
   return result; 
}