二进制数组

概述

  二进制数组(ArrayBuffer对象、TypedArray视图和DataView视图)是JS操作二进制数据的一个接口。这些对象早就存在，属于独立的规格(2011年2月发布)，ES6将它们纳入了ECMAScript规格，并且增加了新的方法。
  二进制数组的原始设计目的，与WebGL项目有关。所谓WebGL，就是指浏览器与显卡之间的通信接口，为了满足JS与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式。文本格式传递一个32位整数，两端的JS脚本与显卡都要进行格式转化，将非常耗时。这时要是存在一种机制，可以像C语言那样，直接操作字节，将4个字节的32位整数，以二进制形式原封不动地送入显卡，脚本的性能就会大幅提升。
　　二进制数组就是在这种背景下诞生的。它很像C语言的数组，允许开发者以数组下标的形式，直接操作内存，大大增强了JS处理二进制数据的能力，使得开发者有可能通过JS与操作系统的原生接口进行二进制通信。
　　二进制数组由三类对象组成
　　1、ArrayBuffer对象：代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。
　　2、TypedArray(类型化数组)：共包括9种类型的类型化数组，比如Uint8Array(无符号8位整数)数组，Int16Array(16位整数)数组，Float32Array(32位浮点数)数组等等。
　　3、DataView(数据视图)：可以自定义复合格式的视图，比如第一个字节是Uint8(无符号8位整数)、第二、三个字节是Int16(16位整数)、第四个字节开始是Float32(32位浮点数)等等，此外还可以自定义字节序。
　　简单说，ArrayBuffer对象代表原始的二进制数据，TypedArray(类型化数组)用来读写简单类型的二进制数据，DataView(数据视图)用来读写复杂类型的二进制数据。
　　[注意]二进制数组并不是真正的数组，而是类数组对象
　　很多浏览器操作的API，用到了二进制数组操作二进制数据，比如：File API、XMLHttpRequest、Fetch API、Canvas、WebSockets。

ArrayBuffer

  ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过TypedArray(类型化数组)和DataView(数据视图)以指定格式解读二进制数据。
　　[注意]IE9-浏览器不支持
　　ArrayBuffer是一个构造函数，可以分配一段可以存放数据的连续内存区域。参数length表示要创建的数组缓冲区的大小，即所需要的内存大小(以字节为单位)。最终返回一个新的拥有指定大小的ArrayBuffer对象。它的内容都被初始化为0。
　　下面代码生成了一段32字节的内存区域，为了读写这段内容，需要为它指定视图。比如DataView数据视图，它的创建，需要提供ArrayBuffer对象实例作为参数。代码对一段32字节的内存，建立DataView视图，然后以不带符号的8位整数格式，读取第一个元素，结果得到0，因为原始内存的ArrayBuffer对象，默认所有位都是0。

var buf = new ArrayBuffer(32);
var dataView = new DataView(buf);
dataView.getUint8(0) // 0

  另一种TypedArray视图(类型化数组)，与DataView数据视图的一个区别是，它不是一个构造函数，而是一组构造函数，代表不同的数据格式。

var buffer = new ArrayBuffer(12);
var x1 = new Int32Array(buffer);
x1[0] = 1;
var x2 = new Uint8Array(buffer);
x2[0] = 2;
x1[0] // 2

  上面代码对同一段内存，分别建立两种视图：32位带符号整数(Int32Array构造函数)和8位不带符号整数(Uint8Array构造函数)。由于两个视图对应的是同一段内存，一个视图修改底层内存，会影响到另一个视图。
　　TypedArray视图(类型化数组)的构造函数，除了接受ArrayBuffer实例作为参数，还可以接受普通数组作为参数，直接分配内存生成底层的ArrayBuffer实例，并同时完成对这段内存的赋值。

var typedArray = new Uint8Array([0,1,2]);
typedArray.length // 3
typedArray[0] = 5;
typedArray // [5, 1, 2]

  上面代码使用TypedArray视图的Uint8Array构造函数，新建一个不带符号的8位整数视图。可以看到，Uint8Array直接使用普通数组作为参数，对底层内存的赋值同时完成。
  目前，TypedArray视图(类型化数组)一共包括9种类型，每一种视图都是一种构造函数。

数据类型  　字节长度   含义                             对应的C语言类型

Int8       1        8位带符号整数                      signed char
Uint8      1        8位不带符号整数                    unsigned char
Uint8C     1        8位不带符号整数(自动过滤溢出)        unsigned char
Int16      2        16位带符号整数                     short
Uint16     2        16位不带符号整数                   unsigned short
Int32      4        32位带符号整数                     int
Uint32     4        32位不带符号的整数                  unsigned int
Float32    4        32位浮点数                         float
Float64    8        64位浮点数                         double

  这9个构造函数生成的数组，统称为TypedArray视图(类型化数组)。它们很像普通数组，都有length属性，都能用方括号运算符([])获取单个元素，所有数组的方法，在它们上面都能使用。普通数组与TypedArray数组的差异主要在以下方面：
　　1、TypedArray数组的所有成员，都是同一种类型
　　2、TypedArray数组的成员是连续的，不会有空位
　　3、TypedArray数组成员的默认值为0。比如，new Array(10)返回一个普通数组，里面没有任何成员，只是10个空位；new Uint8Array(10)返回一个TypedArray数组，里面10个成员都是0
　　4、TypedArray数组只是一层视图，本身不储存数据，它的数据都储存在底层的ArrayBuffer对象之中，要获取底层对象必须使用buffer属性

数据视图

  如果一段数据包括多种类型(比如服务器传来的HTTP数据)，这时除了建立ArrayBuffer对象的复合视图以外，还可以通过DataView视图进行操作。
　　DataView视图提供更多操作选项，而且支持设定字节序。本来，在设计目的上，ArrayBuffer对象的各种TypedArray视图，是用来向网卡、声卡之类的本机设备传送数据，所以使用本机的字节序就可以了；而DataView视图的设计目的，是用来处理网络设备传来的数据，所以大端字节序或小端字节序是可以自行设定的。
　　DataView视图本身也是构造函数，接受一个ArrayBuffer对象作为参数，生成视图。