js深拷貝與淺拷貝的區別及實現

2021-09-29 04:55:07 字數 2564 閱讀 2587

其值在記憶體中佔據著固定大小的空間,並被儲存在棧記憶體中。當乙個變數向另乙個變數複製基本型別的值,會建立這個值的副本,並且我們不能給基本資料型別的值新增屬性。其為深拷貝。

淺拷貝:只複製指向某個物件的指標,而不複製物件本身,新舊物件共享一塊記憶體; 改變乙個物件,另乙個會隨之改變;

深拷貝:複製並建立乙個一模一樣的物件,不共享記憶體,修改新物件,舊物件保持不變。

var arr = [1, 2, 3, '4'];

var arr2 =arr;

arr2[1] = "test";

console.log(arr);

//[1, "test", 3, "4"]

console.log(arr2); //

[1, "test", 3, "4"]

我們可以看到,簡單的賦值便是淺拷貝,乙個物件改變,另乙個也隨之改變。

1.使用json.stringfy();

var obj1 =  };

var obj2 =json.parse(json.stringify(obj1));

obj2.a.b = 20;

console.log(obj1);

// }

console.log(obj2); //

}console.log(obj1 === obj2); //

false

console.log(obj1.a === obj2.a); //

false

2.使用遞迴實現

function

deepclone(obj);

if(obj && typeof obj==="object")

else}}

return

objclone;

}

let a=[1,2,3,4],

b=deepclone(a);

a[0]=2;

console.log(a);

//[2, 2, 3, 4]

console.log(b);//

[1, 2, 3, 4]

當物件中有迴圈引用時:

即:

var a=;

a.e=a;

設定乙個標記,當目前物件已經被轉殖過時,則不再迴圈呼叫

function

deepclone(obj);

for(key in

obj)

objclone[key] =deepclone(obj[key]);

}else

}return

objclone;

}

var a=;

a.e=a;

mark={};

b=deepclone(a);

console.log(a);//}

console.log(b);//

}

3.jquery的extend()。

$.extend( [deep ], target, object1 [, objectn ] )

deep表示是否深拷貝,true為深拷貝,false為淺拷貝;

target

let a=[0,1,[2,3],4],

b=$.extend(true

,,a);

a[0]=-1;

a[2][0]=-1;

console.log(a);

//[-1,1,[-1,3],4]

console.log(b);//

[0,1,[2,3],4]

特別說明:concat(),slice()不是深拷貝,因為其只是一級屬性是深拷貝,二級屬性就不是了。

let a=[0,1,[2,3],4],

b=a.slice();

a[0]=-1;

a[2][0]=-1;

console.log(a);

//[-1,1,[-1,3],4]

console.log(b);//

[0,1,[-1,3],4]

let a=[0,1,[2,3],4],

b=.concat(a);

a[0]=-1;

a[2][0]=-1;

console.log(a);

//[-1,1,[-1,3],4]

console.log(b);//

[0,1,[-1,3],4]

更多專業前端知識,請上

【猿2048】www.mk2048.com

js深拷貝與淺拷貝區別,如何實現深拷貝

首先我們需要弄清楚什麼是淺拷貝,其實我個人覺得淺拷貝從性質上和事件冒泡一樣,當出現這種事件時就代表出問題了 首先要看看js資料的儲存空間 按儲存空間我們可以簡單將js資料分為兩大類 基礎變數,整個存在棧中。還有一種是匯入型別 例如 陣列 json物件 null等 他們的 名相當於乙個指標,而真正的變...

淺拷貝與深拷貝的區別。如何實現深拷貝。

關於拷貝應該是大家面試中經常被問到的問題,特此總結一下,為以後積累經驗。鞏固拷貝之前必須先回顧下資料的分類,知道其儲存的位置。基本資料型別 1 分類 string number boolean undefined null symbol 2 特點 資料存在棧記憶體中 引用資料型別 1 分類 obje...

js的深拷貝與淺拷貝的區別

棧 stack 會自動分配記憶體空間,會自動釋放。堆 heap 動態分配的記憶體,大小不定也不會自動釋放 堆 heap 和棧 stack 棧 stack 會自動分配記憶體空間,會自動釋放。堆 heap 動態分配的記憶體,大小不定也不會自動釋放 基本型別 undefined null boolean ...