引言
在当今的 Web 开发过程中，处理二进制数据（如 图像、声音、视频 等等）变得越来越常见，Blob 对象成为了一种常用的处理二进制数据的方法。在 ECMAScript 2018（也叫 ES9） 中，Blob 类进行了重大更新，增加了更多的功能，如本文将阐述的 动态构建 Blob 实例 。
本文将会介绍 Blob 类的用法，以及如何通过处理 Blob 类的 bug 来构建动态 Blob 实例。
- Blob 类的用法
Blob 对象表示不可变、原始数据的类数组，它是在 Blob 接口上定义的。Blob 通常用于存储大文件或二进制数据。Blob 对象可以由 ArrayBuffer 对象或者 String 对象构造。
例如，我们可以通过以下代码获得一个 Blob 实例：
--- ---------- - --- ------------ --------- ------ ---------------
这个代码将会构建出一个包含 "Hello World!" 文本的 Blob 对象。如果你想要获得它的内容，可以调用 Blob 对象的 text() 方法：
------------------------------------- - ------------------ -- --- ------ ------- ---
如果我们想向文件中写入数据，可以使用 FileSaver.js 库提供的 saveAs() 方法，它的使用方法如下：
------------------ ------------------
这个代码将会将这个文本存储到一个文件中。
- 构建动态 Blob 对象
有时候我们需要动态地向一个 Blob 对象中添加数据，我们可以通过 ArrayBuffer 对象或其他 Blob 对象来实现这一点。
Blob 对象提供了一个静态方法 Blob.concat() 来将多个 Blob 对象合成一个 Blob 对象：
--- - - --- ------------- --- ------ --------------- --- - - --- ---------------- ------ --------------- --- ---------- - -------------- ---
通过 Blob.concat() 可以将 a 和 b 这两个 Blob 对象合成一个新的 Blob 对象，其内容为 "Hello, World!"。
在 ECMAScript 2018 是通过 Blob 构造函数的第一个参数来传递一组 Uint8Array 对象或者 ArrayBuffer 对象，因此我们可以自己构建一个可以动态添加数据的 Blob 对象。
构建一个动态 Blob 实例的方法如下：
----- ----------- -
------------- -
------------ - --- -- -- ----------- -----
----------- - -- -- ---- ---- -----
-
-------------- -
--------------------------
----------- -- ------------------
-
--------- -
--- ------------ - --- ------------------------
--- ------ - --
--- ---- - - -- - - -------------------- ---- -
--- ------ - ----------------
-------------------- ------------------- --------
------ -- ------------------
-
------ --- ----------------------------
-
-DynamicBlob 类的 append() 方法将传入的 ArrayBuffer 对象添加到 DynamicBlob 对象的内部数组中，同时更新当前 Blob 对象的长度。getBlob() 方法将这个 Blob 对象的内部数组合成为一个对应的 ArrayBuffer 对象，再通过 Blob 构造函数来构建出一个 Blob 对象。
- 处理 Blob 类的 bug
在使用 Blob 类时我们经常会遇到一些 bug，如在 iOS 设备上，当我们构建 Blob 对象的时候会遇到产生的大小超越了 Safari 浏览器所支持的大小的限制的问题。这个 bug 可以通过调整 Chunk size 的大小来避免。
例如在下面这个示例代码中，我们在 Chrome 和 Safari 浏览器中都能够成功地构建出 Blob 对象。（请注意 Console 中的输出）
-------- ----------- -
--- -------- - ----
--- --------- - ---- - ---- - -- -- --- ------
--- ---------- - -------- - --
--- --------- - -----------
--- --------- - ---
--- ---- - - -- - - ----------- ---- -
--- ---------- - --- -----------------
--- ---- - - -- - - ---------- ---- -
------------- - - - ----
-
------------------ --------- ------------------------ - ----- -------------------------- ----
-
--- ---- - --- --------------- - ----- -------------------------- ---
---------------------- -------- ---- -- ---- - - -------- - - --- --------- - - ----------- - ---------- - ---- ---------- - - -----------
-这个代码将会动态地构建一个大小为 512 MB 的 Blob 实例。在执行这个代码的时候，请注意控制台的输出。
结论
当我们在处理二进制数据的时候，Blob 对象成为了一种非常重要的工具。在这篇文章中，我们介绍了 Blob 类的用法，以及如何通过处理 Blob 类的 bug 来构建动态 Blob 实例。这些知识可以帮助你更好地处理 Web 开发过程中的二进制数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672c54e6ddd3a70eb6d790f4