无需登录 数据私有 本地保存

TypedArray 在线探索器 - 创建并操作二进制缓冲区

JavaScript 开发工具 TypedArray 二进制 演示 缓冲区
14
0
0
0
术语 定义 与工具的关系
TypedArray（类型化数组） ECMAScript 2015 引入的一组基于 ArrayBuffer 的视图类型的统称，包括 Int8Array、Uint8Array、Float32Array 等 11 种类型。每种类型规定了元素的数值格式（位宽、有无符号、浮点/整数），底层映射到连续的内存区域。TypedArray 不是直接调用的构造函数，而是通过具体类型名（如 new Float32Array(4)）实例化。其核心特性是：固定类型、固定长度、连续内存、零拷贝访问。 本工具的核心主题。工具提供 11 种 TypedArray 类型的创建、数据填充、多视图展示和批量操作功能，帮助用户直观理解每种类型的特性差异。
ArrayBuffer 表示一段固定长度的原始二进制数据缓冲区，是所有 TypedArray 和 DataView 的底层存储。ArrayBuffer 本身不能直接读写数据——必须通过创建视图（TypedArray 或 DataView）来操作其中的字节。字节数在创建时确定，之后不可更改。分配的内存会被 JavaScript 垃圾回收器自动管理。 工具在创建 TypedArray 时会自动分配对应的 ArrayBuffer，并在字节视图区域逐字节展示其内容。字节视图是理解 ArrayBuffer 作为「裸内存」本质的直观入口。
DataView 一种可以在任意偏移量处读写 ArrayBuffer 中数据的视图类型。与 TypedArray 不同，DataView 不绑定特定的元素类型，可以对同一段内存使用不同方法（getInt8、getUint32、getFloat64 等）进行解读。DataView 还支持在读写多字节值时指定字节序（大端或小端），这在处理跨平台网络协议时至关重要。 工具的 DataView 交叉解读功能允许用户在 TypedArray 写入数据后，用 DataView 从不同偏移量、以不同字节序读取，揭示「同一块内存、多种解读」的核心概念。
字节序（Endianness） 多字节数据在内存中的排列顺序。小端序（Little-Endian）将最低有效字节存储在最低地址，x86/x64 架构和大多数移动设备使用此格式。大端序（Big-Endian）将最高有效字节存储在最低地址，网络传输协议（如 TCP/IP）通常采用大端序。字节序差异是跨平台数据交换中最常见的陷阱之一。 工具的 DataView 功能支持切换大端/小端字节序读取数据，让用户直观对比同一数据在不同字节序下的差异，理解网络协议解析中字节序设置的重要性。
Uint8ClampedArray 一种特殊的 8 位无符号整数 TypedArray，其行为与标准 Uint8Array 的关键区别在于钳制（clamping）机制：写入值超过 255 时自动设为 255，低于 0 时自动设为 0，而非像 Uint8Array 那样进行模 256 回绕。这种行为专为 Canvas 2D 渲染上下文的 getImageData() 和 putImageData() 方法设计，确保像素 RGB 值始终在有效范围内。 工具支持创建 Uint8ClampedArray 并通过手动输入越界值（如 300 或 -50）来演示钳制行为，与 Uint8Array 的回绕行为形成直观对比。
IEEE 754 浮点数 国际标准的浮点数表示格式，JavaScript 的 Number 类型（64位双精度）和 Float32Array/Float64Array 均遵循此标准。32位浮点数由 1 位符号位、8 位指数位和 23 位尾数位组成；64位双精度由 1 位符号位、11 位指数位和 52 位尾数位组成。该标准定义了特殊值 NaN、Infinity、-Infinity 和 -0 的编码方式。 工具的位模式视图将浮点元素的二进制位按 IEEE 754 格式拆解为符号/指数/尾数三部分，帮助用户理解浮点数的内部编码结构和特殊值的位级表示。
零拷贝（Zero-Copy） 指在数据传输过程中不进行额外的内存复制操作。TypedArray 通过直接操作 ArrayBuffer 的底层内存来实现零拷贝访问——当创建多个指向同一 ArrayBuffer 的视图时，它们共享同一块物理内存，修改一个视图的数据会立即反映在所有视图中，无需任何数据复制。 工具的「克隆视图」功能直观演示了零拷贝特性：创建的新视图与原始视图共享 ArrayBuffer，修改任一视图的数据都会同步反映在另一视图和字节视图中。
字节对齐（Byte Alignment） 数据在内存中存储的起始地址必须满足特定的对齐要求。大多数 TypedArray 要求起始偏移量必须是其元素字节大小的整数倍（如 Int32Array 要求 4 字节对齐）。DataView 则无此限制，可以在任意偏移量处读写数据，但跨对齐边界的访问可能导致性能下降。 工具的 DataView 功能允许在任意偏移量处读取数据，用户可以尝试非对齐偏移量来观察 DataView 的灵活性，对比 TypedArray 的对齐限制。
补码（Two's Complement） 计算机中表示有符号整数的标准方式。在补码表示中，正数直接以二进制存储，负数通过「取反加一」得到。例如 Int8 的 -1 存储为 11111111（0xFF），-128 存储为 10000000（0x80）。补码的优势是加法和减法可以使用相同的硬件电路，且零只有一种表示。 工具的二进制视图可以直观展示有符号 TypedArray（如 Int8Array、Int16Array）中负数的补码表示，帮助用户理解负数在二进制层面的真实面貌。
溢出（Overflow） 当数值超出 TypedArray 元素类型的可表示范围时发生的行为。对于整数类型，溢出会导致值「回绕」（wrap around）——例如 Uint8 的 256 会变为 0，257 变为 1，-1 变为 255。对于浮点类型，超出范围的值会变为 Infinity 或 -Infinity。Uint8ClampedArray 是唯一的例外——它使用钳制而非回绕。 工具通过「填最大」和手动输入越界值来演示溢出行为，帮助用户理解不同 TypedArray 类型在边界条件下的差异表现。
WebAssembly（Wasm） 一种基于堆栈式虚拟机的二进制指令格式，旨在为 Web 平台提供接近原生的执行性能。WebAssembly 模块使用线性内存（Linear Memory）存储数据，而 JavaScript 端通过 TypedArray 来读写这块内存。Float32Array、Int32Array 等是 JavaScript 与 WebAssembly 之间交换数据的主要桥梁。 理解 TypedArray 是掌握 WebAssembly 数据交互的前置知识。工具提供的多层视图（TypedArray/ArrayBuffer/DataView）帮助开发者为后续学习 WebAssembly 内存操作打下坚实基础。
NaN（Not a Number） IEEE 754 定义的特殊值，表示未定义或不可表示的数学运算结果。例如 0/0、Math.sqrt(-1)、以及任何涉及 NaN 的运算都返回 NaN。NaN 的独特性质是：NaN !== NaN，即 NaN 与自身不相等。在位模式中，NaN 表示为指数位全 1 且尾数位非零的编码。 工具在 Float32Array/Float64Array 模式下支持输入 NaN，并在统计面板和位模式视图中展示 NaN 的特殊行为——统计值变为 NaN，位模式显示特定的 NaN 编码。
🔧 相关工具