JavaScript中的ArrayBuffer详解|极客笔记

JavaScript中的ArrayBuffer详解

JavaScript中的ArrayBuffer是一种通用的固定长度二进制数据缓冲区，它允许您在不使用原始数据类型的情况下操作二进制数据。ArrayBuffer对象表示通用的固定长度二进制数据缓冲区，您可以对其进行整体操作。

创建ArrayBuffer

您可以使用以下方式创建一个ArrayBuffer对象：

const buffer = new ArrayBuffer(16);

上述代码将创建一个16个字节大小的ArrayBuffer对象。您还可以通过ArrayBuffer的byteLength属性获取缓冲区的字节长度。

console.log(buffer.byteLength); // 16

ArrayBufferViews

ArrayBufferViews是一系列用于与ArrayBuffer数据进行交互的视图。在JavaScript中，有多种类型的ArrayBufferViews，每种都提供了一种不同的方式来查看ArrayBuffer数据。

TypedArray

TypedArray是ArrayBufferViews的一个子类，它提供了对二进制数据的一组数字化的视图。这些视图允许您读取和写入二进制数据，而无需了解具体的二进制表示形式。

以下是JavaScript中的一些常见TypedArray：

Int8Array
Uint8Array
Int16Array
Uint16Array
Int32Array
Uint32Array
Float32Array
Float64Array

您可以通过以下方式创建一个TypedArray：

const intArray = new Int32Array(buffer);

上述代码将创建一个Int32Array视图，该视图将整个ArrayBuffer对象作为其数据源。现在，您可以通过TypedArray的索引来访问和修改ArrayBuffer的数据：

intArray[0] = 42;
console.log(new Int32Array(buffer)); // Int32Array(4) [42, 0, 0, 0]

DataView

DataView是另一种ArrayBufferViews，它提供了对ArrayBuffer数据的灵活读取和写入。相较于TypedArray，DataView更加灵活，因为它允许您以不同的字节顺序来读取和写入数据。

以下是一个使用DataView来读写ArrayBuffer数据的示例：

const dataView = new DataView(buffer);

dataView.setInt8(0, 42);
console.log(dataView.getInt8(0)); // 42

示例代码

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

// 创建一个Int32Array视图
const intArray = new Int32Array(buffer);

// 修改ArrayBuffer数据
intArray[0] = 42;

// 创建一个DataView
const dataView = new DataView(buffer);

// 通过DataView读写数据
dataView.setInt8(4, 127);
console.log(dataView.getInt8(4)); // 127