目錄

• 介紹
• 理解並使用 StructuredClone
• 結論

介紹

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

理解並使用 StructuredClone()

首先，Javascript 中的 StructuredClone() 方法用於製作物件的深層複製，包括那些具有嵌套結構（如陣列、物件和其他複雜資料類型）的物件。

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

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

讓我們來看看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 上與我聯繫。我很想聽聽你的消息！