您是否曾經嘗試過使用擴展運算符 (...) 在 Javascript 中複製對象，卻發現對原始對象的更改仍然會影響副本？當您期望一份獨立於原件的副本但最終卻有一個連結到原件時，這可能會令人沮喪。這是處理深層物件時的常見問題，並且可能會導致意外的錯誤。值得慶幸的是，Javascript 有 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
深度複製範例
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"
結論
感謝您閱讀本文。如果您覺得這篇文章有幫助，請按讚並分享給其他可能從學習 Javascript 深度複製中受益的人
您對這個主題有何看法？您是否遇到過其他在 Javascript 中複製物件的技術？請隨時在下面的評論部分分享您的見解。
P.S.我目前正在尋找前端開發人員的機會。如果您有任何線索或正在招聘，請隨時查看我的履歷或在 LinkedIn 上與我聯繫。我很想聽聽你的消息！
以上是如何使用 JavaScript 的 StructuredClone() 進行深度物件克隆的詳細內容。更多資訊請關注PHP中文網其他相關文章！
