ArrayBuffer用于底层内存操作,需通过视图读写,适合精细控制;Blob为不可变二进制对象,常用于文件传输。1. ArrayBuffer是固定长度的二进制缓冲区,通过TypedArray或DataView访问数据,适用于WebAssembly、WebSocket等场景。2. Blob表示不可变的原始二进制数据,可指定MIME类型,常用于文件上传下载、canvas导出图片。3. 两者可相互转换:ArrayBuffer转Blob使用new Blob([buffer]),Blob转ArrayBuffer调用blob.arrayBuffer()异步方法。4. 大文件处理推荐Blob以减少内存占用,逐字节操作则转为ArrayBuffer处理。合理结合二者可高效应对不同二进制需求。

JavaScript 中处理二进制数据主要依赖 ArrayBuffer 和 Blob 两种对象。它们虽然都用于操作原始二进制内容,但用途和使用场景不同。下面详细介绍它们的特性、区别以及常见用法。
ArrayBuffer:底层二进制数据容器
ArrayBuffer 是一个通用的固定长度的二进制数据缓冲区,类似于数组,但它不能直接操作其中的数据。它只是一个内存区域的抽象表示。
要读写 ArrayBuffer 中的内容,需要借助视图(View),如:
- Uint8Array:按字节(8位无符号整数)访问
- Int16Array:按16位有符号整数访问
- Float32Array:按32位浮点数访问
- DataView:提供更灵活的读写方式,可控制字节序
示例:创建并操作 ArrayBuffer
立即学习“Java免费学习笔记(深入)”;
const buffer = new ArrayBuffer(8);const view = new Uint8Array(buffer);
view[0] = 42;
console.log(view[0]); // 输出 42
ArrayBuffer 常用于 WebAssembly、WebSocket、Canvas 图像处理、文件解析等需要精细控制内存的场景。
Blob:不可变的二进制对象,用于文件操作
Blob(Binary Large Object)表示一个不可变的、原始的二进制数据对象。它可以存储任意类型的数据,常用于文件上传、下载、媒体记录等。
Blob 可以通过字符串、ArrayBuffer、其他 Blob 等构造,并支持指定 MIME 类型。
示例:创建 Blob 对象
const data = new Uint8Array([72, 101, 108, 108, 111]); // "Hello"const blob = new Blob([data], { type: 'text/plain' });
console.log(blob.size); // 5
console.log(blob.type); // text/plain
Blob 常见用途包括:
- 将 canvas 导出为图片 Blob:
canvas.toBlob(callback, 'image/png') - 通过 URL.createObjectURL 创建临时 URL 供 或
使用
- 与 File API 结合上传二进制文件
ArrayBuffer 与 Blob 的相互转换
在实际开发中,经常需要在 ArrayBuffer 和 Blob 之间转换。
ArrayBuffer 转 Blob:
const buffer = new ArrayBuffer(8);const blob = new Blob([buffer], { type: 'application/octet-stream' });
Blob 转 ArrayBuffer:
blob.arrayBuffer().then(buffer => {// buffer 是 ArrayBuffer 类型
const view = new Uint8Array(buffer);
console.log(view);
});
注意:Blob.prototype.arrayBuffer() 返回 Promise,是异步操作。
使用场景对比
理解两者差异有助于选择合适工具:
- ArrayBuffer:适合需要精确控制内存、频繁读写的场景,如音视频编解码、网络协议解析
- Blob:适合文件级操作,如上传、下载、保存到磁盘、浏览器间传递
- 大文件处理推荐使用 Blob,避免将整个文件加载进内存
- 需要逐字节操作时,先转为 ArrayBuffer 配合 TypedArray 或 DataView
基本上就这些。ArrayBuffer 提供底层能力,Blob 更贴近文件和网络传输。合理结合使用,能高效处理各类二进制任务。










