JS的深拷貝與淺拷貝

2021-08-07 15:43:40 字數 1464 閱讀 2149

淺拷貝:淺拷貝是拷貝引用,拷貝後的引用都是指向同乙個物件的例項,彼此之間的操作會互相影響

深拷貝:在堆中重新分配記憶體,並且把源物件所有屬性都進行新建拷貝,以保證深拷貝的物件的引用圖不包含任何原有物件或物件圖上的任何物件,拷貝後的物件與原來的物件是完全隔離,互不影響

淺拷貝

淺拷貝分兩種情況,拷貝直接拷貝源物件的引用 和 源物件拷貝例項,但其屬性(型別為object,array的屬性)拷貝引用。

拷貝原物件的引用

這是最簡單的淺拷貝。例:

var a = ;

var b = a;

console.

log(a === b); // 輸出true。

a.c =

2;console.

log(b.c); // 輸出 2

源物件拷貝例項,其屬性物件拷貝引用。

這種情況,外層源物件是拷貝例項,如果其屬性元素為複雜雜資料型別時,內層元素拷貝引用。

對源物件直接操作,不影響兩外乙個物件,但是對其屬性操作時候,會改變兩外乙個物件的屬性的只。

常用方法為:array.prototype.slice(), array.prototype.concat(), jqury的$.extend({},obj),例:

var a = [, ];

var b = a.slice();

console.log(a === b); // 輸出false,說明外層陣列拷貝的是例項

a[0].c = 3

;console.log(b[0].c); // 輸出 3,說明其元素拷貝的是引用

深拷貝

深拷貝後,兩個物件,包括其內部的元素互不干擾。常見方法有json.parse(),json.stringify(),jqury的$.extend(true,{},obj),lodash的.clonedeep和.clone(value, true)。例:

var a = };

var b = $.extend(true, {}, a);

console.log(a === b); // 輸出false

a.c.d = 3

;console.log(b.c

.d); // 輸出 1,沒有改變。

下面是另一組深拷貝的實現

function

objclone

(myobj)

array.prototype.clone = function

() return newarr;

}

參考的鏈結有:1.在js中的深複製的方法

2.理解js的淺拷貝與深拷貝

js深拷貝與淺拷貝

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

js 淺拷貝與深拷貝

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

js深拷貝與淺拷貝

實現乙個頁面或者乙個功能時,常常遇到的場景需要我們備份乙個陣列或者物件,這時候出現了深拷貝與淺拷貝效果截然不同呀總結如下 var arr 1,2,3,4 shallowarr arr arr 0 change console.log arr console.log shallowarr change...