JS 中如何克隆對象？

此問題看似簡單，實際十分復雜。

假設(shè)我們需要獲取下述對象的拷貝。

const cat = {
  name: '薛定諤',
  girlFriends: { name: '龍貓' }
}

我們應該簡單地創(chuàng)建一個新變量嗎？（不）

如果我們將對象賦值給一個新變量，那幾乎毫無卵用。

const newCar = cat
newCat.name = '柴郡貓'

console.log(newCat.name) //=> 柴郡貓
console.log(cat.name) //=> 柴郡貓

兩個對象都會變化。

原因很簡單 —— 我們并沒有創(chuàng)建一個新對象。我們只是創(chuàng)建了一個新的引用。

現(xiàn)在有兩個變量：cat 和 newCat，它們都引用同一個對象。

淺克隆

何時淺克?。寒斘覀兊膶ο髮傩杂星覂H有一層深度，或者我們不關(guān)心嵌套引用時。

當且僅當源對象不包含對其他對象的任何引用時，淺克隆才有效。

const newCat = { ...cat }

newCar.name = '柴郡貓'
console.log(newCat.name) //=> 柴郡貓
console.log(cat.name) //=> 薛定諤

newCat.girlFriends.name = '加菲貓'
console.log(newCat.girlFriends.name) //=> 加菲貓
console.log(cat.girlFriends.name) //=> 加菲貓

更新女友名字也會導致原始名字變化，這是因為 newCat.girlFriends 和 car.girlFriends 仍然引用內(nèi)存中的同一對象。

這就是為什么它被稱為“淺”克?。核芮覂H能拷貝頂層屬性。

在我們的示例中，我們使用展開運算符 ... 來執(zhí)行淺克隆，但我們也可以使用 Object.assign。

const newCat = Object.assign({}, cat)

通過 JSON 深克隆

何時使用此方案：當且僅當我們需要深克隆，且我們的對象有且僅有數(shù)組、原始值和其他普通對象時。

克隆對象的一種流行方案是，將其轉(zhuǎn)換為 JSON 字符串，然后解析它。

const newCat = JSON.parse(JSON.stringify(cat))

newCat.name = '柴郡貓'
console.log(newCat.name) //=> 柴郡貓
console.log(cat.name) //=> 薛定諤

newCat.girlFriends.name = '加菲貓'
console.log(newCat.girlFriends.name) //=> 加菲貓
console.log(cat.girlFriends.name) //=> 龍貓

雖然此方案適用于大多數(shù)情況，但它仍然有其局限性。它能且僅能轉(zhuǎn)換普通對象。

// Date 對象會變成字符串
JSON.parse(JSON.stringify({ now: new Date() }))
// {now: '2022-07-14T13:21:36.761Z'}
// undefined 對應屬性人間蒸發(fā)
JSON.parse(JSON.stringify({ girlFriends: undefined }))
//=> {}
// 無法克隆 Set
JSON.parse(JSON.stringify({ set: new Set([9]) }))
//=> { set: {} }
// 無法克隆 Symbol
JSON.parse(JSON.stringify({ symbol: Symbol('996') }))
//=> {}
// 無法克隆正則
JSON.parse(JSON.stringify({ regex: /996/i }))
//=> {}
// 無法克隆 BigInt
JSON.parse(JSON.stringify({ bigint: 996n }))
//=> 未捕獲類型錯誤：無法序列化 BigInt

遞歸克隆

何時使用此方案：當且僅當我們的對象包含復雜的結(jié)構(gòu)（比如 Map/RegExp 等）時。

structuredClone 可以搞定大部分問題。

如你所愿，它通過遞歸遍歷對象來工作。它足夠機智，可以使用循環(huán)引用拷貝對象，并且知道如何克隆不同類型的數(shù)據(jù)（包括但不限于 Map/Set/Date 等）。

structuredClone({ regex: /996/i, set: new Set([9]) })
//=> { regex: /996/i, set: Set(1) {9}}

它仍然有其局限性：舉個栗子，它無法克隆函數(shù)或 DOM 節(jié)點。

令人雞凍的是，它已經(jīng)被所有主流瀏覽器支持。

粉絲請注意，它不是 ECMAScript 標準的一部分，而是瀏覽器 API 的一部分，并且不同瀏覽器的實現(xiàn)可能一龍一豬。Node 根本沒有此 API。

或者，我們始終可以使用 lodash 的 cloneDeep，它實現(xiàn)了類似的算法。

完結(jié)撒花

根據(jù)情況選擇特定的克隆機制。雖然我相信，在大多數(shù)情況下，JSON.parse(JSON.stringify()) 應該游刃有余，但有時我們可能想使用 structuredClone 函數(shù)來拷貝復雜的對象。在選擇克隆機制之前，請了解您的數(shù)據(jù)。

How to clone an object in JavaScript?: https://www.strictmode.io/articles/clone 

以上就是JS中如何克隆對象(深克隆淺克隆遞歸克隆)的詳細內(nèi)容，更多關(guān)于JS克隆對象的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論