【前端知乎系列】ArrayBuffer 和 Blob 对象

发布网友 发布时间：2024-09-30 04:26

我来回答

共1个回答

热心网友 时间：2天前

ArrayBuffer 和 Blob 对象在前端开发中广泛用于处理二进制数据，尤其是在文件上传操作中，如图片上传预览等问题。下面将深入介绍这两个对象的定义、使用方法、实例属性和方法，以及它们在实际应用中的案例。

ArrayBuffer 是 ES6 正式纳入 ECMAScript 规范的接口，用于处理二进制数据。它通过数组语法来管理二进制数据，被称为二进制数组。ArrayBuffer 本身不能直接读写，但可以通过 TypedArray 视图和 DataView 视图来操作数据。关于这些视图的具体使用和原理，可以参考阮一峰老师的《ECMAScript 6 入门 ArrayBuffer》章节。

ArrayBuffer 对象表示一个二进制数据的内存空间，内部存储的二进制数据不能直接被访问，只能通过创建视图来读取或修改数据。视图为 ArrayBuffer 提供了以特定格式解读二进制数据的能力。

ArrayBuffer 提供了构造函数 ArrayBuffer() 来创建实例。创建一个实例对象 buffer，占用 32 个字节内存。

ArrayBuffer 实例具有 byteLength 属性，表示当前实例占用的内存字节长度。该属性只读，一旦创建不可变。此外，ArrayBuffer 提供了 slice() 方法用于复制内存的一部分。

ArrayBuffer 的兼容性良好，主要现代浏览器如 Chrome、Firefox、Safari、Edge 等都支持。

Blob 全称为 Binary Large Object，表示二进制大型对象，用于表示文件内容，如图片文件。Blob 对象的内容由构造函数参数数组中给出的值的串联组成。

Blob 对象与 ArrayBuffer 的主要区别在于，Blob 更关注文件内容的读写，而 ArrayBuffer 更侧重于二进制数据的处理。Blob 对象能够表示文件的数据内容，适合处理和传递文件。

使用 Blob() 构造函数创建 Blob 实例。参数可以是一个由 ArrayBuffer、ArrayBufferView、Blob 或 DOMString 等对象构成的数组，用于指定 Blob 的内容。此外，Blob 对象可以包含 type 和 endings 属性，用于指定文件类型和行结束符。

Blob 实例有两个属性：size 表示文件大小；type 表示文件类型。Blob 实例提供了方法，用于创建 Blob 的子集，指定起始和结束位置以及新的数据类型。

Blob 的兼容性同样良好，现代浏览器均支持。

通过文件选择器允许用户选择文件，脚本无法直接设置其值，只能在用户选择文件后读取。文件选择器返回的 FileList 对象包含了 File 实例，每个实例对象都有 name 和 lastModifiedDate 属性，表示文件名和最后修改日期。

在 AJAX 请求中，通过设置 responseType 属性为 'blob'，可以下载一个 Blob 对象。获得的 xhr.response 即为 Blob 对象。

使用 URL.createObjectURL() 方法可以针对 Blob 对象生成临时 URL，便于某些 API 使用，如图片预览。生成的 URL 以 'blob://' 开头，用于唯一标识内存中的 Blob 对象。

通过 FileReader 对象读取 Blob 对象的内容，可以使用 FileReader.readAsText() 读取文本文件，FileReader.readAsArrayBuffer() 读取二进制文件。

总之，ArrayBuffer 和 Blob 对象在前端开发中扮演着重要角色，用于高效处理和操作二进制数据和文件内容。通过正确使用这些对象，可以解决文件上传、预览、下载和读取等常见问题。