当前位置：首页 > 文章列表 > 文章 > 前端 > ArrayBuffer与TypedArray详解教程

ArrayBuffer与TypedArray详解教程

2025-10-12 22:36:39 0浏览收藏

本文深入解析 JavaScript 中 `ArrayBuffer` 和 `TypedArray` 的使用方法，这两个对象为 JavaScript 提供了处理二进制数据的强大能力。`ArrayBuffer` 作为固定长度的原始二进制数据缓冲区，自身无法直接读写，必须借助 `TypedArray` 或 `DataView` 等视图对象进行操作。`TypedArray` 提供了诸如 `Uint8Array`、`Int32Array` 等特定类型的数据视图，能够方便地读写 `ArrayBuffer` 中的数据，但需注意多个视图共享同一缓冲区可能带来的相互影响。文章还结合实际应用场景，例如文件操作、网络通信和图像处理，展示了如何利用它们处理原始字节流，并强调了字节序问题以及 `DataView` 在精确控制方面的优势。掌握 `ArrayBuffer` 和 `TypedArray` 的使用，能帮助开发者在 JavaScript 中高效安全地处理底层二进制数据。

ArrayBuffer是固定长度的二进制数据缓冲区，需通过TypedArray或DataView等视图操作；TypedArray提供特定类型的数据视图，如Uint8Array、Int32Array等，可读写ArrayBuffer中的数据，多个视图共享同一缓冲区会相互影响；常用于文件操作、网络通信、图像处理等场景，处理原始字节流时需注意字节序问题，推荐使用DataView进行精确控制。

如何利用JavaScript的ArrayBuffer和TypedArray处理二进制数据？

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

理解 ArrayBuffer

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

例如，创建一个 8 字节的缓冲区：

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);
}