javascript如何操作二进制数据_ArrayBuffer和Blob有何区别

admin 百科 2025-12-23 16

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

javascript如何操作二进制数据_ArrayBuffer和Blob有何区别-第1张图片-佛山资讯网

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）。

立即学习“Java免费学习笔记（深入）”；

创建方式灵活：可由字符串、ArrayBuffer、其他 Blob 或 File 构造
读取需借助 FileReader 或 blob.arrayBuffer()（返回 Promise）转为内存数据
可直接用于 URL.createObjectURL() 生成临时 URL，在 <img alt="javascript如何操作二进制数据_ArrayBuffer和Blob有何区别" >、<video></video> 或 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);

登录后复制