再见`JSON.stringify()`和`{...obj}`，你好`structedClone()`！-js教程-PHP中文网

再见`JSON.stringify()`和`{...obj}`，你好`structedClone()`！

WBOY

发布： 2024-09-04 18:32:02

原创

578 人浏览过

Bye-Bye `JSON.stringify()` and `{...obj}`, Hello `structuredClone()`!

什么是 StructuredClone()？
- StructuredClone() 是 2022 年引入的全局函数，可实现 JavaScript 对象的深度克隆。与 JSON.stringify() 和 JSON.parse() 等传统方法难以应对复杂的结构和循环引用不同，structuralClone() 可以轻松应对这些挑战。
为什么它会改变游戏规则？
- 它是一个强大的工具，用于创建真正的深度克隆，保留嵌套对象和循环引用的完整性，而不需要额外的逻辑或解决方法。另外，它可以在现代环境中使用，包括 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");

登录后复制