-
什么是 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");
-
发生什么事了?
- 对于大型、复杂的数据,structuralClone() 通常比 JSON.stringify() + JSON.parse() 更快,并且避免了序列化和反序列化的陷阱。
5.结论:为什么 StructuredClone() 是未来
- 可靠性:更可预测地处理循环引用、函数和未定义值。
- 效率:对大型数据集更快地执行深度克隆,并且不需要解决方法。
- 简单性:一种统治所有这些的方法 - 不再需要在 {...obj}、JSON.stringify() 或自定义深度克隆函数之间进行选择。
以上是再见`JSON.stringify()`和`{...obj}`,你好`structedClone()`!的详细内容。更多信息请关注PHP中文网其他相关文章!

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

Atom编辑器mac版下载
最流行的的开源编辑器

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。