UD5工具箱
步骤 1 选择类型并创建数组
进入工具页面后，在「类型选择」区域从 11 种 TypedArray 类型中选择 Uint8Array（8位无符号整数，范围 0-255）。这是一个最简单直观的类型，适合作为学习起点。然后将元素数量设置为 8，点击「创建数组」按钮。工具会在数据面板中显示一个包含 8 个元素的表格，所有元素初始值为 0。
关注重点：观察页面上显示的 ArrayBuffer 总字节数——8 个 Uint8 元素占用 8 个字节（8 x 1 = 8），这是因为 Uint8Array 每个元素恰好占 1 个字节。对比一下：如果切换到 Int32Array 并保持 8 个元素，总字节数会变为 32（8 x 4 = 32），因为 Int32 每个元素占 4 个字节。这种「相同元素数、不同字节占用」的对比能帮助您建立 TypedArray 内存布局的直觉。
步骤 2 使用快速填充观察数据表示
点击「递增序列」快速填充按钮，观察数据面板的变化。元素将被依次填充为 0, 1, 2, 3, 4, 5, 6, 7。然后切换到「四种数据视图」区域，同时查看十进制、十六进制、二进制和位模式四种表示。
关注重点：在十进制列中，您看到的是 0-7 的简单数字；在十六进制列中，它们对应 0x00 到 0x07；在二进制列中，它们分别对应 00000000 到 00000111。位模式视图对于 Uint8 类型会直接显示完整的 8 位二进制，这是最底层的数据表示。接下来，点击「填最大」按钮——所有元素将变为 255（Uint8 的最大值），十六进制全部变为 0xFF，二进制全部变为 11111111。这种多视图同步更新的体验能帮助您在不同进制表示之间建立快速转换的直觉。
步骤 3 探索 ArrayBuffer 字节视图
在「ArrayBuffer 字节视图」区域，您会看到刚才创建的 Uint8Array 的底层字节内容。由于 Uint8Array 的每个元素恰好对应一个字节，字节视图中的值与数据面板中的值完全一致——每个字节的十六进制和十进制表示都与对应元素相同。
关注重点：现在，将类型切换为 Int16Array（16位有符号整数），保持 8 个元素，然后再次点击「递增序列」。观察字节视图的变化——每个元素现在占用 2 个字节，字节视图中的字节数变为 16。特别注意元素值 256（0x0100）在字节视图中如何被存储为两个字节 00 01（小端序：低字节在前）。这种从 TypedArray 到字节级视图的对照，能帮助您理解多字节类型的内存布局。
步骤 4 体验 Uint8ClampedArray 的钳制行为
选择 Uint8ClampedArray 类型，创建 8 个元素的数组。然后在数据面板中手动将某个元素的值修改为 300（超出 0-255 范围）。观察工具的处理方式：值不会存储为 300，而是被钳制（clamp）为 255。再尝试输入负数 -50，值会被钳制为 0。
关注重点：对比 Uint8Array 的行为——如果在 Uint8Array 中输入 300，由于无符号 8 位整数的溢出机制，300 会回绕为 44（300 - 256 = 44），而非钳制为 255。这种差异正是 Uint8ClampedArray 专为 Canvas 图像数据设计的原因——Canvas 的 RGBA 像素值必须在 0-255 范围内，钳制行为确保了非法像素值不会产生颜色溢出。您可以切换到 Uint8Array 输入同样的值来对比两种行为的差异。
步骤 5 使用 DataView 交叉解读数据
选择 Float32Array 类型，创建 4 个元素，使用「递增序列」填充。然后进入「DataView 交叉解读」区域。使用 DataView 的 getUint8 方法从偏移量 0 开始逐字节读取，观察 Float32 值 0.0 在内存中的 4 个字节内容。接着使用 getInt32 方法从偏移量 0 读取 4 字节，对比 TypedArray 的读取结果。
关注重点：尝试切换 DataView 的字节序设置——在「小端（Little-Endian）」模式下，getInt32(0, false)（大端）和 getInt32(0, true)（小端）会返回不同的值。将大端读取的结果与 TypedArray 的值对比，您会发现 TypedArray 始终使用主机字节序（通常为小端），而 DataView 可以灵活切换。这种差异在网络协议解析中尤为重要——网络传输通常使用大端字节序，而本地存储使用小端字节序，开发者需要在读取时指定正确的字节序。
步骤 6 体验克隆视图与共享内存
选择任意 TypedArray 类型（推荐 Int32Array），创建包含 4 个元素的数组并填充递增序列。然后点击「克隆视图」批量操作按钮。工具会创建一个引用同一 ArrayBuffer 的新 TypedArray 视图。现在，在原始视图中修改第一个元素的值（例如改为 999），然后观察克隆视图中对应位置的值。
关注重点：克隆视图的第一个元素也会变为 999！这证明了两个 TypedArray 视图共享同一块 ArrayBuffer 内存。通过字节视图可以进一步验证：两个视图的字节内容完全一致。如果您创建的克隆视图与原始视图类型不同（例如原始为 Int32Array，克隆为 Uint8Array），则同一块内存会被以不同的方式解读——这就是「同一块内存、不同视图」的核心概念。尝试用 Uint8Array 视图去读取 Int32Array 写入的数据，观察值的差异，这将帮助您深刻理解类型化数组的本质。
步骤 7 探索浮点数特殊值与统计面板
选择 Float32Array 类型，创建 6 个元素。在数据面板中依次输入以下特殊值：NaN、Infinity、-Infinity、-0、0、1.5。观察统计面板中的最小值、最大值和总和如何响应这些特殊值。
关注重点：当数组中包含 NaN 时，统计面板的最小值和最大值通常会显示 NaN（因为 NaN 与任何值的比较都返回 false）。总和也可能显示为 NaN，因为任何与 NaN 的加法运算结果都是 NaN。再观察位模式视图——NaN 的指数位全为 1 且尾数位不为 0，Infinity 的指数位全为 1 且尾数位为 0，-0 的所有位均为 0 但符号位为 1。这些位级细节是理解浮点数特殊值行为的关键，也是在实际开发中调试浮点数相关 bug 的重要知识基础。