javascript ArrayBuffer 和 Blob 有什么区别？

What is the difference between an ArrayBuffer and a Blob?

提问by dangerChihuahua007

I'm reading http://www.html5rocks.com/en/tutorials/file/xhr2/and trying to figure out the difference between an ArrayBuffer and a Blob.

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

Aren't both containers comprised of bits? Hence, couldn't both containers be viewed in many ways (as 32-bit chunks, 16-bit chunks, etc.)?

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

采纳答案by Halcyon

It's explained on the page.

页面上有说明。

ArrayBuffer

数组缓冲区

An ArrayBuffer is a generic fixed-length container for binary data. They are super handy if you need a generalized buffer of raw data, but the real power behind these guys is that you can create "views" of the underlying data using JavaScript typed arrays. In fact, multiple views can be created from a single ArrayBuffer source. For example, you could create an 8-bit integer array that shares the same ArrayBuffer as an existing 32-bit integer array from the same data. The underlying data remains the same, we just create different representations of it.

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

BLOB

BLOB

If you want to work directly with a Blob and/or don't need to manipulate any of the file's bytes, use xhr.responseType='blob':

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

回答by The Red Pea

Summary

概括

Unless you need the ability to write/edit(using an ArrayBuffer), then Blobformat is probably best.

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

Detail

细节

I came to this question from a differenthtml5rocks page., and I found @Bart van Heukelom's commentsto be helpful, so I wanted to elevate them to an answer here.

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

I also found it helpful to find resources specific to ArrayBufferand Blobobjects. I added the emphasis to reiterate the helpful detail I was looking for. In summary: despite the emphasis on Blobbeing "raw data" it's very workable.

我还发现查找特定于ArrayBuffer和Blob对象的资源很有帮助。我添加了重点以重申我正在寻找的有用细节。总之：尽管强调Blob是“原始数据”，但它非常可行。

Some other points on ArrayBuffervs Blob:

ArrayBuffervs 的其他一些要点Blob：

• Mutability
  • an ArrayBuffer can be changed(e.g. with a DataView)
  • a Blob is immutable
• Source / Availability in Memory
  • Quoting Bart van Heukelom:

    • An ArrayBuffer is in the memory, availablefor manipulation.
    • A Blob can be on disk, in cache memory, and other places not readily available

• Access Layer
  • ArrayBuffer will require some access layerlike typed arrays
  • Blob can be passed directly into other functions like window.URL.createObjectURL, as seen in the example from OP's URL.
  • However, as M?rre points outyou may still need File-related APIs like FileReaderto work with a Blob.
• Convert
  • Can convert Blob to ArrayBuffer and vice versa, which addresses the OP's "Aren't both containers comprised of bits?"
  • Blob can become an ArrayBufferusing the FileReader's readAsArrayBuffermethod , or the async method const arrayBuffer = await blob.arrayBuffer()(thanks to @Darren G)
  • ArrayBuffer can become a Blobas @user3405291 points outnew Blob([new Uint8Array(data)]);, shown in this answer
• Use in Other Libraries
  • jsZip; (new JSZip()).loadAsync(...)accepts bothArrayBufferand Blob: String/Array of bytes/ArrayBuffer/Uint8Array/Buffer/Blob/Promise

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

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

• 接入层
  • ArrayBuffer 将需要一些访问层，如类型化数组
  • Blob 可以直接传递到其他函数中window.URL.createObjectURL，如OP 的 URL中的示例所示。
  • 但是，正如M?rre 指出的那样，您可能仍然需要与文件相关的 API，例如FileReader使用 Blob。
• 兑换
  • 可以将 Blob 转换为 ArrayBuffer，反之亦然，这解决了 OP 的“不是两个容器都由位组成吗？”
  • Blob 可以使用FileReader的readAsArrayBuffer方法或异步方法 const arrayBuffer = await blob.arrayBuffer()成为 ArrayBuffer（感谢@Darren G）
  • 正如@user3405291 指出的那样new Blob([new Uint8Array(data)]);，ArrayBuffer 可以变成 Blob，如本答案所示
• 在其他库中使用
  • jsZip; (new JSZip()).loadAsync(...)接受这两个ArrayBuffer和Blob：String/Array of bytes/ArrayBuffer/Uint8Array/Buffer/Blob/Promise

Here are the documentation details that helped me:

以下是对我有帮助的文档详细信息：

Here is ArrayBuffer

这是 ArrayBuffer

The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. You cannot directlymanipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and writethe contents of the buffer.

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

Here is Blob

这是 Blob

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interfaceis based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

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