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

TypedArray（类型化数组）是 ECMAScript 2015 引入的一组基于 ArrayBuffer 的数据视图，包括 Int8Array、Uint8Array、Float32Array 等 11 种具体类型。与普通 Array 的核心区别在于三个方面：类型固定——TypedArray 只能存储一种数值类型（如全部是 32 位浮点数），而普通 Array 可以混合存储任意类型的值；长度固定——TypedArray 在创建后长度不可改变，普通 Array 可以动态 push/pop；内存连续——TypedArray 的元素存储在连续的 ArrayBuffer 内存中，可以直接与 C/C++ 等原生代码交互，而普通 Array 的内存布局由 JS 引擎决定，开发者无法直接控制。TypedArray 的这些特性使其在性能上远超普通 Array，尤其适合处理大规模数值计算和二进制数据操作。在本工具中，您可以通过切换类型和元素数来体验 TypedArray 的这些特性。

ArrayBuffer 是一段固定长度的原始二进制数据缓冲区，可以理解为一块「裸内存」。它本身不提供任何数据读写方法——你无法像操作普通数组那样用 buffer[0] 来访问其中的字节。这是因为 ArrayBuffer 的设计目的是作为底层存储容器，而具体的数据解读方式（是作为 8 位整数、16 位浮点数还是其他格式）由上层的视图（TypedArray 或 DataView）决定。这就像同一块内存区域，用 Uint8Array 视图解读得到的是一系列 0-255 的整数，而用 Float32Array 解读则得到浮点数——数据本身没有变化，变化的是解读方式。工具的字节视图区域直观展示了 ArrayBuffer 的原始内容，而 TypedArray 面板和 DataView 面板则展示了同一内容在不同视图下的不同面貌。

两者都是 8 位无符号整数类型（范围 0-255），核心区别在于处理越界值的方式。Uint8Array 使用模 256 回绕——值 256 变为 0，257 变为 1，-1 变为 255。Uint8ClampedArray 使用钳制（clamping）——值超过 255 时设为 255，低于 0 时设为 0。此外，Uint8ClampedArray 在处理小数时使用四舍五入（round half to even），而 Uint8Array 直接截断小数部分。使用场景上，Uint8ClampedArray 专为 Canvas 图像数据设计——当你操作像素的 RGBA 值时，确保结果始终在 0-255 范围内是非常重要的，否则会导致颜色溢出或图像伪影。一般的二进制数据处理（如网络协议、文件格式解析）应使用 Uint8Array。工具支持创建两种类型并输入越界值来对比它们的行为差异。

字节序（Endianness）是指多字节数据在内存中的字节排列顺序。以 32 位整数 0x12345678 为例：小端序（Little-Endian）将最低有效字节 0x78 存储在最低地址，内存中依次为 78 56 34 12；大端序（Big-Endian）将最高有效字节 0x12 存储在最低地址，内存中依次为 12 34 56 78。字节序的重要性体现在跨平台数据交换中——x86/x64 处理器使用小端序，而网络传输协议（TCP/IP）使用大端序（因此大端序也叫「网络字节序」）。如果在解析网络数据时使用了错误的字节序，32 位整数的值会被完全错误地解读。TypedArray 始终使用主机字节序（你的电脑是小端序），而 DataView 允许你指定读取时使用的字节序。工具的 DataView 功能可以直观对比两种字节序的读取结果。

两者都是 ArrayBuffer 的视图，但设计理念和使用场景有本质区别。TypedArray 是面向批量同类型数据的高效视图——它的每个元素类型相同、大小固定，因此引擎可以进行高度优化，性能接近原生数组。但它有对齐限制（起始偏移量必须是元素大小的整数倍），且不能指定字节序。DataView 是面向灵活数据访问的通用视图——它可以在任意偏移量处使用不同方法读写不同类型的值，并且支持指定字节序。代价是性能低于 TypedArray。典型使用场景：当你需要连续处理大量相同类型的数值时（如图像像素、音频采样），使用 TypedArray；当你需要按不同格式解析混合数据（如网络协议包头包含不同类型字段）时，使用 DataView。工具通过并排展示 TypedArray 和 DataView 的读取结果，帮助您直观理解两者的互补关系。

