ES6之二进制

JavaScript操作二进制数据的接口分别为 ArrayBuffer对象、TypeArray视图、DataView视图，ES6将它们纳入ECMAScript规格，它们都是以数组的语法处理二进制数据，所以统称为二进制数组。

JS下的二进制数组很像C语言的数组，允许开发者以数组下标的形式，直接操作内存。

二进制数组由三类对象组成：

1. ArrayBuffer对象：代表内存之中的一段二进制数据，可以通过'视图'进行操作。"视图"部署了数组接口，这意味着，可以用数组的方法操作内存。
2. TypedArray视图：一共包括9中类型的视图，比如Uint8Array Int16Array数组视图，Float32Array数组视图
3. DataView视图：可以自定义复合格式的视图，比如第一个字节是uint8、第二 第三字节是Int16、第四五六七字节开始是Float32等等，此外还可以自定义字节。

总结来说ArrayBuffer对象表示原始的二进制数据，TypedArray视图用来读写简单类型的二进制数据，DataView用来表示复杂类型的二进制数据。

TypedArray视图支持的数据类型一共有9种

数据类型	字节长度	含义	对应的C语言类型
Int8	1	8位带符号整数	Signed char
Uint8	1	8位不带符号整数	Unsigned char
Int16	2	16位	short
Uint16	2		unsigned short
Int32	4	32位	int
Uint32	4	32位	Unsigned int
Float32	4	32位浮点数	float
Float64	8	64位浮点数	double

二进制数组并不是真正的数组，而是类型数组的对象

1. ArrayBuffer对象

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

const buf = new ArrayBuffer(32);
// 默认所有的字节的值都是0

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

const buf = new ArrayBuffer(32);
const dataview = new DataView(buf);
dataview.getUint(0); // 0

也可以使用typeArray视图，与DataView不同之处在于，它不是一个构造函数 而是一群构造函数，代表不同的数据格式

const buffer = new ArrayBuffer(32)
const x1 = new Int32Array(buffer);
const x2 = new Uint8Array(buffer);

上述代码对同一段内存，分别建立两种视图：32位带符号整数和8位不带符号整数。因为底层是同一段内存，所有不同的视图对象操作这一段内存，会相互影响

• ArrayBuffer.prototype.byteLength: ArrayBuffer实例的byteLength属性，返回所分配的内存区域的字节长度

• ArrayBuffer.prototype.slice(): 实例有一个slice方法，允许讲内存区域的一部分，拷贝生成一个新的ArrayBuffer对象

  const buffer = new ArrayBuffer(8);
  const newBuffer = buffer.slice(0,3);// 返回一个新的ArrayBuffer对象
  

• ArrayBuffer.isView() 静态方法 返回一个boolean 表示参数是否位ArrayBuffer的视图实例

TypedArray 视图

ArrayBuffer对象作为内存区域，可以存放多种类型的数据。 同一段内存，不同数据有不同的解读方式，这就叫做『视图（View）』

TypedArray一共有9种类型，每一种视图都是一种构造函数。

• Int8Array
• Uint8Array
• Uint8ClampedArray
• Int16Array
• Uint16Array
• Int32Array
• Uint32Array
• Float32Array
• Float64Array

基本可以按照数组来处理所有的数据，但是还是略微差异：

• TypedArray数组的所有成员，都是同一类型
• TypedArray数组的成员是连续的，不会有空位
• TypedArray数组成员的默认值为0，new Array(10) 里面没有任何成员，只有10个空位，new Uint8Array(10)返回有个TypedArray数组，里面10个成员都是0
• TypedArray数组只有一层视图，本身不存储数据，它的数据都存储在底层的ArrayBuffer对象之中，要获取底层对象必须使用buffer属性。

构造函数：

TypedArray(buffer, byteOffset = 0, length?)

同一个ArrayBuffer对象之上，可以根据不同的数据类型，建立多个视图

数组方法

• TypedArray.prototype.copyWithin(target, start, end)
• TypedArray.prototype.entries()
• TypedArray.prototype.every(callbackfn , thisArg?)
• TypedArray.prototype.fill(value, start = 0, end= this.length)
• TypedArray.prototype.filter(callbackfn, thisargs?)
• TypedArray.prototype.find(predicate, thisargs?)
• TypedArray.prototype.findIndex(predicate, thisargs)
• TypedArray.prototype.forEach(callbackfn, thisArgs)
• TypedArray.prototype.indexOf(searchElement, fromIndex)
• TypedArray.prototype.join(separator )
• TypedArray.prototype.keys()
• TypedArray.prototype.lastIndexOf(searchElement, fromIndex?)
• TypedArray.prototype.map(callbackFn, thisArgs?)
• TypedArray.prototype.reduce(callbackfn, initialValue?)
• TypedArray.prototype.reverse()
• TypedArray.prototype.slice(start = 0. End = this.length)
• TypedArray.prototype.some(callbackfn,thisArg?)
• TypedArray.prototype.sort(comparefn)
• TypedArray.prototype.toString()
• TypedArray.prototype.values()

字节序

字节序指的是数值在内存中的表示方式

• 小端字节序

  x86体系的计算机都采用小端字节序，相对重要的字节排在后面的内存地址，相对不重要字节排在前面的内存地址。

• 大端字节序

  很多网络设备和特定的操作系统采用的是大端字节序

问题出现在所有的TypedArray数组内部采用小端字节读取数据，如果一段数据是大端字节序，typedArray数组将无法正确解析，此时只能采用DataView对象，设定字节序。

DataView视图

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

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

DataView实例有以下属性，含义与TypedArray实例的同名方法相同

• DataView.prototype.buffer: 返回对应的ArrayBuffer对象
• DataView.prototype.byteLength: 返回占据的内存字节长度
• DataView.prototype.byteOffset: 返回当前视图从对应的ArrayBuffer对象的哪个字节开始的