Skip to content

ArrayBuffer 就是一个对象,用于存储一块固定内存大小的数据。ArrayBuffer 可以对存储的数据进行更加精细的控制,并且内存大小是固定的。

js
const ab = new ArrayBuffer(16);//创建一个16字节的ArrayBuffer
ab.byteLength;//可以获得字节数,当然,这个字节数其实在创建的时候就固定了
const ab2 = ab.slice(4,6);//复制出一个新的ArrayBuffer出来,这里将下标为4,5这两个字节的内容复制出来,组成一个新的ArrayBuffer,注意,下标从0开始。所以这个ab2就会得到长度为2的ArrayBuffer

如果我们要操作 ArrayBuffer 内部的数据,比如读写操作,不能使用 ArrayBuffer 本身去实现,需要用其他方式来读写,有两种方式,分别是 DataView 和类型化数组,主要了解类型化数组。

js
const buffer = new ArrayBuffer(16);//创建一个16个字节的缓冲区
const view = new DataView(buffer);//传入一个缓冲区,创建一个视图
//有时候我们并不需要对缓冲区完整操作,可能只是操作其中一部分,就可以创建一个部分视图
//new DataView(buffer,5);这里表示视图从第5个字节开始
//new DataView(buffer,5,4);表示偏移量是5,即从第五个字节开始操作,一共要操作4个字节
//如果指定的参数长度超过了ArrayBuffer本身的大小,会报错

以上就创建了一个 DataView,我们可以使用两组方法对 ArrayBuffer 进行操作,分别是 set 组和 get 组

![Pasted image 20240505162849](/notes-assets/03.ES6/12.数组增强/assets/Pasted image 20240505162849.png)

![Pasted image 20240505162858](/notes-assets/03.ES6/12.数组增强/assets/Pasted image 20240505162858.png)

这两组方法分别对应了写和读操作,表示我要按照哪种格式去写或读,我们使用 setInt8 和 getInt8 来示范

js
view.setInt8(1, 3);//这个代码表示,将view中数据按照8位整数进行分割为数组,然后将下标为1的数组项设置为数字3
view.getInt8(1);//一样,将view中的数据按照8位分割为数组,然后将下标为1的数组项设置为3

很显然,在 DataView 中,我们可能会混用,比如用 8 位读,16 位取,所以一般只有在需要混用的时候使用 DataView ,更多的时候使用类型化数组。

实际上,每一个类型化数组本质上都是一个 ArrayBuffer,我们创建类型化数组的时候默认就新建了一个指定大小的 ArrayBuffer,当然,我们创建类型化数组的时候实际上是可以指定 ArrayBuffer 的。

js
const buffer = new ArrayBuffer(10);
const arr = new Int8Array(buffer);//可以传入一个ArrayBuffer
//此时就可以通过操作arr数组的方式来操作buffer
const arr2 = new Int16Array(buffer);
//我们还可以把这个ArrayBuffer传递给多个类型化数组,此时这两个类型化数组操作的就是同一个内存空间

以笔记为镜,可以知得失