ArrayBuffer 和 Blob 有什么区别？

Question

我正在阅读http://www.html5rocks.com/en/tutorials/file/xhr2/，并试图弄清ArrayBuffer和Blob之间的区别。

这两个容器都是由位组成的，难道这两个容器不能以多种方式查看（如32位块、16位块等）吗？

- dangerChihuahua007

---

ArrayBuffer（以及其相关的“视图”如DataView和“类型数组”）用于二进制数据，Blob用于二进制文件。 - Константин Ван

另一个答案更好。 - Paleo

Answer 1

概要

除非你需要使用 ArrayBuffer 进行写/编辑操作，否则最好使用 Blob 格式。

详细内容

我从不同的 html5rocks 页面了解到这个问题。我发现@Bart van Heukelom的评论 很有帮助，因此我想在这里将它们提升为答案。

我还发现了一些有关 ArrayBuffer 和 Blob 对象的有用资源。总体而言：尽管强调 Blob 为不可变/原始数据，但 Blob 对象易于处理。

比较 / 对比 ArrayBuffer vs Blob 的资源：

• 可变性
  • ArrayBuffer 可以被更改（例如使用DataView）
  • Blob 是不可变的
• 来源 / 可用内存
  • 引用Bart van Heukelom的话：

  • ArrayBuffer 在内存中，可供操作。
  • 一个Blob可以存在于磁盘、缓存内存和其他不容易获取的地方

• 访问层
  • ArrayBuffer需要类似类型化数组的一些访问层
  • Blob可以直接传递给其他函数，例如window.URL.createObjectURL，就像在OP的URL中看到的那样。
    • 然而，正如Mörre指出的，您仍然可能需要使用File-related接口和API，例如FileReader来处理Blob。
• 转换/生成
  • 您可以从ArrayBuffer生成Blob，反之亦然，这解决了OP的“这两个容器不都由位组成吗？”
  • 可以使用FileReader的readAsArrayBuffer方法 从Blob生成ArrayBuffer，或者使用异步方法const arrayBuffer = await blob.arrayBuffer()（感谢@Darren G）
  • 通过ArrayBuffer可以生成Blob，正如@user3405291所指出的那样，使用代码new Blob([new Uint8Array(data)]);，详见这个答案
• 在其他库中的使用
  • jsZip： (new JSZip()).loadAsync(...) 接受两种类型数据：ArrayBuffer 和 Blob：String/Array of bytes/ArrayBuffer/Uint8Array/Buffer/Blob/Promise
• 协议如何处理 ArrayBuffer 和 Blob
  • WebSocket（WS / WSS）
    • 使用webSocket 的 binaryType 属性（取值可以是“arraybuffer”或“blob”），“控制从 WebSocket 连接接收的二进制数据类型”.
  • XmlHttpRequest (XHR)
    • 使用xhr 的 responseType 属性，可以“更改从服务器期望的响应类型”（有效值包括“arraybuffer”、“blob”以及其他类型，如“document”、“json”和“text”）。

根据responseType属性，响应属性将包含实体主体，可以是ArrayBuffer、Blob、Document、JSON或字符串。

其他有用的文档：

• ArrayBuffer

ArrayBuffer对象用于表示一种通用的固定长度的原始二进制数据缓冲区。您不能直接操作 ArrayBuffer 的内容，而是要创建一个类型化数组对象或 DataView 对象来表示特定格式的缓冲区，并使用它来读写缓冲区的内容。

• Blob

Blob对象表示一个类似文件的对象，包含不可变的原始数据。 Blob 表示的数据不一定是JavaScript本地格式。基于 Blob，File 接口继承了 Blob 功能，并扩展以支持用户系统上的文件。

- Nate Anderson

---

我刚从WebSocket接收到二进制响应，发现你会在那里得到一个Blob对象。这个Blob的缺点似乎是你甚至无法读取它，它只是一个句柄。我需要从这个Blob中获取一些字节。你需要创建一个FileReader，参见此处“从Blob中提取数据的示例” - 这会在你可以访问Blob中的任何内容之前添加另一个异步函数。 - Mörre

arrayBuffer可以像这个答案所提到的那样转换为Blob，代码如下：new Blob([new Uint8Array(data)]); 我测试过了，它对于PNG图像起作用。 - user3405291

一个 Blob 对象也可以通过异步方法 blob.arraybuffer() 转换成 ArrayBuffer。例如：const buffer = await blobFile.arrayBuffer()。参考链接：https://developer.mozilla.org/en-US/docs/Web/API/Blob/arrayBuffer - Darren G

“Blob可以变成”不行，就像你之前说的那样，它是不可变的，所以它不能变成其他东西。你可以从Blob生成ArrayBuffer，或者从ArrayBuffer生成Blob，但在这两种情况下，你都会复制数据，没有任何东西会变成其他东西。 - Kaiido

@Mörre FWIW，在创建WebSocket时，您可以指定输出二进制数据为Blob或ArrayBuffer，请参见此处。 - egerardus

Answer 2

页面上已经有解释。

ArrayBuffer

ArrayBuffer是二进制数据的通用定长容器。如果您需要一个通用的原始数据缓冲区，它们非常方便，但这些东西背后真正的力量在于您可以使用JavaScript类型化数组创建基础数据的"视图"。事实上，可以从单个ArrayBuffer源创建多个视图。例如，您可以创建一个8位整数数组，该数组与同一数据的现有32位整数数组共享相同的ArrayBuffer。基础数据保持不变，我们只是创建了不同的表示。

BLOB

如果您想直接使用Blob并且/或者不需要操作文件的任何字节，请使用xhr.responseType='blob':

- Halcyon

---

嗯，但是你不能把它们视为不同的方式吗？毕竟它们都是位的容器。 - dangerChihuahua007

说实话，仍不够清楚。你说的“一个BLOB可以是任何东西”，是什么意思？难道它不只是像ArrayBuffer一样的字节序列吗？ - shabunc

ArrayBuffer在内存中可供操作。Blob可以在磁盘、缓存内存和其他不易访问的位置。但是，可以将Blob中的数据复制到ArrayBuffer中。 - Bart van Heukelom

@BartvanHeukelom，需要引用。 - Pacerier

“Blob”的解释：如果您想直接使用Blob进行操作，那么这就是一种递归的解释。 - nonopolarity

Answer 3

如果你正在处理类似于不可变文件的东西，可以通过HTTP检索、存储或作为文件提供，Blob有一个有用的功能：blob.type (Web API文档, Nodejs文档)。这将返回一个MIME类型（例如image/png），你可以在提供Blob时将其用于Content-Type HTTP头。

- cprcrack