ArrayBuffer类型化数组对象

前置知识JS与二进制数据

现代计算机中操作二进制数据的基本单位是字节（byte），故二进制数据一般以字节数组的形式存在于程序中。如：Java中的InputStream于OutputStream类，允许通过指定大小的字节数组（如： byte[] bytes = new byte[1024] ）对文件进行读写。
然而回到JS，其设计之初也没有想过要处理二进制，故对于字节的概念并不清晰。再加上JS对数据类型的弱化，即使要表示字节数组，也只能通过普通数组的方式表示。

HTML5的建立对前端而言是颠覆性的，一方面基于XHR2， 使上传下载二进制内容成为可能；另一方面，WebGL/Canvas等新技术需要JS与显卡之间进行大量的、实时的数据交换，而其数据通信的形式必须是二进制。这样让JS操作二进制成为了必然。
在JS中，可以通过ArrayBuffer和类型化数组（Typed Array）在内存中对二进制数据进行操作。

制数据
Blob和FileReader中从宏观角度介绍了如何通过JS创建一个二进制对象，并介绍了如何将本地二进制内容读取至内存。本篇将介绍如何在内存中操作二进制数据。

ArrayBuffer 对象表示一段二进制数据，用来模拟内存里面的数据。通过这个对象，JavaScript 可以读写二进制数据。这个对象可以看作内存数据的表达。

ArrayBuffer创建实例

浏览器原生提供ArrayBuffer()构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节。

let buffer = new ArrayBuffer(8); //实例对象buffer占用8个字节
console.log(buffer.byteLength); //8

ArrayBuffer 对象有实例属性byteLength，表示当前实例占用的内存长度（单位字节）。
ArrayBuffer 对象有实例方法slice()，用来复制一部分内存。它接受两个整数参数，分别表示复制的开始位置（从0开始）和结束位置（复制时不包括结束位置），如果省略第二个参数，则表示一直复制到结束。

ArrayBuffer对象优势

ArrayBuffer是一段连续的长度固定的字节序列，如：通过实例化ArrayBuffer对象在内存中创建一段二进制存储空间（或叫二进制缓冲区）
由于是连续的内存空间，故在其上进行的读写操作都会比普通JS Array快很多。
但需要说明的是：ArrayBuffer只是存储数据的区域，无法进行读写。若想进行访问，需要借助类型化数组（Typed Array）
故可以理解为：类型化数组是访问ArrayBuffer中数据的接口

类型化数组

类型化数组（或称视图view）是读写ArrayBuffer中数据的接口,JS可以通过8种不同的接口创建类型化数组。

通过类型化数组可以对ArrayBuffer中的数据进行读写，一段ArrayBuffer上可以重叠多个类型化数组。

// 创建一段12字节的ArrayBuffer
var b = new ArrayBuffer(12);
// 在b上创建一个视图v1，视图中每个元素类型为Uint8（占1字节），开始于字节索引0，结束于ArrayBuffer结尾
var v1 = new Uint8Array(b);
// 在b上创建一个视图v2，视图中每个元素类型为Uint32（占4字节），开始于字节索引4，结束于ArrayBuffer结尾
var v2 = new Uint32Array(b,4);
// 在b上创建一个视图v3，视图中每个元素类型为Uint16（占2字节），开始于字节索引2，视图长度为2，结束于字节索引5
var v3 = new Uint16Array(b,2,2);

下面画图说明存储方式：

一段ArrayBuffer上重叠了三个视图，可以通过三种方式访问ArrayBuffer中的数据。

此时做如下测试：
1、通过v1向b中写入数据
2、通过v1、v2、v3从b中读取数据

下面简单说明下各输出：
首先通过v1为每个元素赋值为十进制1，则ArrayBuffer中每个元素存储的二进制为00000001
通过v2读取，v2[0]和v2[1]中读取出的二进制均为00000001000000010000000100000001，转换为十进制即为16843009
通过v3读取，v3[0]和v3[1]中读取出的二进制均为0000000100000001，转换为十进制即为257
由此我们可以归纳出ArrayBuffer与类型化数组间的关系：

• ArrayBuffer存储二进制数据，但只有通过类型化数组才能进行二进制数据的读写
• 一段ArrayBuffer上可以重叠多个不同的类型化数组，不同类型化数组影响对ArrayBuffer中数据的读写方式