Andy的前後端技術筆記、生活紀錄
Javascript中使用structuredClone做深拷貝
發佈於: 2024-04-16 更新於: 2024-04-21 分類於: frontend > frontend_interview

深拷貝是什麼?

先前有寫過如何處理深拷貝,深拷貝是要幹嘛?
簡單的說就是當有個物件他裡面有巢狀結構,不只有一層,如果直接以變數assign的方式賦值給一個新的變數,這時候在第二層開始的元素會是指向原先的物件,所以當使用者在對新的物件第二層的元素操作時就會修改到舊有的物件的值,這時候就需要深拷貝來處理,詳細請參閱👇

在JS中複製object-深拷貝/淺拷貝

進階版structuredClone

先前都是使用JSON.stringify & JSON.parse來組合處理,現在只要透過structuredClone來處理,這個有什麼差異呢?
舊有的方法只能準確地處理 primitive Value,若是碰到Map, Set 非primitive的物件就會被變成空object{},也就會造成資料的不完整。

可以看以下程式碼 或是玩玩看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const obj = {
'name': 'Andy',
'profile': {
height:182,
age:18,
fn: new Set([1,2,3])

}
}

const objStructuredClone = structuredClone(obj);
const objJson = JSON.parse(JSON.stringify(obj))

objStructuredClone['profile']['age'] = 35;
objStructuredClone['profile']['fn'].add(5);


console.log(objStructuredClone['profile']['fn']);
// Set(4) {1, 2, 3, 5}

console.log(obj['profile']['fn']);
// Set(3) {1, 2, 3}

console.log(objJson['profile']['fn'])
// {}

console.log(objStructuredClone['profile']);
// {height: 182, age: 35, fn: Set(4) {1, 2, 3, 5}}
console.log(obj['profile']);
// {height: 182, age: 18, fn: Set(3) {1, 2, 3}}


--- 到底拉 The End ---