二进制数组

https://javascript.ruanyifeng.com/stdlib/arraybuffer.html

ArrayBuffer对象、TypedArray对象、DataView对象是JavaScript操作二进制数据的一个接口。这些对象早就存在，属于独立的规格，ES6将它们纳入了ECMAScript规格，并且增加了新的方法。

这些对象原始的设计目的，与WebGL项目有关。所谓WebGL，就是指浏览器与显卡之间的通信接口，为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式。文本格式传递一个32位整数，两端的JavaScript脚本与显卡都要进行格式转化，将非常耗时。这时要是存在一种机制，可以像C语言那样，直接操作字节，将4个字节的32位整数，以二进制形式原封不动地送入显卡，脚本的性能就会大幅提升。

二进制数组由三个对象组成。

（1）ArrayBuffer对象：代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。

（2) TypedArray对象：用来生成内存的视图，通过9个构造函数，可以生成9种数据格式的视图，比如Uint8Array（无符号8位整数）数组视图, Int16Array（16位整数）数组视图, Float32Array（32位浮点数）数组视图等等。

（3）DataView对象：用来生成内存的视图，可以自定义格式和字节序，比如第一个字节是Uint8（无符号8位整数）、第二个字节是Int16（16位整数）、第三个字节是Float32（32位浮点数）等等。

简单说，ArrayBuffer对象代表原始的二进制数据，TypedArray对象代表确定类型的二进制数据，DataView对象代表不确定类型的二进制数据。它们支持的数据类型一共有9种（DataView对象支持除Uint8C以外的其他8种）。

1. ArrayBuffer

ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图（TypedArray视图和DataView视图)来读写，视图的作用是以指定格式解读二进制数据。

• 为了读写这段内容，需要为它指定视图。DataView视图的创建，需要提供ArrayBuffer对象实例作为参数。

  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
  

属性及方法

byteLength：返回所分配的内存区域的字节长度

slice：允许将内存区域的一部分，拷贝生成一个新的ArrayBuffer对象。

isView：返回一个布尔值，表示参数是否为ArrayBuffer的视图实例。这个方法大致相当于判断参数，是否为TypedArray实例或DataView实例

2. TypedArray

ArrayBuffer对象作为内存区域，可以存放多种类型的数据。同一段内存，不同数据有不同的解读方式，这就叫做“视图”（view）。ArrayBuffer有两种视图，一种是TypedArray视图，另一种是DataView视图，两者的区别主要是字节序，前者的数组成员都是同一个数据类型，后者的数组成员可以是不同的数据类型。

目前，TypedArray对象一共提供9种类型的视图，每一种视图都是一种构造函数。

Int8Array：8位有符号整数，长度1个字节。

Uint8Array：8位无符号整数，长度1个字节。

Uint8ClampedArray：8位无符号整数，长度1个字节，溢出处理不同。

Int16Array：16位有符号整数，长度2个字节。

Uint16Array：16位无符号整数，长度2个字节。

Int32Array：32位有符号整数，长度4个字节。

Uint32Array：32位无符号整数，长度4个字节。

Float32Array：32位浮点数，长度4个字节。

Float64Array：64位浮点数，长度8个字节。

// 创建一个8字节的ArrayBuffer
var b = new ArrayBuffer(8);

// 创建一个指向b的Int32视图，开始于字节0，直到缓冲区的末尾
var v1 = new Int32Array(b);

// 创建一个指向b的Uint8视图，开始于字节2，直到缓冲区的末尾
var v2 = new Uint8Array(b, 2);

// 创建一个指向b的Int16视图，开始于字节2，长度为2
var v3 = new Int16Array(b, 2, 2);

属性及方法

BYTES_PER_ELEMENT： 表示这种数据类型占据的字节数。

Int8Array.BYTES_PER_ELEMENT // 1
Uint8Array.BYTES_PER_ELEMENT // 1
Int16Array.BYTES_PER_ELEMENT // 2
Uint16Array.BYTES_PER_ELEMENT // 2
Int32Array.BYTES_PER_ELEMENT // 4
Uint32Array.BYTES_PER_ELEMENT // 4
Float32Array.BYTES_PER_ELEMENT // 4
Float64Array.BYTES_PER_ELEMENT // 8

3. DataView

DataView视图提供更多操作选项，而且支持设定字节序。本来，在设计目的上，ArrayBuffer对象的各种TypedArray视图，是用来向网卡、声卡之类的本机设备传送数据，所以使用本机的字节序就可以了；而DataView视图的设计目的，是用来处理网络设备传来的数据，所以大端字节序或小端字节序是可以自行设定的。

DataView(ArrayBuffer buffer [, 字节起始位置 [, 长度]]);

DataView实例提供8个方法读取内存。

getInt8：读取1个字节，返回一个8位整数。

getUint8：读取1个字节，返回一个无符号的8位整数。

getInt16：读取2个字节，返回一个16位整数。

getUint16：读取2个字节，返回一个无符号的16位整数。

getInt32：读取4个字节，返回一个32位整数。

getUint32：读取4个字节，返回一个无符号的32位整数。

getFloat32：读取4个字节，返回一个32位浮点数。

getFloat64：读取8个字节，返回一个64位浮点数。

var buffer = new ArrayBuffer(24);
var dv = new DataView(buffer);

// 从第1个字节读取一个8位无符号整数
var v1 = dv.getUint8(0);

// 从第2个字节读取一个16位无符号整数
var v2 = dv.getUint16(1);

// 从第4个字节读取一个16位无符号整数
var v3 = dv.getUint16(3);

// 小端字节序
var v1 = dv.getUint16(1, true);

// 大端字节序
var v2 = dv.getUint16(3, false);

// 大端字节序
var v3 = dv.getUint16(3);

DataView视图提供8个方法写入内存。

• setInt8：写入1个字节的8位整数。
• setUint8：写入1个字节的8位无符号整数。
• setInt16：写入2个字节的16位整数。
• setUint16：写入2个字节的16位无符号整数。
• setInt32：写入4个字节的32位整数。
• setUint32：写入4个字节的32位无符号整数。
• setFloat32：写入4个字节的32位浮点数。
• setFloat64：写入8个字节的64位浮点数。

// 在第1个字节，以大端字节序写入值为25的32位整数
dv.setInt32(0, 25, false);

// 在第5个字节，以大端字节序写入值为25的32位整数
dv.setInt32(4, 25);

// 在第9个字节，以小端字节序写入值为2.5的32位浮点数
dv.setFloat32(8, 2.5, true);

4.二进制数组的应用

• AJAX

  传统上，服务器通过AJAX操作只能返回文本数据，即responseType属性默认为text。XMLHttpRequest第二版XHR2允许服务器返回二进制数据，这时分成两种情况。如果明确知道返回的二进制数据类型，可以把返回类型（responseType）设为arraybuffer；如果不知道，就设为blob。

• Canvas

  网页Canvas元素输出的二进制像素数据，就是类型化数组。

• WebSocket

  WebSocket可以通过ArrayBuffer，发送或接收二进制数据。

• Fetch API

  Fetch API取回的数据，就是ArrayBuffer对象。

• File API

  如果知道一个文件的二进制数据类型，也可以将这个文件读取为ArrayBuffer对象。

5. ArrayBuffer和Array区别

1. 数组里面可以放数字、字符串、布尔值以及对象和数组等，ArrayBuffer放0和1组成的二进制数据
2. 数组放在堆中，ArrayBuffer则把数据放在栈中（所以取数据时后者快）
3. ArrayBuffer初始化后固定大小，数组则可以自由增减。