[HTML5] ArrayBuffer与类型化数组

写在前面

这是关于JS二进制操做的第三篇博客，前两篇详见：
[HTML5] Blob对象
[HTML5] FileReader对象
此前从宏观角度介绍了如何经过JS建立一个二进制对象，并介绍了如何将本地二进制内容读取至内存。本篇将介绍如何在内存中操做二进制数据。

JS与二进制数据

现代计算机中操做二进制数据的基本单位是字节（byte），故二进制数据通常以字节数组的形式存在于程序中。如：Java中的InputStream于OutputStream类，容许经过指定大小的字节数组（如：byte[] bytes = new byte[1024]）对文件进行读写。
然而回到JS，其设计之初也没有想过要处理二进制，故对于字节的概念并不清晰。再加上JS对数据类型的弱化，即便要表示字节数组，也只能经过普通数组的方式表示。
HTML5的创建对前端而言是颠覆性的，一方面基于XHR2， 使上传下载二进制内容成为可能；另外一方面，WebGL/Canvas等新技术须要JS与显卡之间进行大量的、实时的数据交换，而其数据通讯的形式必须是二进制。这样，JS操做二进制成为了必然。
在JS中，能够经过ArrayBuffer和类型化数组（Typed Array）在内存中对二进制数据进行操做。

ArrayBuffer

ArrayBuffer是一段连续的长度固定的字节序列，如：经过实例化ArrayBuffer对象在内存中建立一段二进制存储空间（或叫二进制缓冲区），

// 建立一段字节长度为8的内存空间
var buffer = new ArrayBuffer(8);
// 获取字节长度
console.log(buffer.byteLength); // 8

因为是连续的内存空间，故在其上进行的读写操做都会比普通JS Array快不少。
但须要说明的是：ArrayBuffer只是存储数据的区域，没法进行读写。若想进行访问，须要借助类型化数组（Typed Array）
故能够理解为：类型化数组是访问ArrayBuffer中数据的接口

类型化数组

类型化数组（或称视图view）是读写ArrayBuffer中数据的接口,JS能够经过8种不一样的接口建立类型化数组，分别为：

名称	描述	字节长度
Int8Array	8位有符号整数	1
Uint8Array	8位无符号整数	1
Int16Array	16位有符号整数	2
Uint16Array	16位无符号整数	2
Int32Array	32位有符号整数	4
Uint32Array	32位无符号整数	4
Float32Array	32位浮点数	4
Float64Array	64位浮点数	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中的数据
此时作以下测试：
一、经过v1向b中写入数据
二、经过v一、v二、v3从b中读取数据

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

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

总结

本篇主要介绍如何对内存中的二进制内容进行读写，并重点介绍了ArrayBuffer及类型化数组的关系。写这篇的目的也是在于解释ArrayBuffer中二进制数据存在的形式，但每每咱们操做本地文件时，并不须要关心二进制数据内容是如何排列的，故此处不讨论字节序或对齐等问题，之后有机会可能会结合Canvas进行说明。

参考资料

MDN_ArrayBuffer
MDN_TypedArray