js深拷貝與淺拷貝

2021-09-05 10:40:08 字數 1691 閱讀 6475

實現乙個頁面或者乙個功能時,常常遇到的場景需要我們備份乙個陣列或者物件,這時候出現了深拷貝與淺拷貝效果截然不同呀總結如下:

var

arr = [1, 2, 3, 4],

shallowarr = arr;

arr[0] = "change";

console.log(arr);

console.log(shallowarr); //"change"

很簡單的例子,很明顯結果是兩個陣列第一項同時發生改變,原因是因為arr與shallowarr兩陣列為同一陣列,僅僅是位址名不同,而位址卻是同乙個。那麼如何避免上面的情況發生呢那就是深拷貝了。

var

arr = [1, 2, 3, 4],

deeparr = .concat(arr);

console.log(arr === shallowarr); // false

上述**這是針對陣列內部為簡單型別的深拷貝,當陣列內部的成員為引用型別時上面的方式還能算深拷貝嗎?

var

arr = [, ],

deeparr = .concat(arr);

console.log(arr === deeparr); // false

console.log(arr[0] === deeparr[0]); //true

很明顯陣列位址發生變化,但是陣列內的物件位址並未變化,此時這種拷貝方式就是淺拷貝,所以說,不同場景下concat不是絕對滴~

那麼問題來了,什麼樣的深拷貝才是絕對的捏~下面兩種方式

var

arr = [, ],

deeparr = json.parse(json.stringify(arr));

console.log(arr === deeparr); // false

console.log(arr[0] === deeparr[0]); //false

序列化反序列化之後的物件一定是深拷貝,但是這種方式也有自己的弊端啦,我們看個栗子

new date()

wed dec 26 2018 10:29:09 gmt+0800 (中國標準時間)

json.parse(json.stringify(new date()))

"2018-12-26t02:28:42.932z"

所以還是有坑的,使用的時候應該多注意。

var

arr = ,

deeparr = $.extend(true, , arr);

arr === deeparr //false

function deepfunc(argc) ;

for (var property in argc)

return newobj;

}

借用遞迴不停的賦值。

總結:深拷貝物件都是js中引用型別的物件,基本型別的沒有涉及,本質上就是引用型別的物件在堆上分配空間,而深拷貝就是重新給物件在堆上分配乙個空間,然後將複製內容到這個新的空間中;而淺拷貝恰恰只是在棧上重新定義了乙個指標,指向的位置卻依然是原來引用物件的堆空間,改變指的時候當然就都變啦~

第一次在csdn上發文章,有問題希望多給建議,蟹蟹~(排版不太好o(╯□╰)o)

js深拷貝與淺拷貝

1 基礎知識 基本型別與引用型別 js中可以把變數分成兩部分,基本型別和引用型別。基本型別包括 undefined null boolean number和string 引用型別值可能由多個值構成的物件。在對基礎型別資料進行拷貝時,實際相當於建立新的相同資料 hello 賦值給b var a hel...

js 淺拷貝與深拷貝

js 有兩種資料型別,基礎資料型別和引用資料型別 基礎資料型別都是按值訪問的,我們可以直接操作儲存在變數中的實際的值。而引用型別如array,1.淺拷貝 只複製指向某個物件的指標,而不複製物件本身,新舊物件共享一塊記憶體 淺拷貝是指只複製一層物件,當物件的屬性是引用型別時,實質複製的是其引用,當引用...

JS 深拷貝與淺拷貝

參考學習 在有指標的情況下,淺拷貝只是增加了乙個指標指向已經存在的記憶體,而深拷貝就是增加乙個指標並且申請乙個新的記憶體,使這個增加的指標指向這個新的記憶體。深拷貝 陣列 法一 for迴圈 let arr1 1,2,3 let arr2 copyarr arr1 function copyarr a...