如何利用JavaScript操作二进制数据（如ArrayBuffer和Blob）？

JavaScript通过ArrayBuffer、TypedArray、DataView和Blob处理二进制数据。1. ArrayBuffer是固定长度的二进制缓冲区，需通过TypedArray或DataView操作；2. TypedArray如Uint8Array提供类型化视图，可直接读写数值；3. DataView支持指定字节序（小端或大端），适用于跨平台协议解析；4. Blob表示不可变的二进制大对象，常用于文件下载和上传；5. 可通过Uint8Array将ArrayBuffer转为Blob，Blob也可通过arrayBuffer()方法异步转回ArrayBuffer。掌握这些类型可有效处理文件操作、网络传输和多媒体数据。

JavaScript 提供了多种方式来处理二进制数据，尤其是在处理文件、网络传输、图像音频操作或与 Web API 交互时非常有用。核心的类型包括 ArrayBuffer、TypedArray（如 Uint8Array）、DataView 和 Blob。下面介绍如何使用它们进行常见操作。

ArrayBuffer 与 TypedArray：读写原始二进制数据

ArrayBuffer 表示一段固定长度的二进制数据缓冲区。它本身不能直接读写，需要通过 TypedArray 或 DataView 来操作。

let buffer = new ArrayBuffer(8); // 8 字节缓冲区 let view = new Uint8Array(buffer); // 使用 8 位无符号整数视图 view[0] = 255; view[1] = 10;

let intView = new Int32Array(buffer); // 按 32 位整数解释 console.log(intView[0]); // 输出: 660607 (由前4个字节组合而来)

DataView：灵活控制字节序

当你需要精确控制字节顺序（如处理网络协议或文件格式），DataView 更适合，因为它允许指定 littleEndian 参数。

let buffer = new ArrayBuffer(4); let dataView = new DataView(buffer); dataView.setUint16(0, 0x1234, true); // 小端模式写入 let value = dataView.getUint16(0, true); // 小端读取，得到 0x1234

Blob：表示不可变的二进制大对象

Blob 常用于文件操作，比如上传下载、生成文件链接等。它可以包含 ArrayBuffers、字符串或其他 Blob。

Paraflow

AI产品设计智能体

下载

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

let blob = new Blob(["Hello", Uint8Array.from([1, 2, 3])], { type: "application/octet-stream" }); let url = URL.createObjectURL(blob); let a = document.createElement("a"); a.href = url; a.download = "data.bin"; a.click(); URL.revokeObjectURL(url); // 清理

ArrayBuffer 与 Blob 的相互转换

在实际开发中，经常需要在这两种格式之间转换。

let buffer = new ArrayBuffer(8); let blob = new Blob([new Uint8Array(buffer)], { type: "application/octet-stream" });

blob.arrayBuffer().then(function(buffer) { let bytes = new Uint8Array(buffer); console.log(bytes); });

基本上就这些。掌握这些基础操作后，你就能处理图片压缩、WebSocket 二进制消息、File API 文件读取等场景中的二进制数据了。关键是理解 ArrayBuffer 是“内存块”，而 TypedArray/DataView 是“查看方式”，Blob 是“文件式封装”。