ArrayBuffer对象到底是什么 简单读懂

ArrayBuffer

ArrayBuffer对象是 JavaScript 操作二进制数据的一个接口。属于独立的规格（2011 年 2 月发布），ES6 将它们纳入了 ECMAScript 规格。它以数组的语法处理二进制数据，所以称为二进制数组。

二进制数组就是在这种背景下诞生的。它允许开发者以数组下标的形式，直接操作内存，大大增强了 JavaScript 处理二进制数据的能力。

二进制数组由三类对象组成 ArrayBuffer、TypedArray、DataView 简单说，ArrayBuffer对象代表原始的二进制数据，TypedArray视图用来读写简单类型的二进制数据，DataView视图用来读写复杂类型的二进制数据。

ArrayBuffer 对象

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

ArrayBuffer也是一个构造函数，可以分配一段可以存放数据的连续内存区域。 在一段32 字节的内存区域，每个字节的值默认都是 0。可以看到，ArrayBuffer构造函数的参数是所需要的内存（字节）。

const buf = new ArrayBuffer(32);
复制代码

DataView视图的创建，需要提供ArrayBuffer对象实例作为参数。 建立DataView视图，然后以不带符号的 8 位整数格式，从头读取 8 位二进制数据，结果得到 0，因为原始内存的ArrayBuffer对象，默认所有位都是 0。

const buf = new ArrayBuffer(32);
const dataView = new DataView(buf);
dataView.getUint8(0)
复制代码

TypedArray视图，与DataView视图的区别代表不同的数据格式，它不是一个构造函数，而是一组构造函数。 分别是32 位带符号整数（Int32Array构造函数）和 8 位不带符号整数（Uint8Array构造函数）。由于两个视图对应的是同一段内存，一个视图修改底层内存，会影响到另一个视图。

const buffer = new ArrayBuffer(12);
const x1 = new Int32Array(buffer);
x1[0] = 1;
const x2 = new Uint8Array(buffer);
x2[0]  = 2;
x1[0]
复制代码

ArrayBuffer.isView()

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

const buffer = new Int32Array(buffer);
ArrayBuffer.isView(buffer)
复制代码

ArrayBuffer.prototype.slice()

ArrayBuffer实例有一个slice方法，允许将内存区域的一部分，拷贝生成一个新的ArrayBuffer对象。

const buffer = new ArrayBuffer(8);
const newBuffer = buffer.slice(0, 3);
复制代码

slice方法接受两个参数，第一个参数表示拷贝开始的字节序号（含该字节），第二个参数表示拷贝截止的字节序号（不含该字节）。如果省略第二个参数，则默认到原ArrayBuffer对象的结尾。

除了slice方法，ArrayBuffer对象不提供任何直接读写内存的方法，只允许在其上方建立视图，然后通过视图读写。

ArrayBuffer.prototype.byteLength

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

const buffer = new ArrayBuffer(32);
buffer.byteLength
// 32
复制代码

如果要分配的内存区域很大，有可能分配失败（因为没有那么多的连续空余内存），所以有必要检查是否分配成功。