UD5工具箱
快速开始
打开工具页面后，你会看到一个分为左右两栏的界面。左栏是对象编辑区域，右栏是三种拷贝方式的输出对比区域。默认情况下，工具会加载一个简单的示例对象，你可以在右栏立即看到三种方式的拷贝结果。
编辑测试对象
在左侧编辑区域中，你可以修改 JSON 对象的内容。工具支持标准 JSON 格式，包括嵌套对象、数组、字符串、数字、布尔值等类型。修改完成后，点击"执行对比"按钮或等待自动刷新，右栏会立即更新三种拷贝方式的结果。
理解三种拷贝方式
展开运算符 (...)：这是最简单的浅拷贝方式。它只复制对象的第一层属性。对于嵌套的对象或数组，复制的是引用而非值本身。在结果面板中，你可以看到修改嵌套属性后原始对象也被影响的情况。
JSON.parse(JSON.stringify())：这是传统的深拷贝方案。它先将对象序列化为 JSON 字符串，再解析回对象。这种方式可以实现真正的深拷贝，但无法处理循环引用、undefined、Function、Symbol、Date 等类型。在结果面板中，注意观察这些类型的丢失或转换情况。
structuredClone()：这是推荐的深拷贝方式。它使用结构化克隆算法，支持几乎所有 JavaScript 数据类型，能够正确处理循环引用。在结果面板中，可以看到它最完整地保留了原始对象的所有信息。
使用预设场景
点击页面顶部的场景选项卡可以快速切换不同的测试场景。每个场景都针对特定的问题设计，例如"循环引用"场景展示了当对象存在相互引用时三种方式的不同表现。建议依次尝试所有预设场景，全面了解各种边界情况。
性能对比
切换到"性能测试"选项卡，工具会针对当前对象自动执行基准测试。测试会分别运行三种方式各一千次，计算平均耗时并以柱状图展示。请注意，性能结果可能因浏览器和设备不同而有所差异，结果仅供参考。
最佳实践建议
在实际项目中，如果需要深拷贝一个不包含循环引用和特殊类型的简单对象，JSON 方式仍然是一个不错的选择，因为它的兼容性最好。但如果数据中可能包含 Date、RegExp、Map、Set 等类型，或者可能存在循环引用，强烈建议使用 structuredClone。展开运算符仅适用于需要浅拷贝的场景，切勿误用为深拷贝。