UD5工具箱
步骤 1 创建第一个 Symbol
进入工具页面后，在「Symbol 创建器」区域的输入框中输入一个描述文本，例如 "myUniqueKey"，然后点击「创建 Symbol」按钮。系统会立即生成一个新的 Symbol 实例，并在下方的属性面板中展示其详细信息。如果您不输入任何描述直接创建，系统同样会生成一个有效的 Symbol，其 description 属性值将为 undefined。
关注重点：查看 typeof 字段，确认其返回值为 "symbol"（全小写字符串）；查看 description 字段，确认显示您输入的描述文本。注意观察 Symbol 的字符串表示形式——当您在控制台打印时，它会显示为 Symbol(myUniqueKey) 的格式。尝试在浏览器开发者工具中执行 Symbol("test")，对比工具中的输出结果，加深理解。同时注意工具页面的提示：new Symbol() 会抛出错误，这是原始值类型的共同特征。
步骤 2 创建同名 Symbol 并对比唯一性
在创建器中再次输入相同的描述 "myUniqueKey"，创建第二个 Symbol。然后进入「唯一性对比」区域，将第一个创建的 Symbol 和第二个 Symbol 分别选入对比槽位，点击「对比」按钮。
关注重点：尽管两个 Symbol 的描述完全相同，对比结果将显示它们不相等（=== 返回 false）。这正是 Symbol 作为唯一标识符的核心特性。然后，尝试创建一个描述为 "differentKey" 的 Symbol，与第一个 Symbol 进行对比——结果同样是不相等。接下来，将同一个 Symbol 与自身进行对比——结果为 true。通过这三组对比实验，您将彻底理解 Symbol 的唯一性机制：每个 Symbol() 调用都创建一个全新的值，无论参数如何。
步骤 3 体验 Symbol.for() 全局注册表
在「全局注册表」面板中，输入键值 "sharedKey"，点击「通过 Symbol.for() 创建」。随后，再次使用相同的键值 "sharedKey" 创建第二个全局 Symbol。将两个结果进行对比。
关注重点：对比两个通过 Symbol.for("sharedKey") 创建的 Symbol，它们将显示为相等（=== 返回 true）。这是因为 Symbol.for() 会先在全局注册表中查找已存在的同名 Symbol，如果找到则返回它，只有不存在时才会创建新的。这与直接调用 Symbol() 的行为形成鲜明对比。然后尝试使用 Symbol.keyFor() 方法，传入一个通过 Symbol.for() 创建的 Symbol，观察返回的键值；再传入一个普通 Symbol，观察返回 undefined。这组实验揭示了全局 Symbol 的注册与检索机制。
步骤 4 探索对象属性键与枚举行为
进入「对象属性键演示」区域，创建一个包含字符串键和 Symbol 键的复合对象。然后依次使用 Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 检查该对象。
关注重点：Object.keys() 和 for...in 循环只返回字符串键，Symbol 键会被完全忽略。Object.getOwnPropertyNames() 同样只返回字符串键。而 Object.getOwnPropertySymbols() 专门返回 Symbol 键。Reflect.ownKeys() 则会同时返回字符串键和 Symbol 键。这一行为说明 Symbol 属性被设计为「不可枚举」，适合用于不影响常规遍历的内部协议标记。在实际框架开发中，这种特性被广泛用于存储内部状态和元数据。
步骤 5 了解 JSON 序列化行为
在演示区域中，创建一个包含 Symbol 属性的对象，然后使用「JSON 序列化」按钮对其执行 JSON.stringify()。观察序列化后的 JSON 字符串中是否包含 Symbol 属性。随后，尝试使用 JSON.stringify() 处理单独的 Symbol 值。
关注重点：Symbol 作为属性值时会被直接忽略，Symbol 作为属性键时整个键值对也会被忽略。直接对 Symbol 调用 JSON.stringify() 会返回 undefined。这是因为 JSON 规范不支持 Symbol 类型。在实际开发中，如果您需要将包含 Symbol 属性的对象发送到后端或进行持久化存储，需要提前将 Symbol 键转换为字符串键，或者使用 toJSON() 方法自定义序列化逻辑。工具还展示了如何使用 replacer 函数在序列化过程中捕获 Symbol 数据。
步骤 6 探索著名 Symbol（Well-Known Symbols）
进入「著名 Symbol 探索」区域，从 Symbol.iterator 开始。工具提供了一个可交互的代码编辑器，您可以为一个自定义对象实现迭代器协议：在对象上定义 [Symbol.iterator] 方法，使其支持 for...of 循环。然后依次探索 Symbol.toStringTag（修改 Object.prototype.toString() 的输出）、Symbol.hasInstance（自定义 instanceof 行为）、Symbol.toPrimitive（控制隐式类型转换）等。
关注重点：著名 Symbol 是 JavaScript 实现元编程的核心机制。通过为对象定义这些 Symbol 方法，您可以自定义对象在各种内置操作中的行为。例如，定义 [Symbol.iterator] 可以让自定义集合支持 for...of 循环和展开运算符；定义 [Symbol.toPrimitive] 可以控制对象在数学运算或字符串拼接时的转换结果。掌握这些是理解现代 JavaScript 框架源码的关键。
步骤 7 深入 Symbol 属性复制与克隆
在演示区域中，创建一个包含多个 Symbol 属性的对象，然后尝试使用 Object.assign() 和展开运算符 {...obj} 进行复制。观察复制结果中是否保留了 Symbol 属性。随后，使用工具提供的「完整克隆」功能，对比两种复制方式的差异。
关注重点：Object.assign() 和展开运算符只会复制字符串键，Symbol 属性会被遗漏。要正确复制包含 Symbol 属性的对象，需要使用 Object.getOwnPropertySymbols() 遍历 Symbol 键并逐个赋值，或者使用 Reflect API。在实际项目中，如果您使用 Redux 或 Vuex 等状态管理库，且状态对象中包含 Symbol 属性，务必注意复制操作中的属性丢失问题。这在深拷贝场景中尤为重要——structuredClone() 不支持 Symbol 类型，会抛出 DataCloneError。