如何在javascript中操作二进制数据_ArrayBuffer和Blob有什么区别？

ArrayBuffer是内存中可读写的原始二进制缓冲区，需通过视图操作；Blob是浏览器中不可变、面向I/O的二进制对象，需异步提取内容，二者分工明确、常协作使用。

在 JavaScript 中操作二进制数据，核心是理解 ArrayBuffer 和 Blob 的定位与分工：前者是内存中的**原始二进制缓冲区**，用于计算和结构化读写；后者是浏览器环境下的**不可变二进制对象**，专为文件 I/O、网络传输等场景设计。它们不互换，但常配合使用。

ArrayBuffer：内存里的“裸数据块”

ArrayBuffer 是一段固定长度的原始二进制内存，本身不能直接读写。它必须配合视图（如 Uint8Array、DataView）才能操作内容。

• 创建后长度不可变，适合做底层数据容器（如解码图像头、拼接音频帧）
• 可被多个视图同时引用，共享同一段内存 —— 修改一个视图会影响其他视图
• 可通过 slice() 创建新缓冲区（浅拷贝），或用 ArrayBuffer.transfer()（实验性）转移所有权
• 示例：读取 PNG 文件头（前 8 字节）

const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);
view.set([137, 80, 78, 71, 13, 10, 26, 10]); // PNG signature

Blob：面向浏览器 I/O 的二进制载体

Blob 表示不可变、类文件的二进制数据，不直接暴露内存地址，也不提供字节级操作接口。它的设计目标是安全、懒加载、适合大文件。

• 构造时可以传入 ArrayBuffer、TypedArray、String 或其他 Blob，自动处理编码（如字符串默认 UTF-8）
• 通过 blob.arrayBuffer()（返回 Promise）可异步转为 ArrayBuffer 进行解析
• 常用在 URL.createObjectURL()、fetch() 请求体、FileReader 等 API 中
• 不会因 JS 堆内存压力被回收 —— 浏览器按需管理其底层存储

关键区别一目了然

可变性：ArrayBuffer 可读写（通过视图）；Blob 不可修改，只能创建新 Blob。

访问方式：ArrayBuffer 在内存中同步访问；Blob 需异步方法（如 arrayBuffer()、text()、stream()）提取内容。

生命周期：ArrayBuffer 遵循 JS 垃圾回收；Blob 需手动调用 URL.revokeObjectURL() 释放 URL 引用，避免内存泄漏。

适用场景：加密/解密、协议解析、WebAssembly 内存交互 → 用 ArrayBuffer；上传文件、下载资源、渲染图片/视频 → 用 Blob。

如何协作？典型流程

常见需求是「从 Blob 解析二进制结构」或「把处理后的 ArrayBuffer 转成可下载文件」：

• 从 Blob 获取 ArrayBuffer：const buf = await blob.arrayBuffer();
• 处理后生成新 Blob：const newBlob = new Blob([uint8Array], { type: 'image/png' });
• 导出为文件：const url = URL.createObjectURL(newBlob); location.href = url;