ArrayBuffer与TypedArray二进制处理解析

JavaScript中的ArrayBuffer与TypedArray构成了一套强大而灵活的二进制数据处理机制：ArrayBuffer作为底层固定长度的原始内存缓冲区，本身不可读写，必须通过TypedArray（如Uint8Array、Int32Array等）或DataView这类视图进行操作；多个视图可共享同一缓冲区，带来高效复用的同时也需警惕数据相互覆盖的风险；它们广泛应用于文件解析、WebSocket通信、图像处理及WebAssembly交互等场景，配合TextEncoder/TextDecoder可轻松实现字符串与UTF-8字节流的双向转换，而DataView则在需要精确控制字节序（如网络协议）时成为更安全可靠的选择——掌握这一“缓冲区+视图”的分离设计，是让JavaScript真正具备低级语言般字节级操控能力的关键。

JavaScript 中的 ArrayBuffer 和 TypedArray 提供了处理二进制数据的能力，常用于文件操作、网络通信（如 WebSocket）、图像处理或与 WebAssembly 交互等场景。它们让 JS 能像低级语言一样读写内存中的原始字节。

理解 ArrayBuffer

ArrayBuffer 是一个通用的固定长度的二进制数据缓冲区。它本身不能直接读写，必须通过视图（即 TypedArray 或 DataView）来操作。

const buffer = new ArrayBuffer(8);

此时 buffer 就是一块空的二进制内存空间，无法直接访问内容。

使用 TypedArray 操作数据

TypedArray 是 ArrayBuffer 的“视图”，提供特定类型的数组接口来读写缓冲区中的数据。常见的类型包括：

• Int8Array：8 位有符号整数
• Uint8Array：8 位无符号整数
• Int16Array：16 位有符号整数
• Uint16Array：16 位无符号整数
• Int32Array：32 位有符号整数
• Float32Array：32 位浮点数
• Float64Array：64 位浮点数

用 Uint8Array 操作上面的 buffer：

const view = new Uint8Array(buffer);
view[0] = 42;
view[1] = 255;

这时前两个字节被设置为 42 和 255（每个元素占 1 字节）。

也可以用 Int32Array 来解释同一块内存（每项占 4 字节）：

const intView = new Int32Array(buffer);
intView[0] = 1; // 写入一个 32 位整数

注意：多个视图可以共享同一个 ArrayBuffer，修改一个会影响其他视图。

实际应用示例

常见用途是处理从网络或文件读取的原始数据。比如从 Blob 创建 ArrayBuffer：

file.arrayBuffer().then(buffer => {
  const bytes = new Uint8Array(buffer);
  // 处理字节流，比如解析文件头
  if (bytes[0] === 0x89 && bytes[1] === 0x50) {
    console.log("这是一个 PNG 文件");
  }
});

又或者将字符串转为 UTF-8 字节：

function stringToBytes(str) {
  const encoder = new TextEncoder();
  return encoder.encode(str); // 返回 Uint8Array
}

再反过来解析字节为字符串：

function bytesToString(bytes) {
  const decoder = new TextDecoder('utf-8');
  return decoder.decode(bytes);
}

注意字节序问题

如果需要精确控制多字节数据的读写顺序（比如网络协议），建议使用 DataView，它允许指定字节序（小端或大端）：

const dataView = new DataView(buffer);
dataView.setUint16(0, 256, true); // 在偏移 0 处写入 16 位整数，true 表示小端

const value = dataView.getUint16(0, true); // 读取

基本上就这些。ArrayBuffer 配合 TypedArray 让 JavaScript 能高效安全地处理底层二进制数据，关键是理解“缓冲区”和“视图”的分离设计。不复杂但容易忽略细节，比如共享内存带来的副作用。

到这里，我们也就讲完了《ArrayBuffer与TypedArray二进制处理解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！