如何使用 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 上与我联系。我很想听听你的消息！