UD5工具箱
11 种 TypedArray 类型选择
工具完整覆盖 ECMAScript 标准定义的全部 11 种 TypedArray 类型，包括 Int8Array（8位有符号整数）、Uint8Array（8位无符号整数）、Uint8ClampedArray（8位无符号钳制整数）、Int16Array（16位有符号整数）、Uint16Array（16位无符号整数）、Int32Array（32位有符号整数）、Uint32Array（32位无符号整数）、Float32Array（32位浮点数）、Float64Array（64位双精度浮点数）、BigInt64Array（64位有符号整数）和 BigUint64Array（64位无符号整数）。每种类型都附带清晰的说明文字，解释其位宽、取值范围和典型应用场景。通过下拉菜单或按钮组即可快速切换类型，系统会自动重新分配底层 ArrayBuffer 并更新所有视图。这种一站式类型切换让您无需在不同代码片段之间跳转，即可对比不同数值类型在存储效率、精度和取值范围方面的差异。
元素数配置与数组创建
在选定 TypedArray 类型后，您可以通过滑块或输入框自由配置数组的元素数量（长度）。工具会即时计算并显示底层 ArrayBuffer 的总字节数（例如 10 个 Float32 元素占用 40 字节），帮助您建立「元素数 x 每元素字节数 = 总字节数」的直觉。点击创建按钮后，工具会实例化对应类型的 TypedArray，并在数据面板中以表格形式展示每个元素的索引和当前值。数组创建时默认填充零值，您可以随时通过快速填充功能一键替换为其他初始数据。这一功能让您可以直观地理解 TypedArray 的「固定类型 + 固定长度」特性——创建后类型和长度均不可改变，这与普通 Array 的动态特性有本质区别。
快速填充模式
工具提供四种一键快速填充模式，帮助您快速构造测试数据而无需手动逐个输入。零值填充将所有元素重置为 0，是调试和重置场景的起点；递增序列按 0, 1, 2, 3... 的顺序填充，便于观察索引与值的对应关系以及类型范围边界；最大值填充将所有元素设为该类型的最大可表示值（如 Uint8 的 255、Int32 的 2147483647），用于测试边界行为和溢出处理；随机填充在类型的合法范围内生成随机值，模拟真实场景中的不确定数据输入。每种填充模式都会立即触发所有视图的更新，让您同步观察不同数值在十进制、十六进制、二进制和位模式下的表现。对于 Uint8ClampedArray，随机填充还会展示钳制行为——超出 0-255 范围的值会被自动截断。
四种数据视图
本工具的核心亮点之一是四种数据视图的同步展示。每个元素同时以四种格式呈现：十进制——最直观的数值表示，适合日常开发和快速验证；十六进制——每两位字符对应一个字节，适合调试内存布局和字节序问题；二进制——以 0/1 序列展示每个比特位的状态，是理解位运算和掩码操作的基础；位模式——以 IEEE 754 标准拆解浮点数的符号位、指数位和尾数位，揭示浮点数的内部编码结构。当您编辑任何一个元素时，其余三种视图会立即同步更新。这种多维同步视图让您能够在不同抽象层次之间自由切换，逐步建立从比特到数值的完整心智模型。特别是位模式视图，它将浮点数拆解为「符号(1bit) | 指数(8/11bits) | 尾数(23/52bits)」的形式，是学习 IEEE 754 编码最直观的辅助工具。
实时统计面板
统计面板实时计算并展示当前 TypedArray 的三项关键指标：最小值（min）——数组中的最小元素，帮助您快速识别数据的下界；最大值（max）——数组中的最大元素，用于确认数据范围是否超出类型限制；总和（sum）——所有元素的累加值，在处理音频采样或传感器数据时尤为有用。统计数据会在每次数据变更后自动刷新，无需手动触发。对于浮点数组，当数据中包含 NaN 时，统计面板会正确显示 NaN（因为任何涉及 NaN 的比较和运算都返回 NaN），这本身就是理解浮点数特殊值行为的一个生动案例。统计面板还附带元素计数和字节占用信息，让您对数据规模一目了然。
ArrayBuffer 字节视图
ArrayBuffer 字节视图提供了对底层二进制数据的逐字节观察能力。每个字节以十六进制和十进制两种格式显示，同时标注其在 ArrayBuffer 中的偏移量（offset）。通过字节视图，您可以清晰地看到：一个 Int32 的 -1 在内存中表示为 FF FF FF FF（四个 0xFF 字节），而一个 Float32 的 1.0 则表示为 3F 80 00 00。视图还会用颜色编码区分不同的逻辑区域，例如当 Array 元素数大于 1 时，每个元素对应的字节区间会以交替背景色标识，帮助您直观理解「一个元素占用多个字节」的概念。字节视图是理解 TypedArray 与 ArrayBuffer 关系的桥梁——它揭示了 TypedArray 只是对连续字节区域的一种「类型化解读」，而非存储了特殊格式的数据。
DataView 交叉解读
DataView 交叉解读功能让您在同一块 ArrayBuffer 上创建 DataView，并使用不同的方法（getInt8、getUint32、getFloat64 等）从指定偏移量读取数据。这是理解「同一块内存、不同解读方式」这一核心概念的最直观途径。例如，当您用 Float32Array 写入 3.14 后，可以用 DataView 的 getUint8 方法逐字节读取，观察浮点数的字节级表示。更进一步，DataView 支持指定字节序（大端或小端），您可以对比同一数据在不同字节序下的读取结果，深刻理解字节序对多字节数据的影响。工具还提供了 TypedArray 视图和 DataView 视图的并排对比，让您亲眼验证：在主机字节序为小端的系统上，DataView 以小端模式读取的结果与 TypedArray 完全一致，而以大端模式读取则会产生完全不同的数值。
批量操作工具箱
工具内置 7 种一键批量操作，让您无需编写任何代码即可对整个 TypedArray 进行变换：清零——将所有元素设为 0，恢复初始状态；递增——按索引值填充递增序列，验证类型范围边界；随机——在合法范围内生成随机数据，模拟真实输入；反转——将元素顺序完全倒转，观察索引与值的关系变化；填最大——所有元素设为类型最大值，测试上界行为；填最小——所有元素设为类型最小值（有符号类型为负值），测试下界行为；克隆视图——创建一个引用同一 ArrayBuffer 的新 TypedArray 视图，展示多视图共享内存的特性。克隆视图功能尤其重要：当您修改克隆视图中的数据时，原始视图会同步变化，反之亦然——这正是 TypedArray 与 ArrayBuffer 之间「视图-底层」关系的最生动演示。