ECMAScript6(7)：二进制数组

这个部分若是没有C语言和计算机基础会比较难理解，若是实在理解不了能够收藏它，往后再看。

二进制数组其实很早就有了，不过为了 WebGL 中，数据能够高效和显卡交换数据。分为3类：

• ArrayBuffer：表明内存中的一段二进制数据；
• TypedArray：读写简单的二进制数据，如 Uint8Array, Int16Array, Float32Array 等9类；
• DataView：读写复杂的二进制数据，如 Uint8, Int16, Float32 等8类；

数据类型	字节长度	含义	对应 C 语言类型	TypedArray 类型	DataView 类型
Int8	1	8位有符号整数	char	Int8Array	Int8
Uint8	1	8位无符号整数	unsigned char	Uint8Array	Uint8
Uint8C	1	8位无符号整数(自动过滤溢出)	unsigned char	Uint8ClampedArray	不支持
Int16	2	16位有符号整数	short	Int16Array	Int16
Uint16	2	16位无符号整数	unsigned short	Uint16Array	Uint16
Int32	4	32位有符号整数	int	Int32Array	Int32
Uint32	4	32位无符号整数	unsigned int	Uint32Array	Uint32
Float32	4	32位浮点数	float	Float32Array	Float32
Float64	8	64位浮点数	double	Float64Array	Float64

ArrayBuffer

ArrayBuffer 表明内存中的一段二进制数据，咱们无法直接操做，须要利用视图(TypedArray,DataView)按必定格式解读二进制数据。但咱们依然能够构造一段内存来存放二进制数据:

var buf = new ArrayBuffer(32);  //分配32个字节的内存存放数据, 默认全0
var dataview = new DataView(buf);   //将这段内存转为视图
dataview.getUint8(0);   //获得第一个8字节的值(无符号)，0

这里须要强调的是，分配内存空间不要太大！毕竟你的内存是有限的。
其次，不管使用什么视图，其实例化的内存若是共享，全部的写入操做会修改每个视图，由于内存共用的：

var buf = new ArrayBuffer(32);
var view16 = new Int16Array(buf);
var viewu8 = new Uint8Array(buf);

console.log(viewu8[0]);   //0
view16[0]=-1;
console.log(viewu8[0]);   //255

这里之因此获得255，是由于内存共用致使的，但为什么不是-1？Int16Array 是有符号类型的，这样二进制的最高位用做符号位，负数记为1:1000 0000 0000 0001,以后的数字用移码存储，获得-1的二进制为：1111 1111 1111 1111, 以后利用Uint8Array读取无符号的前8位，获得1111 1111这个计算为十进制为 $2^8-1=255$。具体关于数制转换和反码补码这里再也不展开，不然就跑偏了。

ArrayBuffer 对象也有几个方法和属性:

• byteLength: 获得内存区域的字节长度

const N = 32;
var buf = new ArrayBuffer(N);
if(buf.byteLength === N){
  //分配成功
} else {
  //分配失败
}

• slice(start=0, end=this.byteLength): 分配新内存，并把先有内存 start 到 end 部分复制过去，返回这段新内存区域

var buf = new ArrayBuffer(32);
var newBuf = buf.slice(0,3);

• isView(view): 判断传入的 view 是否当前 buffer 的视图，是则返回 true, 不然 false。该方法暂没法使用。

var buf1 = new ArrayBuffer(32);
var buf2 = new ArrayBuffer(32);
var buf1View = new Int8Array(buf1);
var buf2View = new Int8Array(buf2);

buf1.isView(buf1View);   //true
buf1.isView(buf2View);   //false

TypedArray

具备一个构造函数 DataView(), 接受一个ArrayBuffer参数,视图化该段内存；或接受一个数组参数，实例化该数组为二进制内容。获得的值是一个数组，能够直接使用[]访问每一个位置的内容，有length属性。其构造函数有9个：

数据类型	字节长度	含义	对应 C 语言类型	TypedArray 类型构造函数
Int8	1	8位有符号整数	char	Int8Array()
Uint8	1	8位无符号整数	unsigned char	Uint8Array()
Uint8C	1	8位无符号整数(自动过滤溢出)	unsigned char	Uint8ClampedArray()
Int16	2	16位有符号整数	short	Int16Array()
Uint16	2	16位无符号整数	unsigned short	Uint16Array()
Int32	4	32位有符号整数	int	Int32Array()
Uint32	4	32位无符号整数	unsigned int	Uint32Array()
Float32	4	32位浮点数	float	Float32Array()
Float64	8	64位浮点数	double	Float64Array()

