Blob、File、ArrayBuffer、TypedArray、DataView究竟应该如何应用

引言

Blob、File、ArrayBuffer、TypedArray、DataView、Object URL …等等 Web 应用中有关于进制的应用你了解多少？

其实我们可以利用上述 Web API 来做很多事情，并且它们之前存在着惟妙惟肖的关联关系。

来吧，一篇文章让你带你畅游 Web 世界中最直观的二进制应用。

ArrayBuffer

概念

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组，通常在其他语言中称为“byte array”。

你不能直接操作 ArrayBuffer 的内容，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

它的含义类似 NodeJs 中的 Buffer 。简单来说，我们可以通过 ArrayBuffer 来开辟一段二进制数据空间，但是它只能通过 TypedArray 或者 DataView 来进行操作。

用法

在计算机中我们都了解每 8 位代表一个字节，在 Web Api 中提供给了我们一个 ArrayBuffer 内置模块，通过实例化 new ArrayBuffer(number) 可以创建对应固定 number 大小的字节长度缓冲区。

比如：

// 创建一个长度为 8 的 ArrayBuffer ，此时开辟一个固定 8 个字节的缓冲区也就是 64 位
const buffer = new ArrayBuffer(8);

console.log(buffer.byteLength);
// expected output: 8 

具体关系如下图所示：

ArrayBuffer 代表的含义就和他的名字类似，它是一个数组，数组中包含的元素就是字节。

上图中每一个无间隔小块代表一个位，8位组成一个字节。每一个存在间隔的长块表示一个字节，整个8个字节组成了我们创建的 buffer 对象。

TypedArray

上边我们说到通过 new ArrayBuffer(number) 可以创建对应长度字节的固定缓冲区。

同时也提供要操作创建的缓冲区实例对象，需要通过类型数组对象（TypedArray）或者 DataView 来进行操作。

那么我们就先来看一看什么是 TypedArray。

概念

类型化数组（TypedArray） 对象描述了一个底层的二进制数据缓冲区（binary data buffer）的一个类数组视图（view）。

稍微翻译下上边的话，也就是说可以通过 TypedArray 来操作 ArrayBuffer 的实例。

其次，没有名为 TypedArray 的全局属性，也没有一个名为 TypedArray 的构造函数。相反，有许多不同的全局属性，它们的值是特定元素类型的类型化数组构造函数。

这句话简单来讲，你可以将 TypedArray 理解为一种接口的形式。所谓 TypedArray 它并不包含具体的实现而是代表一系列具有相同特性（类数组视图）的集合概念。

也就是说 TypedArray 不可被直接实例化，本身也无法访问。但是它有很多种不同的实现方式。

也许有部分同学不太理解 TypedArray 是一种接口的形式，别着急，稍后我们来举个例子你马上就会明白了。

关于 TypedArray 的具体实现，它存在以下方式：

类型	单个元素值的范围	大小(bytes)	描述	Web IDL 类型	C 语言中的等价类型
Int8Array	-128 到 127	1	8 位二进制有符号整数	byte	int8_t
Uint8Array	0 到 255	1	8 位无符号整数（超出范围后从另一边界循环）	octet	uint8_t
Uint8ClampedArray	0 到 255	1	8 位无符号整数（超出范围后为边界值）	octet	uint8_t
Int16Array	-32768 到 32767	2	16 位二进制有符号整数	short	int16_t
Uint16Array	0 到 65535	2	16 位无符号整数	unsigned short	uint16_t
Int32Array	-2147483648 到 2147483647	4	32 位二进制有符号整数