structuredClone：HTML规范中的强大深拷贝函数

2023-12-30 05:05:08

掌握深度克隆：使用 structuredClone() 告别克隆烦恼

在 JavaScript 的广阔天地中，复制对象是一项常见的任务。然而，如果你需要创建原始对象的完美镜像，一个包含所有嵌套属性和对象的深度克隆，那么过去，这项任务就像在迷宫中寻找出口一样繁琐。

structuredClone()：深度克隆的救星

随着 HTML5 规范的诞生，JavaScript 中的克隆世界迎来了革命。structuredClone() 函数闪亮登场，为深度克隆提供了原生且高效的解决方案。告别 JSON.parse(JSON.stringify()) 和 lodash 等迂回曲折的方法，structuredClone() 准备将深度克隆提升到新的高度。

structuredClone() 的秘密武器

structuredClone() 的优势令人难以抗拒：

速度狂魔： 它是本机实现的，在速度和性能上轻松碾压那些慢吞吞的替代方案。
安全卫士： 作为 JavaScript 标准的宠儿，structuredClone() 经过严格审查和维护，稳定可靠，让你高枕无忧。
循环引用驯服师： 它熟练地处理包含循环引用的复杂对象，让 JSON.parse(JSON.stringify()) 只能望洋兴叹。
跨平台明星： 无论你在 Chrome、Firefox、Safari 还是 Edge 中遨游，structuredClone() 都能随你左右，在所有支持 HTML5 的现代浏览器中一展身手。

structuredClone() 与它的克隆伙伴

让我们比较一下 structuredClone() 与其他深度克隆方法：

方法	优点	缺点
JSON.parse(JSON.stringify())	简单直观	不支持循环引用，速度较慢
lodash	功能强大，支持循环引用	需要引入第三方库，可能增加代码体积
structuredClone()	高效、安全、支持循环引用	仅适用于 HTML5 浏览器

structuredClone() 的用例

structuredClone() 在需要深度克隆的场景中大显身手：

安全复制： 创建原始对象的副本，免除意外修改的担忧。
复杂克隆： 轻松克隆包含循环引用的复杂对象，让它们在不同的上下文中闪耀。
共享无忧： 安全地共享对象，不会对原始对象造成影响。

structuredClone() 代码示例

const originalObject = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    number: 123,
  },
};

// 使用 structuredClone() 进行深度克隆
const clonedObject = structuredClone(originalObject);

// 检查两个对象的独立性
console.log(clonedObject === originalObject); // false
console.log(clonedObject.address === originalObject.address); // false

// 修改克隆对象，不会影响原始对象
clonedObject.name = "Jane";
console.log(originalObject.name); // 仍然是 "John"