ES10 中的 ArrayBuffer 和 ArrayBufferView 详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理二进制数据，例如图片、音频等。在 ES10 中，引入了 ArrayBuffer 和 ArrayBufferView，这两个新的 API 可以更方便地处理二进制数据，提高了前端开发的效率。

什么是 ArrayBuffer？

ArrayBuffer 是一种用于处理二进制数据的对象，它类似于一个数组，但是它不能直接访问和修改其内容。ArrayBuffer 对象的大小是固定的，一旦分配了空间，就不能改变其大小。

以下是创建 ArrayBuffer 的语法：

const buffer = new ArrayBuffer(size);

其中，size 为所需的 ArrayBuffer 大小，以字节为单位。例如，创建一个 16 字节的 ArrayBuffer：

const buffer = new ArrayBuffer(16);

什么是 ArrayBufferView？

ArrayBufferView 是一种类数组对象，用于访问 ArrayBuffer 中的数据。ArrayBufferView 包括 TypedArray 和 DataView 两种类型。

TypedArray

TypedArray 是一种数组类型，它可以直接访问 ArrayBuffer 中的数据。TypedArray 包括以下几种类型：

Int8Array：8 位有符号整数数组
Uint8Array：8 位无符号整数数组
Uint8ClampedArray：8 位无符号整数数组（保证值在 0~255 之间）
Int16Array：16 位有符号整数数组
Uint16Array：16 位无符号整数数组
Int32Array：32 位有符号整数数组
Uint32Array：32 位无符号整数数组
Float32Array：32 位浮点数数组
Float64Array：64 位浮点数数组

以下是创建 TypedArray 的语法：

const array = new TypedArray(buffer, byteOffset, length);

其中，buffer 为要访问的 ArrayBuffer 对象，byteOffset 为从 buffer 的哪个字节开始访问，length 为要访问的元素个数。例如，创建一个 Int16Array，访问 buffer 的第 4 个字节开始，长度为 2：

const buffer = new ArrayBuffer(8);
const array = new Int16Array(buffer, 4, 2);

DataView

DataView 是一种通用的数据访问类型，它可以访问 ArrayBuffer 中的任意数据类型。DataView 对象的操作比 TypedArray 更加灵活，但是相对来说性能较差。

以下是创建 DataView 的语法：

const view = new DataView(buffer, byteOffset, byteLength);

其中，buffer 为要访问的 ArrayBuffer 对象，byteOffset 为从 buffer 的哪个字节开始访问，byteLength 为要访问的字节数。例如，创建一个 DataView，访问 buffer 的第 4 个字节开始，长度为 2：

const buffer = new ArrayBuffer(8);
const view = new DataView(buffer, 4, 2);

示例代码

以下是一个使用 TypedArray 和 DataView 处理二进制数据的示例代码：

const buffer = new ArrayBuffer(16);
const intArray = new Int32Array(buffer);
const floatArray = new Float32Array(buffer);
const view = new DataView(buffer);

intArray[0] = 42;
intArray[1] = 43;

console.log(intArray); // Int32Array [42, 43]
console.log(floatArray); // Float32Array [4.203895392974451e-45, 0]
console.log(view.getInt8(0)); // 42
console.log(view.getInt16(0)); // 42
console.log(view.getInt32(0)); // 42
console.log(view.getFloat32(0)); // 4.203895392974451e-45
console.log(view.getFloat64(0)); // 4.940656458412465e-324

在示例代码中，我们首先创建了一个大小为 16 字节的 ArrayBuffer。然后，我们使用 Int32Array 和 Float32Array 分别访问了 ArrayBuffer 中的数据。接下来，我们使用 DataView 访问了 ArrayBuffer 中的数据，并输出了不同类型的值。

总结

ArrayBuffer 和 ArrayBufferView 是 ES10 中处理二进制数据的新 API，它们可以更加方便地处理二进制数据。在实际开发中，我们可以根据需求选择使用 TypedArray 或者 DataView，以提高程序的性能和效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658ce9deeb4cecbf2d2c559c