二进制数据Blob,file,ArrayBuffer,fileReader...blob是一个二进制数据的大对象（类文件

二进制数据

上图：

blob是一个二进制数据的大对象（类文件对象），存储了二进制数据；不可修改须通过fileReader工具操作;一个Blob对象通常由一个或多个ArrayBuffer对象组成的数组。

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

const _blob = new Blob(array,options)

两个参数（可选）
- array:ArrayBuffer/ArrayBufferView/Blob/DOMString...
- options:{type,endings}
  - type:MIME类型
  - endings：默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入，不常用

常见的MIME类型

属性
- size （只读）：Blob对象中包含的数据大小（字节）
- type （只读）：表明该Blob对象所包含数据的MIME类型。例如若为图片，此字段就类似为 image/jpeg。如果类型未知，则该值为空字符串。
方法
- slice(start,end,contentType) : 实现对文件的分割,并返回一个新的 Blob 对象，该对象包含调用它的 blob 的子集中的数据。
  - start：开始索引，可以为负数，语法类似于数组的slice方法。默认值为0。
  - end：结束索引，可以为负数，语法类似于数组的slice方法。默认值为最后一个索引。
  - contentType：新的Blob对象的MIME类型，这个值将会成为新的Blob对象的type属性的值，默认为一个空字符串。
```
_blob.slice(start, end ,contentType)
```
- arrayBuffer() : 返回一个 Promise，其会兑现一个包含 blob 二进制数据内容的 ArrayBuffer。将blob对象转为ArrayBuffer对象，类似fileReader.readAsArrayBuffer()将blob对象转为arrayBuffer对象

ArrayBuffer 是 JavaScript 中用于表示通用、固定长度的原始二进制数据缓冲区的对象。它是一种低级别的数据结构，通常用于处理二进制数据，例如网络请求、文件读取或与 WebAssembly 交互。

我们可以对ArrayBuffer进行读写，但需要借助它提供的工具TypeArray或DataView

const buffer = new ArrayBuffer(8); // 8个字节的数据缓存区

file顾名思义就是一个文件对象；不能通过代码主动创建，要么通过选择的 FileList 对象，要么通过拖拽的拿到event.DataTransfer对象中的files;file基础Blob,Blob的属性和方法都可以用于 File，而 File 自己也有自己特有的属性和方法（详情：MDN）

转换
- File -> Blob：因为File是继承于Blob，不用进行转换
- Blob -> File：通过new File([blob],fileName,{type:MIME})

fileReader是一个工具，与上面三个数据容器不一样

readAsArrayBuffer()：读取指定 Blob 中的内容，完成之后，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象；
FileReader.readAsBinaryString()：读取指定 Blob 中的内容，完成之后，result 属性中将包含所读取文件的原始二进制数据；
FileReader.readAsDataURL()：读取指定 Blob 中的内容，完成之后，result 属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
FileReader.readAsText()：读取指定 Blob 中的内容，完成之后，result 属性中将包含一个字符串以表示所读取的文件内容。

1)从Blob的创建就能看出，Blob是经过ArrayBuffer包装过的对象，所以ArrayBuffer比Blob更加底层。

2)Blob是一个二进制数据整体，一个类文件对象，所以有属性type，有大小size。

3)ArrayBuffer就是纯纯的内存上的二进制数据，我们可以对其任何一个字节进行单独的修改，我们可以对字节进行操作，更加的细节。

4)两者都是数据容器