ES6重读及新感（Arraybuffer类重读）

 

前言：

ArrayBuffer类在浏览器端并不会很常用，浏览器端使用该方法，大部分用于处理上传文件的操作（html5中新增了webgl，也会用来写一些喂webgl功能），因此很多前端同学会认为这个语法糖并没有太大的作用。实际来说，在浏览器端大部分需要二进制流操作的部分，都由浏览器端，帮我们解决了，最典型的列子即http请求。如果浏览器端不进行处理，那我们就需要频繁的操作二进制流进行http协议的解析和数据的解析。但ArrayBuffer对node是很常见的，由于node端有大量涉及文件操作的需求，因此掌握ArrayBuffer类还有有足够必要的

一、ArrayBuffer 对象

1、作用：

用来创建二进制数据片段，不能直接读写，只能通过“视图”（TypedArray、DataView）进行操作。对同一个ArrayBuffer对象生成的内存中，生成多个视图，当对视图进行修改时，内存对象中的数据也会改变。创建ArrayBuffer对象以及视图，计算机只会分配固定的内存空间，而不涉及硬盘空间的写入。

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

2、API：

byteLength：创建的ArrayBuffer内存片段，获取buffer的长度（二进制），如果要分配的内存区域很大，有可能分配失败（因为没有那么多的连续空余内存），所以有必要检查是否分配成功。

if (buffer.byteLength === n) {
  // 检测成功
} else {
  // 检测失败
}

slice：该方法会拷贝生成新的ArrayBuffer对象，api其他操作同Array.prototype.slice。slice方法其实包含两步，第一步是先分配一段新内存，第二步是将原来那个ArrayBuffer对象拷贝过去

isView：用来表示参数是否为ArrayBuffer的视图实例。

const buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer) // false

const v = new Int32Array(buffer);
ArrayBuffer.isView(v) // true

 

二、TypedArray视图

1、作用：

用来对已经创建的ArrayBuffer对象创建视图，视图中可以选择多种数据类型，方便操作各种情况的数据。只能创建一种数据类型的视图

TypedArray 数组的所有成员，都是同一种类型。

TypedArray 数组的成员是连续的，不会有空位。

TypedArray 数组成员的默认值为 0。比如，new Array(10)返回一个普通数组，里面没有任何成员，只是 10 个空位；new Uint8Array(10)返回一个 TypedArray 数组，里面 10 个成员都是 0。

TypedArray 数组只是一层视图，本身不储存数据，它的数据都储存在底层的ArrayBuffer对象之中，要获取底层