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

ArrayBuffer是二进制数据存储容器，TypedArray提供类型化视图进行读写。例如new ArrayBuffer(8)创建8字节缓冲区，通过Uint8Array或Float32Array等视图操作数据，实现高效处理图像、音频、文件等二进制内容，常用于WebSocket、File API和Canvas场景。

JavaScript中的ArrayBuffer和TypedArray是处理二进制数据的核心工具，尤其适用于操作图像、音频、网络协议或文件等底层数据。它们提供了对原始二进制缓冲区的高效访问和控制。

ArrayBuffer：二进制数据的容器

ArrayBuffer 是一个通用的固定长度的二进制数据缓冲区。它本身不能直接读写，只是一个“数据块”的占位符。要操作其中的数据，必须通过视图（如 TypedArray 或 DataView）来访问。

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

let buffer = new ArrayBuffer(8);

立即学习“Java免费学习笔记（深入）”；

此时 buffer 不包含可读写的方法，只能检测其大小：

console.log(buffer.byteLength); // 8

TypedArray：ArrayBuffer 的类型化视图

TypedArray 提供了带类型的视角来读写 ArrayBuffer 中的数据。常见的类型包括：

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

这些数组可以直接绑定到 ArrayBuffer 上，按指定格式解释二进制内容。

宣小二

宣小二：媒体发稿平台，自媒体发稿平台，短视频矩阵发布平台，基于AI驱动的企业自助式投放平台。

21

查看详情

示例：使用 Uint8Array 写入数据

let buffer = new ArrayBuffer(8);
let view = new Uint8Array(buffer);
view[0] = 42;
view[1] = 255;

此时 buffer 中前两个字节被设置为 42 和 255（最大值），其他为 0。

也可以用 Float32Array 从同一 buffer 读取浮点数：

let floatView = new Float32Array(buffer);
console.log(floatView[0]); // 将前4个字节解释为一个 float

注意：不同 TypedArray 视图共享同一块内存，只是解释方式不同。

实际应用场景

这类结构广泛用于：

• WebSocket 通信：接收 binaryType 设置为 'arraybuffer' 的消息
• File API：读取用户上传的文件内容（通过 FileReader.readAsArrayBuffer）
• Canvas 图像处理：getImageData().data 返回 Uint8ClampedArray
• WebAssembly：与 wasm 模块共享内存

例如从 Blob 创建 ArrayBuffer：

fileReader.onload = function(e) {
  const arrayBuffer = e.target.result;
  const uint8View = new Uint8Array(arrayBuffer);
  // 处理每个字节
};
fileReader.readAsArrayBuffer(file);

基本上就这些。ArrayBuffer 提供存储，TypedArray 提供访问方式，两者结合让 JavaScript 能高效处理二进制数据。不复杂但容易忽略细节，比如字节序和类型匹配。

以上就是JavaScript中的ArrayBuffer和TypedArray如何用于处理二进制数据？的详细内容，更多请关注php中文网其它相关文章！