ArrayBuffer 表示二进制数据缓冲区,创建 ArrayBuffer 就是在内存中申请一块连续的二进制数据存储区域。
ArrayBuffer 本身没有直接的数据访问方法,它仅表示一个存储二进制数据的容器。要操作 ArrayBuffer,可以使用 TypedArray 或 DataView。
TypedArray
TypedArray 是一个抽象基类,它有以下几种类型的实现:
- Int8Array
- Uint8Array
- Uint8ClampedArray
- Int16Array
- Uint16Array
- Int32Array
- Uint32Array
- Float32Array
- Float64Array
- BigInt64Array
- BigUint64Array
下面通过例子介绍 Uint8Array 和 Int32Array。
Uint8Array
Uint8Array 表示按 8 位无符号整数操作 ArrayBuffer。
const buffer = new ArrayBuffer(4) // 分配 4 字节内存
const uint8Array = new Uint8Array(buffer) // 按 8 位无符号整数操作内存
uint8Array[0] = 42 // 第一个字节 ( 8 位 ) 的值为 42
uint8Array[0] // 42
Int32Array
Int32Array 表示按 32 位有符号整数操作 ArrayBuffer。
const buffer = new ArrayBuffer(8) // 分配 8 字节内存
const int32Array = new Int32Array(buffer) // 按 32 位有符号整数操作
int32Array[0] = -123; // 第一个 32 位值为 -123
int32Array[0] // -123
DataView
DataView 提供了一种灵活的方式来处理不同类型的数据,不需要考虑数据的类型和字节顺序。
const buffer = new ArrayBuffer(6) // 6 个字节的 ArrayBuffer
const dataView = new DataView(buffer) // 用 DataView 操作 buffer
dataView.setInt16(0, 42) // 设置 16 位整数(2 字节)为 42
dataView.setFloat32(2, 3.14) // 设置 32 位浮点数(4 字节)为 3.14
// 从 DataView 读取数据
const int16Value = dataView.getInt16(0) // 读取 16 位整数
const float32Value = dataView.getFloat32(2) // 读取 32 位浮点数
console.log('16-bit integer:', int16Value)
console.log('32-bit float:', float32Value)
其中 setInt16、setFloat32 的第一个参数表示字节偏移量,第二个参数表示存入的值。
比如 settInt16(0, 42) 表示从第 0 个字节开始,存入一个 16 位整数,它将占用 2 个字节,setFloat32(2, 3.14) 从第 2 个字节开始,存入一个 32 位整数,它将占用 4 个字节。
总结
ArrayBuffer 是内存中一块连续的区域,TypedArray 和 DataView 是对这块内存操作的格式。其中 TypedArray 有 Int8Array、Float32Array 等多种格式,而 DataView 则是允许以多种格式操作和访问这块内存。