Blob 由一个可选的字符串 type（通常是 MIME 类型）和 blobParts 组成：
Blob 相比 TypedArray、ArrayBuffer，多了 MIME 类型。
所以可以将 Blob 看做有类型的二进制数据。
1.语法
// !!!注意第一个参数必须是数组序列
new Blob(blobParts, options)blobParts:Blob/BufferSource/String类型值的数组。options: 可选。type:Blob类型，通常是MIME类型，例如image/png。默认是application/octet-stream。endings: 是否转换换行符，使Blob对应于当前操作系统的换行符（\r\n或\n）。默认为transparent（啥也不做），不过也可以是native（转换）。
TIP
BufferSource 是 ArrayBuffer 或 ArrayBufferView （TypedArray、DataView）的总称。
1-1.处理Blob
该处的应用场景主要在文件下载。
关于此处的说明和使用可以查看Blob文件下载
1-2.处理BufferSource
var arr = new Uint8Array([72, 101, 108, 108, 111])
var blob = new Blob([arr])
console.log(blob)
这里，其实还是看不出来 blob 的具体含义表示是什么。
TIP
可以对 blob 进行额外的处理：
Blob实例上的text()、stream()等方法。FileReader实例上的readAsText()等方法。- 将
blob转化为BlobURL。
1-3.处理String
var str = '<html><p>Hello World</p></html>'
var blob1 = new Blob([str])
console.log(blob1)
var blob2 = new Blob([str], { type: 'text/html' })
console.log(blob2)
在本例中：
不声明 type 时，将来的内容会被当做 text/plain 的形式来显示。
声明 type 为 text/html，将来的内容会被当做 text/html 的形式来显示，内部的 html 标签会被解析。
可以类比与 innerText 与 innerHtml 方法的区别。
2.方法
Blob 原型上挂载了一些方法，供实例调用。
按照功能划分，大致有两类：
- 读取功能。有
arrayBuffer()、text()、stream()。 - 操作功能。有
slice()。
2-1.arrayBuffer()
将 blob 读取为 arrayBuffer:
var arr = new Uint8Array([72, 101, 108, 108, 111])
var blob = new Blob([arr])
blob.arrayBuffer().then(buffer => {
console.log(buffer)
})2-2.text()
将 blob 读取为普通文本 text:
var arr = new Uint8Array([72, 101, 108, 108, 111])
var blob = new Blob([arr])
blob.text().then(text => {
console.log(text) // 'Hello'
})TIP
无论 type 是否设置了 MIME 类型，统一读取为 text/plain。
2-3.stream()
将 blob 读取为文本流 stream:
var arr = new Uint8Array([72, 101, 108, 108, 111])
var blob = new Blob([arr])
var readableStream = blob.stream()
var reader = readableStream.getReader()
reader.read().then(res => {
console.log(res) // {value: Uint8Array(5), done: false}
})返回值形式 {value: Uint8Array(5), done: false} 中的 done 表示是否已经读取转化完。
TIP
有点类似于迭代器的设计。
2-4.slice()
slice() 方法用来截取 blob。
该方法在现代开发中，可用于大文件断片上传。
该方法类似于 Array 的 slice 方法，可设定长度 [byteStart, byteEnd)。
基本语法如下：
blob.slice([byteStart], [byteEnd], [contentType])byteStart: 起始字节，默认为0。byteEnd: 最后一个字节，不包含。contentType: 新blob的type，默认与源blob相同。
// 截取'Hello'中的前两位
var arr = new Uint8Array([72, 101, 108, 108, 111])
var blob = new Blob([arr])
var sliceBlob = blob.slice(0, 2)
sliceBlob.text().then(text => {
console.log(text) // 'He'
})3.URL转化
Blob 可以用作 <a>、<img> 或其他标签的 URL，来显示它们的内容。
3-1.BlobURL
BlobURL 的基本形式为 blob:<origin>/<uuid>。
例如：
blob:http://jsgoshu.cn/05c212a9-2e47-477c-91df-430425ab3075我们可以通过 URL.createObjectURL 方法来创建 BlobURL。
var buffer = new Uint8Array([72, 101, 108, 108, 111]).buffer
var blob = new Blob([buffer], { type: 'text/plain' })
var blobUrl = URL.createObjectURL(blob)
console.log(blobUrl)BlobURL 是放在当前浏览器内存中的映射。
生成的 URL（即其链接）仅在当前文档打开的状态下才有效。
当关闭浏览器页面时 当前的 BlobUrl 将立即失效。
TIP
另外，由于 BlobURL 会占用浏览器内存，为了防止内存占用过多：
我们可以选择在适当的时机，调用 URL.revokeObjectURL 主动释放内存。
调用之后，BlobURL 也会立即失效。
该方式常用于 文件下载。在 a 链接下载完文件之后，释放内存。
let link = document.createElement('a')
link.download = 'hello.txt'
let blob = new Blob(['Hello, world!'], {type: 'text/plain'})
link.href = URL.createObjectURL(blob)
link.click()
URL.revokeObjectURL(link.href)3-2.DataURL
DataURL 的形式为 data:[<mediatype>][;base64],<data>。
譬如：
data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7我们可以利用 FileReader 的 readAsDataURL 方法将 blob 转化为 DataURL：
var blob = new Blob(['Hello World'], { type: 'text/plain' })
var reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function () {
console.log(this.result) // data:text/plain;base64,SGVsbG8gV29ybGQ=
}
reader.onerror = function () {
console.log(this.error)
}TIP
DataURL 采用的是 base64 编码。
这种编码将二进制数据表示为一个由 0 到 64 的 ASCII 码组成的字符串，非常安全且可读。
而且相比于 BlobURL，DataURL 是长期有效的。