学习时间：2020.06.06
学习章节：《你不知道的 Blob》
原文对 Blob 的知识点介绍得非常完整清晰，本文通过四个问题来总结本文核心知识：
- Blob 是什么？
- Blob 怎么用？
- Blob 有哪些使用场景？
- Blob 与 ArrayBuffer 有何区别？
一、Blob 是什么？
Blob（Binary Large Object）表示二进制类型的大对象，通常是影像、声音或多媒体文件。MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。在 JavaScript 中 Blob 对象表示一个不可变、原始数据的类文件对象，它不一定非得是大量数据，也可以表示一个小型文件的内容。
另外，JavaScript 中的 File 接口是基于 Blob，继承 Blob 的功能并将其扩展使其支持用户系统上的文件。
二、Blob 怎么用？
Blob 由一个可选字符串 type 和 blobParts 组成，其中， type 通常为 MIME 类型。
MIME（Multipurpose Internet Mail Extensions）多用途互联网邮件扩展类型，常见有：超文本标记语言文本 .htmltext/html、PNG图像 .pngimage/png、普通文本 .txttext/plain等。
1. 构造函数
Blob 构造函数语法为：
const myBlob = new Blob(blobParts[, options])入参：
-
blobParts：它是一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象构成的数组。DOMStrings 会被编码为 UTF-8。 -
options：一个可选的对象，包含以下两个属性：-
type：默认值为""，表示将会被放入到 blob 中的数组内容的 MIME 类型。 -
endings：默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者"transparent"，代表会保持 blob 中保存的结束符不变。
-
出参：
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
2. 属性和方法
2.1 属性介绍
Blob 对象拥有 2 个属性：
-
size：只读，表示Blob对象中所包含的数据大小（以字节为单位）； -
type：只读，值为字符串，表示该Blob对象所包含数据的 MIME 类型。若类型未知，则该属性值为空字符串。
2.2 方法介绍
-
slice([start[, end[, contentType]]])：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。 -
stream()：返回一个能读取 Blob 内容的ReadableStream。 -
text()：返回一个 Promise 对象且包含 Blob 所有内容的 UTF-8 格式的USVString。 -
arrayBuffer()：返回一个 Promise 对象且包含 Blob 所有内容的二进制格式的ArrayBuffer。
注意： Blob 对象是不可改变的，但是可以进行分割，并创建出新的 Blob 对象，将它们混合到一个新的 Blob 中。类似于 JavaScript 字符串：我们无法更改字符串中的字符，但可以创建新的更正后的字符串。
3. 简单上手
3.1 示例1：从字符串创建 Blob
let myBlobParts = ['Hello Leo
']; // 一个包含DOMString的数组
let myBlob = new Blob(myBlobParts, {type : 'text/html', endings: "transparent"}); // 得到 blob
console.log(myBlob.size + " bytes size");
// Output: 31 bytes size
console.log(myBlob.type + " is the type");
// Output: text/html is the type3.2 示例2：从类型化数组和字符串创建 Blob
JavaScript类型化数组是一种类似数组的对象，并提供了一种用于 访问原始二进制数据的机制 。并且在类型数组上调用 Array.isArray() 会返回 false 。
详细可参考MDN《JavaScript 类型化数组》章节。
let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二进制格式的 "hello"
let blob = new Blob([hello, ' ', 'leo'], {type: 'text/plain'});
// Output: "Hello leo"3.3 示例3：组装新的 Blob
由于 Blob 对象是不可改变的，但我们可以进行分割，并组装成一个新的 Blob 对象：
let blob1 = new Blob(['Hello Leo
'],
{type : 'text/html', endings: "transparent"});
let blob2 = new Blob(['Happy Boy!
'],
{type : 'text/html', endings: "transparent"});
let slice1 = blob1.slice(16);
let slice2 = blob2.slice(0, 16);
await slice1.text();
// currtent slice1 value: "Leo