以上9个会对内存进行不一样位数的格式化，以获得对应类型值的数组。这个数组不一样于普通数组，它不支持稀疏数组，默认值为0，并且同一个数组只能存放同一个类型的变量。

以上每一个构造函数都对应以下形式的参数：

(buffer, start=0, len=buffer.byteLength-start*8)

能够指定序列化其中 start到 end部分的二进制数据。注意这里指定的范围必须和数组类型所匹配，不能出现相似new Int32Array(buffer,2,2)的状况。若是你以为这个不符合你的需求，可使用 DataView。

若是你以为上面的写法复杂，能够不写 new ArrayBuffer，直接使用 TypedArray，但注意参数的意义不同：

var f64a = new Float64Array(4);    //分配32个字节，并做为double类型使用。 32 = 64 / 8 * 4

TypedArray的构造函数还接受另外一个TypedArray做为参数，开辟新内存复制其值并改变类型，对原视图和buffer 不构成影响，也不共用内存。
TypeArray的构造函数还接受另外一个Array做为参数，开辟新内存复制其值，对原数组不构成影响，也不共用内存。

固然利用一下方法，能够把 TypedArray 转换为普通数组：

var arr = [].slice.call(typedArray);

TypedArray具备除了concat()之外的所有数组方法，固然，它也具备 iterator，能够用 for...of 遍历。
如下是 TypedArray 特有的属性和方法：

• buffer属性：返回该视图对于的二进制内存区域
• BYTES_PER_ELEMENT属性：是个常数，表示数组中每一个值的字节大小，不一样视图的返回值与上方表格一致
• byteLength: 返回该视图对于的内存大小，只读
• byteOffset: 返回该视图从对应 buffer 的哪一个字节开始，只读
• set(arr_or_typeArray, start=0): 在内存层面，从arr_or_typeArray 的 start 下标开始复制数组到固然 typeArray
• subarray(start=0,end=this.length),截取 start到 end部分子数组,可是和原数组共用内存
• from(): 接受一个可遍历参数，转为该视图实例
• of(): 将参数列表转为该视图实例

小技巧，转换字符串和 ArrayBuffer

//该方法仅限转换 utf-16 的字符串
function ab2str(buf){
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}
function str2ab(str){
  var len = str.length;
  var view = new Uint16Array(len);
  for(let i = 0; i < len; i++){
    view[i] = str.charCodeAt(i);
  }
  return view.buffer;
}
var str = "Hello world";
var buf = str2ab(str);
var view = new Uint16Array(buf);
for(var i = 0; i < view.length; i++){
  console.log(String.fromCharCode(view[i]));   //一次输出"Hello world"的每一个字母
}
console.log(ab2str(buf));    //"Hello world"

这里扩展一些编码知识，咱们知道计算机里面存储的是二进制，而且存储的最小单位是字节。可是不一样的系统存储方式不一样，分为高位优先和低位优先。好比 20170101 这个数字，其十六进制表示为 0x0133C575, 在低位优先的系统中存储方式为 0x75 0xC5 0x33 0x01, 而在高位优先的系统中存储方式为 0x01 0x33 0xC5 0x75。因为大多数计算机采用低位优先的方式，因此 ES6 采用是也是低位优先的方式，但遇到高位优先的数据时，就不能简单的直接那来使用，具体使用会在 DataView 中介绍，这里说明一种判断低位优先(little endian)仍是高位优先(big endian)的方法:

还有须要注意的是数据溢出，这个也是须要数制方面基础比较好理解，这里不过多展开了。举一个例子：
Uint8 只能表示8位无符号整数，最大是1111 1111, 也就是十进制的 0~255；Int8由于有了符号位，只能表示十进制-128~127，若是给它的值不在这个范围内就会发生溢出，获得一个你意想不到但情理之中的值

var view1 = new Uint8Array(2);
view1[0] = 256;   //256 二进制是 1 0000 0000 因为数据只能容纳8个值，进位1就丢了
view1[1] = -1;    //以前说过-1 二进制(补码)为 1111 1111(全1), 做为无符号数8个1就是255

console.log(view1[0]);   //0
console.log(view1[1]);   //255

var view2 = new Int8Array(2);
view2[0] = 128;   //因为符号位溢出，系统自动用32位计算这个数1 000 0000 0000 0000 0000 0000 1000 0000，取符号位和最后8位获得-128
view2[1] = -128;  //因为符号位溢出，系统自动用32位计算这个数0 111 1111 1111 1111 1111 1111 0111 1111，取符号位和最后8位获得127
console.log(view2[0]);   //-128
console.log(view2[1]);   //127

