从 ArrayBuffer 到 TypedArray，数据存储、读取方式大不同！

2023-12-21 20:17:57

ArrayBuffer：存储二进制数据的容器

ArrayBuffer 对象代表存储二进制数据的一段内存，它本质上是一个字节数组，可以存储任何类型的数据，包括整数、浮点数、字符串等。ArrayBuffer 对象本身不能直接访问其中的数据，需要通过 TypedArray 对象来进行读写操作。

const arrayBuffer = new ArrayBuffer(16); // 创建一个长度为 16 字节的 ArrayBuffer 对象

// 使用 Uint8Array 对象来读写 ArrayBuffer 中的数据
const uint8Array = new Uint8Array(arrayBuffer);
uint8Array[0] = 0xFF; // 将第一个字节设置为 255
console.log(uint8Array[0]); // 输出：255

TypedArray：提供特定数据类型的视图

TypedArray 对象是 ArrayBuffer 的子类，它提供了对 ArrayBuffer 中数据的特定数据类型的视图。TypedArray 对象包括 Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array 和 Float64Array 等多种类型，每种类型都对应着一种特定的数据类型。

TypedArray 对象的长度与它所绑定的 ArrayBuffer 对象的长度相同，并且它可以直接访问 ArrayBuffer 中的数据，而无需显式地进行类型转换。

const arrayBuffer = new ArrayBuffer(16);
const int32Array = new Int32Array(arrayBuffer);

int32Array[0] = 123456789; // 将第一个整数设置为 123456789
console.log(int32Array[0]); // 输出：123456789

DataView：提供不同数据类型的访问方式

DataView 对象也是 ArrayBuffer 的子类，它提供了一种更灵活的方式来访问 ArrayBuffer 中的数据。DataView 对象允许你将 ArrayBuffer 中的数据视为不同数据类型的数组，比如 Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array 和 Float64Array。

DataView 对象还提供了多种方法来读取和写入数据，包括 get、set、getFloat32、setInt32 等方法。

const arrayBuffer = new ArrayBuffer(16);
const dataView = new DataView(arrayBuffer);

dataView.setInt32(0, 123456789); // 将第一个整数设置为 123456789
console.log(dataView.getInt32(0)); // 输出：123456789

对比和使用场景

ArrayBuffer、TypedArray 和 DataView 之间的对比如下：

特性	ArrayBuffer	TypedArray	DataView
数据类型	任意类型	特定类型	特定类型
访问方式	通过 TypedArray 对象	直接访问	通过方法访问
性能	较快	较慢	较慢
使用场景	存储二进制数据	提供特定数据类型的视图	灵活访问不同数据类型的数组