javascript - ArrayBuffer 和 Blob 有什么区别？

Question

我正在阅读http://www.html5rocks.com/en/tutorials/file/xhr2/并试图找出 anArrayBuffer和 a之间的区别Blob。

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

Answer 1

概括

除非您需要编写/编辑（使用ArrayBuffer）的能力，否则Blob格式可能是最好的。

细节

我是从另一个html5rocks 页面提出这个问题的。，我发现@Bart van Heukelom 的评论很有帮助，所以我想在这里将它们提升为答案。

我还找到了特定于对象ArrayBuffer的有用资源。Blob总结：尽管强调Blob不可变/“原始数据”Blob对象很容易使用.

比较/对比ArrayBuffervs的资源Blob：

• 可变性
  • anArrayBuffer可以更改（例如使用 a DataView）
  • aBlob是不可变的
• 内存中的源/可用性
  • 引用Bart van Heukelom 的话：

  • ArrayBuffer 位于内存中，可用于操作。
  • Blob 可以位于磁盘、高速缓存和其他不易获得的位置

• 接入层
  • ArrayBuffer将需要一些访问层，例如类型化数组
  • Blob可以直接传递给其他函数window.URL.createObjectURL，如OP's URL中的示例所示。
    • 但是，正如Mörre 指出的那样，您可能仍然需要File相关的接口和 APIFileReader来使用 Blob。
• 转变
  • 您可以转换Blob为ArrayBuffer反之亦然，这解决了 OP 的“不是两个容器都由位组成吗？”
  • ArrayBuffer 可以 使用FileReader'sreadAsArrayBuffer方法或async 方法 const arrayBuffer = await blob.arrayBuffer()从 Blob 生成（感谢@Darren G）
  • 正如@user3405291 指出的那样， 可以从 ArrayBuffer 生成 Blobnew Blob([new Uint8Array(data)]);，如 this answer所示
• 在其他库中使用
  • jsZip; (new JSZip()).loadAsync(...)接受和：_ ArrayBufferBlobString/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”等其他值）

    • 响应属性将根据responseTypeArrayBuffer、Blob、Document、JSON 或字符串包含实体主体。

其他有用的文档：

• ArrayBuffer

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

• Blob

Blob对象表示不可变的原始数据 的类文件对象。Blob表示不一定是 JavaScript 原生格式的数据。该File接口基于Blob，继承 blob 功能并将其扩展为支持用户系统上的文件。

Answer 2

页面上有说明。

数组缓冲区

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

斑点

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