为了防止这样的状况，js 有一个 Unit8ClampedArray, 使整数方向的溢出值为255，0方向的易楚志为0。注意这是个无符号的类型；

var view = new Uint8ClampedArray(2);
view[0] = 256;
view[1] = -1;

console.log(view[0]);   //255
console.log(view[1]);   //0

复合视图

划分一块 buffer 使用获得 C 语言中的结构体

var buf = new ArrayBuffer(24);
var name = new Uint8Array(buf, 0, 16);
var gender = new Uint8Array(buf, 16, 1);
var age = new Uint16Array(buf, 18, 1);
var score = new Float32Array(buf,20,1);

至关于如下 C语言代码

struct Person{
  char name[16];
  char gender;
  int age;
  float score;
}

共用一块 buffer 使用获得 C 语言中的联合体

var buf = new ArrayBuffer(8);
var num = new Uint16Array(buf);
var dotNum = new Float64Array(buf);

至关于如下 C语言代码

union Example{
  int num[4];
  double dotNum;
}

DataView

具备一个构造函数 DataView(), 接受一个ArrayBuffer参数,视图化该段内存。毕竟当一段内存有多种数据时，复合视图也不是那么方便，这时适合使用 DataView 视图。其次 DataView 能够自定义高位优先和低位优先，这样能够读取的数据就更多了。
DataView构造函数形式以下,这一点和 TypedArray 一致：

(buffer, start=0, len=buffer.byteLength-start*8)

它具备如下方法格式化读取 buffer 中的信息：

• getInt8(start, isLittleEndian): 从 start 字节处读取 1 个字节，返回一个8位有符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• getUint8(start, isLittleEndian): 从 start 字节处读取 1 个字节，返回一个8位无符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• getInt16(start, isLittleEndian): 从 start 字节处读取 2 个字节，返回一个16位有符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• getUint16(start, isLittleEndian): 从 start 字节处读取 2 个字节，返回一个16位无符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• getInt32(start, isLittleEndian): 从 start 字节处读取 4 个字节，返回一个32位有符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• getUint32(start, isLittleEndian): 从 start 字节处读取 4 个字节，返回一个32位无符号整数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• getFloat32(start, isLittleEndian): 从 start 字节处读取 4 个字节，返回一个32位浮点数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• getFloat64(start, isLittleEndian): 从 start 字节处读取 8 个字节，返回一个64位浮点数, 第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

它具备如下方法格式化写入 buffer 中的信息：

• setInt8(start,value,isLittleEndian): 在 start位置写入 1 个字节的8位有符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• setUint8(start,value,isLittleEndian): 在 start位置写入 1 个字节的8位无符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• setInt16(start,value,isLittleEndian): 在 start位置写入 2 个字节的16位有符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• setUint16(start,value,isLittleEndian): 在 start位置写入 2 个字节的16位无符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• setInt32(start,value,isLittleEndian): 在 start位置写入 4 个字节的32位有符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• setUint32(start,value,isLittleEndian): 在 start位置写入 4 个字节的32位无符号整数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• setFloat32(start,value,isLittleEndian): 在 start位置写入 4 个字节的32位浮点数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；
• setFloat64(start,value,isLittleEndian): 在 start位置写入 8 个字节的64位浮点数value；第二参默认为 false 表示使用高位优先，为 true 表示低位优先；

它具备如下属性和方法：

• buffer属性：返回该视图对于的二进制内存区域
• byteLength: 返回该视图对于的内存大小，只读
• byteOffset: 返回该视图从对应 buffer 的哪一个字节开始，只读

若是你不知道计算机使用的是高位优先仍是低位优先，也能够自行判断：

//方法1
const BIG_ENDIAN = Symbol('BIG_ENDIAN');
const LITTLE_ENDIAN = Symbol('LITTLE_ENDIAN');
function getPlatformEndianness(){
  let arr32 =  Uint32Array.of(0x12345678);
  let arr8 = new Uint8Array(arr32.buffer);
  switch((arr8[0]*0x1000000)+(arr8[1]*0x10000)+(arr8[2]*0x100)+arr8[3]){
    case 0x12345678: return BIG_ENDIAN;
    case 0x78563412: return LITTLE_ENDIAN;
    default: throw new Error("unknow Endianness");
  }
}

//方法2
window.isLittleEndian = (function(){
  var buffer = new ArrayBuffer(2);
  new DataView(buffer).setInt16(0, 256, true);
  return new Int16Array(buffer)[0] === 256;
}());