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
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 更贴近文件和网络传输。合理结合使用，能高效处理各类二进制任务。
