ArrayBuffer与Blob区别详解：JavaScript二进制操作指南

golang学习网今天将给大家带来《JavaScript操作二进制数据：ArrayBuffer与Blob区别详解》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

ArrayBuffer 是内存中固定长度的原始字节缓冲区，需配合 Uint8Array 或 DataView 等视图操作；Blob 是面向 I/O 的不可变二进制载体，用于文件、网络等场景，需通过 arrayBuffer() 或 FileReader 转换才能读取内容。

JavaScript 中操作二进制数据主要靠 ArrayBuffer 及其视图（如 Uint8Array、DataView），而 Blob 是用于表示不可变原始二进制数据的文件式对象，常用于网络请求或文件读写。二者定位不同：一个是内存中的二进制容器，一个是面向 I/O 的二进制载体。

ArrayBuffer 是内存中的一段原始字节

ArrayBuffer 本身不提供读写能力，它只是一个固定长度的、不可调整大小的字节缓冲区。你需要配合视图（view）来操作内容：

• Uint8Array：按无符号 8 位整数读写，适合处理字节流（如图像像素、协议包）
• DataView：支持指定字节序（小端/大端）、任意偏移读写不同长度类型（getInt32、setFloat64等），适合解析二进制协议

例如，从网络获取 ArrayBuffer 后解析一个 4 字节整数：

fetch('/data.bin')
  .then(res => res.arrayBuffer())
  .then(buf => {
    const view = new DataView(buf);
    const value = view.getInt32(0, true); // 从偏移 0 开始，小端序
  });

Blob 是面向文件和网络的二进制数据封装

Blob 不可直接读取内部字节，它代表的是“一段二进制内容”，但设计目标是与文件系统、HTTP 请求、下载等场景对接。它的内容可能尚未加载到内存（比如一个 2GB 的视频文件 Blob）。

• 创建方式灵活：可由字符串、ArrayBuffer、其他 Blob 或 File 构造
• 读取需借助 FileReader 或 blob.arrayBuffer()（返回 Promise）转为内存数据
• 可直接用于 URL.createObjectURL() 生成临时 URL，在 、 或 fetch() 中使用

例如，把 ArrayBuffer 转成 Blob 并触发下载：

const buf = new ArrayBuffer(4);
const view = new Uint8Array(buf);
view.set([0x01, 0x02, 0x03, 0x04]);

const blob = new Blob([buf], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.bin';
a.click();
URL.revokeObjectURL(url);

关键区别总结

用途不同：ArrayBuffer 用于计算和内存操作；Blob 用于 I/O、传输、持久化。

可访问性不同：ArrayBuffer 内容可直接通过视图随机读写；Blob 必须先转成 ArrayBuffer / Text / URL 才能使用。

生命周期管理不同：ArrayBuffer 是普通 JS 对象，受 GC 管理；Blob 引用需手动调用 URL.revokeObjectURL() 避免内存泄漏（尤其在频繁创建临时 URL 时）。

性能倾向不同：对大量数据做解析/拼接/加密，优先用 ArrayBuffer；上传文件、生成下载、显示媒体资源，优先用 Blob。

何时互相转换

常见转换路径：

• ArrayBuffer → Blob：直接传入 new Blob([arrayBuffer], ...)（注意要包在数组里）
• Blob → ArrayBuffer：调用 blob.arrayBuffer()（返回 Promise），或用 FileReader.readAsArrayBuffer()
• Blob → Uint8Array：先 arrayBuffer()，再 new Uint8Array(buf)

注意：Blob 构造函数接受类数组对象（如 Uint8Array、ArrayBuffer、另一个 Blob），但不会拷贝数据——底层可能共享引用（取决于浏览器实现），所以修改原 ArrayBuffer 不一定影响已创建的 Blob（实际行为以规范为准，建议视为不可变）。

以上就是《ArrayBuffer与Blob区别详解：JavaScript二进制操作指南》的详细内容，更多关于的资料请关注golang学习网公众号！