什么是 ArrayBuffer ?

102 阅读2分钟

什么是ArrayBuffer?

ArrayBuffer是固定长度连续内存空间的引用。ArrayBuffer 对象代表存储一段二进制数据的内存,并不能直接读写,只能通过视图来读写,视图的作用是以指定格式来解读二进制数据。

(这里需要注意一点的是,在我们日常查看 Buffer 数据的时候都不是其原始值,而是经过计算机转换后的视图数据。这一点也对应了上面说的不能直接进行读写。)

什么是视图?

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

如何创建一个buffer?

// 创建一个8字节的buffer
const buffer = new ArrayBuffer(8);

// 创建一个指向buffer的Uint8视图,起始位置为0,长度为视图的末尾
const v = new Uint8Array(buffer, 0);

// 赋值,可以支持 0~256范围内的值
v[0] = 112;

什么是TypedArray?

TypedArray总共有9种类型,但是一般我们用的是第二种8位无符号整数。

  • 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 字节的缓冲区用于存储数据,然后通过转换视图来给第 0 位和第 1 位分别赋值,然后就可以看到 buffer 的内容如下。注意的是数据的查看是从右向左来存储的。

1.png

下图可以看到不同的视图展示内容是不一样的,其实数据是以二进制的形式存储的,但是在读取展示的时候我们不会直接显示二进制值,而是会转换成十进制的数据给我们看。

2.png

参考文档

developer.mozilla.org/zh-CN/docs/…