ArrayBuffer是内存中可读写的原始二进制缓冲区，需通过视图操作；Blob是浏览器中不可变、面向I/O的二进制对象，需异步提取内容，二者分工明确、常协作使用。
在 JavaScript 中操作二进制数据，核心是理解 ArrayBuffer 和 Blob 的定位与分工：前者是内存中的**原始二进制缓冲区**，用于计算和结构化读写；后者是浏览器环境下的**不可变二进制对象**，专为文件 I/O、网络传输等场景设计。它们不互换，但常配合使用。
ArrayBuffer：内存里的“裸数据块”
ArrayBuffer 是一段固定长度的原始二进制内存，本身不能直接读写。它必须配合视图（如 Uint8Array、DataView）才能操作内容。
- 创建后长度不可变，适合做底层数据容器（如解码图像头、拼接音频帧）
- 可被多个视图同时引用，共享同一段内存 —— 修改一个视图会影响其他视图
- 可通过
slice()创建新缓冲区（浅拷贝），或用ArrayBuffer.transfer()（实验性）转移所有权 - 示例：读取 PNG 文件头（前 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。
立即学习“Java免费学习笔记（深入）”；
访问方式：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;