TypedArray 在现代 Web 开发中应用广泛：Canvas 图像处理——getImageData() 返回 Uint8ClampedArray 格式的像素数据，每个元素代表一个 RGBA 分量；WebGL/WebGPU——着色器数据通过 TypedArray 传递给 GPU，包括顶点坐标、颜色值和变换矩阵；WebSocket 二进制通信——设置 binaryType = 'arraybuffer' 后，消息以 ArrayBuffer 形式接收，通过 TypedArray 解析；WebAudio API——音频采样数据以 Float32Array 或 Float64Array 格式处理；WebAssembly 数据交换——JavaScript 通过 TypedArray 读写 Wasm 模块的线性内存；文件格式解析——使用 DataView 逐字段解析二进制文件（如图片、音视频、Protocol Buffers）；加密与哈希——Web Crypto API 返回 ArrayBuffer，需通过 TypedArray 处理。工具的多类型支持和 DataView 功能覆盖了这些场景的数据操作需求。

Float32Array 使用 IEEE 754 单精度浮点数（32位：1位符号 + 8位指数 + 23位尾数），可表示约 7 位有效十进制数字，范围约 ±3.4 x 10^38。Float64Array 使用 IEEE 754 双精度浮点数（64位：1位符号 + 11位指数 + 52位尾数），可表示约 15-16 位有效十进制数字，范围约 ±1.8 x 10^308。精度损失发生在将高精度值存入低精度类型时——例如 0.1 + 0.2 在 Float32 中的表示与 Float64 不同，误差更大。在工具中，您可以创建 Float32Array 并输入 0.1 + 0.2 的结果，观察其十六进制表示和实际存储值与预期值 0.3 之间的微小差异。位模式视图会清晰展示尾数位的截断过程。对于需要高精度计算的场景（如金融数据），应优先使用 Float64Array 或 BigInt64Array。

这是 TypedArray 的核心设计约束——固定长度。TypedArray 在创建时会分配一块精确大小的 ArrayBuffer，之后无法扩容或缩小。这种设计带来了两个关键优势：性能——引擎不需要动态扩容逻辑（普通数组的 push 会触发内存重新分配和元素复制），所有访问都是 O(1) 的直接内存偏移计算；可预测性——内存占用在创建时就确定了，不会出现普通数组突然占用大量内存的情况。如果需要「增长」TypedArray，正确做法是创建一个更大的新 ArrayBuffer，将旧数据复制过去，然后释放旧的引用。在工具中，您可以手动创建一个新数组来模拟这个过程——先创建小数组，再创建大数组并逐个复制元素值。

「克隆视图」并非复制数据，而是创建一个引用同一 ArrayBuffer 的新 TypedArray 视图。这意味着两个视图共享底层内存——修改任一视图中的数据都会立即反映在另一个视图中。这就是「零拷贝」（Zero-Copy）机制。工具演示此功能的目的是揭示 TypedArray 的本质：它只是对 ArrayBuffer 的一种「类型化解读」，而非独立的数据容器。当两个不同类型视图（如 Int32Array 和 Uint8Array）引用同一 ArrayBuffer 时，同一段字节会被以不同方式解读——Int32 视图看到的是 32 位有符号整数，Uint8 视图看到的是 8 位无符号整数。这种能力在实际开发中非常有用：例如，你可以用 Uint8Array 逐字节写入网络协议头，同时用 Uint32Array 读取 32 位字段值。

Float32Array 和 Float64Array 支持以下特殊值：NaN（Not a Number）——表示未定义的数学运算结果（如 0/0），位模式为指数全 1 且尾数非零；Infinity / -Infinity——表示无穷大/无穷小，位模式为指数全 1 且尾数为零；-0——表示负零，与 +0 在值比较时相等（0 === -0 为 true），但在位模式中符号位为 1。这些特殊值在工具中的行为：统计面板中，只要数组包含 NaN，最小值和最大值都会显示 NaN（因为 NaN 与任何值的比较都返回 false）；位模式视图会清晰展示各特殊值的编码差异；十六进制视图可以看到 NaN 的多种编码方式（尾数位不同的 NaN 值都表示 NaN）。理解这些特殊值对编写健壮的数值计算代码至关重要。