共计 4196 个字符，预计需要花费 11 分钟才能阅读完成。
古代 JavaScript 要面临更加简单的场景，对于各种类型的数据传输也多了起来，其中波及二进制传输，为了不便解决数据提高效率于是发明了 ArrayBuffer 对象。
然而应用中会发现不仅仅有 ArrayBuffer，还有TypedArray、DataView、Blob、FileReader 等一系列对象，让人蛊惑它们之间关系是什么？为什么有这么多的对象？带着问题查问了材料，试着梳理其中的关系。
各种对象的关系
ArrayBuffer
ArrayBuffer是 JavaScript 最根本的解决二进制的对象，形容的是一段间断的内存空间，其单位是字节(byte)。
const buffer = new ArrayBuffer(32);这样咱们就创立了一块 32 字节的内存区域，能够应用 buffer.byteLength 来查看其长度。
ArrayBuffer对象能做的操作不多，并且是不可编辑的。如果须要编辑数据，要利用另外两个对象 TypedArray 与DataView。
TypedArray
TypedArray类型化数组，TypedArray自身不存储任何数据，只是专门用来查看 ArrayBuffer 数据，所以称之为，TypedArray不是某一个构造函数名，而是一组构造函数的统称。
Int8Array：1 比特，8 位有符号整数Uint8Array：1 比特，8 位无符号整数Uint8ClampedArray：1 比特，8 位无符号整数Int16Array：2 比特，16 位无符号整数Uint16Array：2 比特，16 位无符号整数Int32Array：4 比特，32 位无符号整数Uint32Array：4 比特，32 位无符号整数Float32Array：4 比特，32 位无 IEEE 浮点数Float64Array：8 比特，64 位无 IEEE 浮点数BigInt64Array：8 比特，64 为二进制有符号整数BigUint64Array：8 比特，64 位无符号整数
创立的时候能够传入 长度 、typedArray、ArrayBuffer、 数组。当然也能够什么都不传入。
const uint1 = new Uint8Array(8);
const uint2 = new Uint16Array(new Uint8Array(8));
const uint3 = new Uint8Array(new ArrayBuffer(8));
const uint4 = new Uint8Array([1, 2, 3]);
const uint5 = new Uint8Array();以上 typedArray 中，除了创立时传入 ArrayBuffer 不会新创建 ArrayBuffer，其余在new 过程中底层都会创立新的 ArrayBuffer。能够应用arr.buffer 来拜访其援用的ArrayBuffer。
操作上一般数组的操作都能在 TypedArray 中应用。但因为ArrayBuffer 形容的是间断的内存区间，所以咱们无奈删除某一个值，只能调配为 0，也没方法应用concat 办法。
Uint8ClampedArray
Uint8ClampedArray绝对非凡一点，在正负溢出的状况下解决不同。
其余对于存入越界数据仅保留最左边（低位）局部，摈弃溢出数据，而 Uint8ClampedArray 对越界数据都保留为 255，对于传入的 正数 保留为0。
字符的互相转换
TypedArray不收入间接传字符串，所以须要先转码一下。
String → Unit8Array
const string = "Hello";
Uint8Array.from(string.split(""), (e) => e.charCodeAt(0));Unit8Array → String
// 应用 TextDecoder 对象
const u8 = Uint8Array.of(72, 101, 108, 108, 111);
new TextDecoder().decode(u8);
// 应用 fromCharCode 转换
const u8 = Uint8Array.of(72, 101, 108, 108, 111);
Array.from(u8, (e) => String.fromCharCode(e)).join("");DataView
以上数据除了 uint2 变量，其余都是繁多的数据类型，uint2对象这种一段内存中寄存了两种类型数据，称之为 复合视图 。JavaScript 中数据类型往往不那么繁多，仅用TypedArray 操作会更加麻烦，所以又有了 DataView 对象。DataView绝对于 TypedArray 有着更加多种的操作方法。
const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);提供了 getInt8、getUint8、getInt16、getUint16、getInt32、getUint32、getFloat32、getFloat64 办法。
参数有两个，第一位是节序地位，第二位是字节序，非必填。返回值是相应地位的字节数据。
const d1 = dataView.getUint8(1);
const d2 = dataView.getUint8(1, true);字节地位好了解，字节序能够浏览《了解字节序》，总的说就是：
- 大端字节序（big endian）：高位字节在前，低位字节在后，这是人类读写数值的办法。
- 小端字节序（little endian）：低位字节在前，高位字节在后，即以 0x1122 模式贮存。
默认状况下应用的是大端字节序，如果要应用小端字节序须要传入true。
这样咱们就有了根底的二进制的读写计划。可理论的利用场景中往往有更加简单的数据，所以又针对专门的场景又衍生出 Blob、FileReader 等对象。
Blob
Blob，是 Binary Large Object（二进制大型对象） 的缩写。
与 ArrayBuffer 差别是，ArrayBuffer是单纯的二进制数据，而 Blob 是带 MIME 类型 的二进制数据。并且能够不便的从 String、ArrayBuffer、TypedArray、DataView、Blob 生成为 Blob 对象。
const blob1 = new Blob(["hello"], {type: "text/plain"});
const blob2 = new Blob([new Uint8Array([72, 101, 108, 108, 111]), "","world"],
{type: "text/plain"}
);属性：
size：读取对象的字节大小。type：读取写入的MIME 类型
办法：
slice：提取Blob片段。
URL
在开发中咱们获取到图片二进制数据，咱们能够转换成 base64 写入 src 中，但如果数据量很大，或者视频数据，就会超过其容许长度。咱们能够应用 URL.createObjectURL 来不便的创立一个资源的 URL。
const url = URL.createObjectURL(blob1);会生成相似 blob:https://example.com/a6728d20-2e78-4497-9d6c-0ed61b93f11e 的资源 URL，能够间接写入 src 中应用。
在不必时应用 URL.revokeObjectURL(url) 销毁其援用，开释其内存占用。
数据读取
如果咱们要查看其中数据的话，有两种形式。
第一种，应用 Response 对象，能够间接读取字符串数据或是 arrayBuffer 数据。
const responseText = await new Response(blob2).text();const responseBuf = await new Response(blob2).arrayBuffer();第二种，应用 FileReader 对象。
const reader = new FileReader();reader.onload = function (e) {console.log(reader.result);};reader.readAsText(blob2);File
File继承自Blob，并减少了文件相干的属性信息。
name：文件名lastModified：最初批改工夫的工夫戳lastModifiedDate：最初批改工夫的Date对象webkitRelativePath：文件的门路。在 input 中抉择目录时，会设置这个属性，非标准个性。
FileList
FileList对象是 File 对象的汇合。个别呈现在:
<input type="file">控件，其中files属性是一个FileList- 拖拽事件中产生的 DataTransfer 对象，其中
files属性会是一个FileList
属性：
length：能够获取以后FileList蕴含多少个File
办法：
item(index)：可获取指定索引地位的File数据，个别状况下间接应用FileList[index]代替了。
FileReader
FileReader在谈 Blob 一节有提到过，实际上 FileReader 对象就是专门用来读取 Blob 对象的，当然也包含扩大的 File 对象。
属性：
result：文件的内容。readyState：状态。0：未加载；1：正在加载；2：加载实现。error：加载数据时的错误信息。
事件：
onload：加载胜利后触发。onerror：加载谬误时触发。onabort：加载中断时触发。onloadend：加载完结后触发。onloadstart：加载开始时触发。onprogress：加载中触发。
办法：
readAsText(blob, "utf-8")：以文本模式返回数据，第二个参数可设置文本编码。readAsDataURL(blob)：以Data URL的模式返回数据。readAsArrayBuffer(blob)：以ArrayBuffer模式返回数据。abort：停止操作。
如下面的示例，就是以文本模式返回数据：
const reader = new FileReader();reader.onload = function (e) {console.log(reader.result);};reader.readAsText(blob2);相干材料
MDN 相干的关键字
古代 JavaScript 教程 第三局部 二进制数据，文件
阮一峰 JavaScript 教程 浏览器模型相干章节
