如何使用 JavaScript 的 StructuredClone() 進行深度物件克隆

目錄

• 簡介
• 了解並使用 StructuredClone
• 結論

介紹

您是否曾經嘗試過使用擴展運算符 (...) 在 Javascript 中複製對象，卻發現對原始對象的更改仍然會影響副本？當您期望一份獨立於原件的副本但最終卻有一個連結到原件時，這可能會令人沮喪。這是處理深層物件時的常見問題，並且可能會導致意外的錯誤。值得慶幸的是，Javascript 有 StructuredClone() 方法來解決這個問題

理解並使用 StructuredClone()

首先，Javascript 中的 StructuredClone() 方法用於製作對象的深層複製，包括那些具有嵌套結構的對象，如數組、對象和其他複雜資料類型。

您可能想知道：複製到底是什麼，JavaScript 中有多少種類型的複製？好吧，我們有淺和深副本。雖然我們知道 StructuredClone() 創建後者，但使用 擴充運算子 建立前者。

淺複製僅複製物件的頂層屬性，這表示嵌套物件或陣列仍從原始物件或陣列中引用。另一方面，深層複製複製所有內容，包括嵌套結構，確保克隆完全獨立於原始版本。

讓我們看看 javascript 中淺拷貝和深拷貝的一些例子

淺複製範例

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

從上面的程式碼，我們可以得到以下結論：

• name 屬性是一個原始值，因此在淺拷貝 (personClone.name = "Jane Doe";) 中更改它不會影響原始 (person.name)
• languages 數組是非原始數組，因此原始數組 (person) 和克隆數組 (personClone) 共享相同的引用。修改 personClone 陣列會影響原始 person 陣列

深度複製範例

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

// Create a deep copy using structuredClone
const deepClonedPerson = structuredClone(person);

// Modify the deep cloned object
deepClonedPerson.languages.push("Spanish");

// Check if the original and the deep clone are equal
console.log(person === deepClonedPerson);  // Output: false
console.log(person.languages) // ['English', 'German']
console.log(deepClonedPerson.languages) // ['English', 'German', 'Spanish']
console.log(person.languages === deepClonedPerson.languages);  // Output: false

// Check if the properties are equal
console.log(person.name === deepClonedPerson.name);  // Output: false

// Changes in the deep cloned object don't affect the original
deepClonedPerson.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(deepClonedPerson.name);  // Output: "Jane Doe"

從上面的程式碼，我們可以得到以下結論：

person === deepClonedPerson 確認 StructuredClone() 建立了一個新的獨立物件。
person.languages === deepClonedPerson.languages 顯示嵌套數組也是獨立複製的。
檢查 person.name === deepClonedPerson.name 驗證對深度克隆的變更不會影響原始物件。
語言的值表示對深度克隆（deepClonedPerson）的修改不會反映在原始（person）

結論

在本文中，我們探討了 StructuredClone() 方法如何提供可靠的方法來建立物件的深層副本，確保嵌套結構完全獨立於原始結構。

感謝您閱讀本文。如果您覺得這篇文章有幫助，請按讚並分享給其他可能從學習 Javascript 深度複製中受益的人

您對這個主題有何看法？您是否遇到過其他在 Javascript 中複製物件的技術？請隨時在下面的評論部分分享您的見解。

P.S.我目前正在尋找前端開發人員的機會。如果您有任何線索或正在招聘，請隨時查看我的履歷或在 LinkedIn 上與我聯繫。我很想聽聽你的消息！

以上是如何使用 JavaScript 的 StructuredClone() 進行深度物件克隆的詳細內容。更多資訊請關注PHP中文網其他相關文章！