• 什么是 StructuredClone()？

  • StructuredClone() 是 2022 年引入的全局函数，可实现 JavaScript 对象的深度克隆。与 JSON.stringify() 和 JSON.parse() 等传统方法难以应对复杂的结构和循环引用不同，structuredClone() 可以轻松应对这些挑战。

• 为什么它会改变游戏规则？

  • 它是一个强大的工具，用于创建真正的深度克隆，保留嵌套对象和循环引用的完整性，而不需要额外的逻辑或解决方法。另外，它可以在现代环境中使用，包括 Web Workers。

1.简单对象克隆：基础知识

• 使用 {...obj}（浅复制）

  const original = { name: "Alice", details: { age: 25 } };
  const shallowCopy = { ...original };

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

• 发生了什么事？

  • 扩展运算符 {...obj} 仅创建浅拷贝。详细信息对象没有被深度克隆，因此对shallowCopy.details的更改也会影响原始详细信息。
  • 使用 JSON.stringify() JSON.parse() （深复制）

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

• 发生了什么事？

  • 此方法创建深层复制，但有局限性：它无法处理函数、未定义或循环引用。
  • 使用 StructuredClone()（深复制）

  const original = { name: "Alice", details: { age: 25 } };
  const clone = structuredClone(original);

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

• 发生了什么事？
  • StructuredClone() 创建深度克隆，保留结构，不受 JSON.stringify() 的任何限制，并处理复杂的数据类型，如循环引用和未定义。

2.处理循环引用：一个挑战

• 带有 {...obj} 的循环引用

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• 发生了什么事？

  • {...obj} 无法处理循环引用，导致错误。
  • 使用 JSON.stringify() 进行循环引用

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: Converting circular structure to JSON

• 发生了什么事？

  • JSON.stringify() 也会因循环引用而失败，引发错误。
  • 使用 StructuredClone() 进行循环引用

  const original = { name: "Alice" };
  original.self = original;

  const clone = structuredClone(original);

  console.log(clone !== original); // true
  console.log(clone.self === clone); // true

• 发生了什么事？
  • StructuredClone() 无缝处理循环引用，创建正确的深度克隆而不会出现错误。

3.使用函数和未定义进行克隆：另一个测试

• 使用 {...obj}

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const shallowCopy = { ...original };

  console.log(shallowCopy.greet()); // "Hello!"
  console.log(shallowCopy.value); // undefined

• 发生了什么事？

  • {...obj} 复制函数并按预期未定义，但只是浅层。
  • 使用 JSON.stringify()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const jsonCopy = JSON.parse(JSON.stringify(original));

  console.log(jsonCopy.greet); // undefined
  console.log(jsonCopy.value); // undefined

• 发生了什么事？

  • JSON.stringify() 无法序列化函数或未定义，导致它们在克隆对象中丢失。
  • 使用 StructuredClone()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const clone = structuredClone(original);

  console.log(clone.greet); // undefined
  console.log(clone.value); // undefined

• 发生了什么事？
  • StructuredClone() 也不会克隆函数，但会保留未定义的值，这使得它对于复杂对象比 JSON.stringify() 更可靠。

4.速度和效率：性能说明

• 大数据的效率

  const largeArray = new Array(1e6).fill({ key: "value" });

  console.time("structuredClone");
  const clone = structuredClone(largeArray);
  console.timeEnd("structuredClone");

  console.time("JSON.stringify   JSON.parse");
  const jsonCopy = JSON.parse(JSON.stringify(largeArray));
  console.timeEnd("JSON.stringify   JSON.parse");

• 发生了什么事？
  • 对于大型、复杂的数据， StructuredClone() 通常比 JSON.stringify() JSON.parse() 更快，并且避免了序列化和反序列化的陷阱。

5.结论：为什么 StructuredClone() 是未来

• 可靠性：更可预测地处理循环引用、函数和未定义值。
• 效率：对大型数据集更快地执行深度克隆，并且不需要解决方法。
• 简单性：一种统治所有这些的方法 - 不再需要在 {...obj}、JSON.stringify() 或自定义深度克隆函数之间进行选择。