JavaScript 原生深拷貝方法來啦！structuredClone 閃耀登場~
作者：林三心不學挖掘機
很多人會用 JSON.parse(JSON.stringify(obj))來對對象進行深拷貝操作，但是這個方式缺點太多了。
原生的深拷貝~
分享一個 JavaScript 原生的深拷貝方法 structuredClone，其實這個方法出了很久了，但是存在感一直很低~
圖片
說這個方法前，我們先來討論一下，常見的深拷貝都有哪些方案呢？
JSON.parse & JSON.stringify()
很多人會用 JSON.parse(JSON.stringify(obj))來對對象進行深拷貝操作，但是這個方式缺點太多了
圖片
圖片
可以看到很多數據類型都沒有深拷貝成功
數據類型 | 克隆結果 |
number | ? |
string | ? |
undefined | ? |
null | ? |
boolean | ? |
object | ? |
Array | ? |
Function | ? |
map | ? |
Set | ? |
Date | ? |
Error | ? |
Regex | ? |
Dom節點 | ? |
并且在對象具有環引用的情況下，這種深拷貝方式會導致報錯
圖片
圖片
lodash.cloneDeep
lodash 的 cloneDeep也是深拷貝的手段之一，且非常完善，能成功拷貝各種數據類型
但是大家要注意使用 lodash 時要使用 lodash-es，這樣才能做到按需加載，減少不必要的代碼體積
圖片
圖片
數據類型 | 克隆結果 |
number | ? |
string | ? |
undefined | ? |
null | ? |
boolean | ? |
object | ? |
Array | ? |
Function | ? |
map | ? |
Set | ? |
Date | ? |
Error | ? |
Regex | ? |
Dom節點 | ? |
window.structuredClone
全局的 structuredClone() 方法使用結構化克隆算法將給定的值進行深拷貝
圖片
圖片
當克隆Function、Dom節點時，會報錯
圖片
圖片
其他數據類型可以成功拷貝~
圖片
數據類型 | 克隆結果 |
number | ? |
string | ? |
undefined | ? |
null | ? |
boolean | ? |
object | ? |
Array | ? |
Function | ? |
map | ? |
Set | ? |
Date | ? |
Error | ? |
Regex | ? |
Dom節點 | ? |
責任編輯：武曉燕
來源：
前端之神
