JavaScript 中 ArrayBuffer 和 Float32Array 的使用指南

在 JavaScript 中，如果我们需要处理大量的二进制数据，例如图像、音频或 3D 模型，使用普通的数组可能会导致性能问题。这时，ArrayBuffer 和类型化数组（例如 Float32Array）就派上用场了。

原理

ArrayBuffer 实际上是一块预分配的内存区域，你可以把它想象成一块空白的画布。而 Float32Array 则像是在这块画布上放置的一块透明玻璃板，它允许你以特定的数据类型（这里是 32 位浮点数）来访问和操作底层的 ArrayBuffer 数据。

简单一点总结，就是：

• ArrayBuffer: 一块原始的内存区域。
• Float32Array: 一个“视图”，允许你以 32 位浮点数的形式访问和操作 ArrayBuffer 中的数据。

用法

1、创建 ArrayBuffer

使用 ArrayBuffer 构造函数创建一个指定大小（以字节为单位）的内存区域：

const buffer = new ArrayBuffer(16); // 分配 16 字节的内存
console.log(buffer.byteLength); // 输出: 16

2、创建类型化数组视图

使用类型化数组构造函数（例如 Float32Array）创建视图，并将其与 ArrayBuffer 关联：

const float32View = new Float32Array(buffer); // 创建一个 Float32Array 视图

现在，你可以像操作普通数组一样操作 float32View，每个元素将被视为 32 位浮点数。

3、访问和修改数据

float32View[0] = 10.5; // 设置第一个元素为 10.5
console.log(float32View[0]); // 输出: 10.5

4、复制 ArrayBuffer

使用 slice() 方法可以复制 ArrayBuffer 的全部或部分内容到一个新的 ArrayBuffer 实例中:

const newBuffer = buffer.slice(4, 12); // 复制 buffer 从第 4 个字节到第 12 个字节的内容
console.log(newBuffer.byteLength); // 输出: 8

示例代码

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

// 创建一个 Float32Array 视图
const float32View = new Float32Array(buffer);

// 设置数组元素的值
float32View[0] = 1.23;
float32View[1] = 4.56;

// 打印数组内容
console.log(float32View); // 输出: [1.23, 4.56, 0, 0]

// 复制部分 ArrayBuffer
const newBuffer = buffer.slice(8, 16); // 复制后半部分

// 创建一个新的 Float32Array 视图，关联到新的 ArrayBuffer
const newFloat32View = new Float32Array(newBuffer);

// 打印新数组内容
console.log(newFloat32View); // 输出: [0, 0]