在前端开发中，我们经常需要处理二进制数据，例如图片、音频等。在 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 处理二进制数据的示例代码：
-- -------------------- ---- ------- ----- ------ - --- ---------------- ----- -------- - --- ------------------- ----- ---------- - --- --------------------- ----- ---- - --- ----------------- ----------- - --- ----------- - --- ---------------------- -- ---------- ---- --- ------------------------ -- ------------ ----------------------- -- ----------------------------- -- -- ------------------------------ -- -- ------------------------------ -- -- -------------------------------- -- --------------------- -------------------------------- -- ----------------------
在示例代码中，我们首先创建了一个大小为 16 字节的 ArrayBuffer。然后，我们使用 Int32Array 和 Float32Array 分别访问了 ArrayBuffer 中的数据。接下来，我们使用 DataView 访问了 ArrayBuffer 中的数据，并输出了不同类型的值。
总结
ArrayBuffer 和 ArrayBufferView 是 ES10 中处理二进制数据的新 API，它们可以更加方便地处理二进制数据。在实际开发中，我们可以根据需求选择使用 TypedArray 或者 DataView，以提高程序的性能和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658ce9deeb4cecbf2d2c559c