在前端开发中，我们经常需要处理二进制数据，比如图片、音频、视频等。ECMAScript 2018 引入了 ArrayBuffer 和 TypedArray，让我们更方便地处理二进制数据。
ArrayBuffer
ArrayBuffer 是一种通用的、固定长度的二进制数据缓冲区。它类似于数组，但不能直接访问其中的元素，而是需要使用 TypedArray 或 DataView 对其进行读写操作。
创建一个 ArrayBuffer 对象，可以使用以下语法：
let buffer = new ArrayBuffer(length);
其中，length 表示缓冲区的长度，单位为字节。例如，创建一个长度为 8 字节的缓冲区：
let buffer = new ArrayBuffer(8);
TypedArray
TypedArray 是一种特殊的数组，它可以直接访问 ArrayBuffer 中的数据。ECMAScript 2018 中共定义了 9 种 TypedArray，分别对应不同的数据类型：
- Int8Array：8 位有符号整数
- Uint8Array：8 位无符号整数
- Uint8ClampedArray：8 位无符号整数（范围在 0 到 255 之间）
- Int16Array：16 位有符号整数
- Uint16Array：16 位无符号整数
- Int32Array：32 位有符号整数
- Uint32Array：32 位无符号整数
- Float32Array：32 位浮点数
- Float64Array：64 位浮点数
创建一个 TypedArray 对象，可以使用以下语法：
let typedArray = new TypedArray(buffer, byteOffset, length);
其中，buffer 表示要操作的 ArrayBuffer 对象，byteOffset 表示 TypedArray 对象在 ArrayBuffer 中的起始位置（单位为字节），length 表示 TypedArray 对象的长度（单位为元素个数）。例如，创建一个长度为 2 的 Int8Array 对象：
let buffer = new ArrayBuffer(4); let int8Array = new Int8Array(buffer, 0, 2);
这里的 byteOffset 为 0，表示从 ArrayBuffer 的起始位置开始，length 为 2，表示 Int8Array 中有两个元素。
TypedArray 对象可以像普通数组一样进行读写操作，例如：
int8Array[0] = 1; int8Array[1] = 2; console.log(int8Array[0]); // 输出 1 console.log(int8Array[1]); // 输出 2
DataView
DataView 是一种通用的数据读写视图，它可以访问 ArrayBuffer 中的数据，并以指定的字节序解析数据。它的优势在于可以指定字节序，因此可以在不同的平台上保证相同的数据解析结果。
创建一个 DataView 对象，可以使用以下语法：
let dataView = new DataView(buffer, byteOffset, length);
其中，buffer 表示要操作的 ArrayBuffer 对象，byteOffset 表示 DataView 对象在 ArrayBuffer 中的起始位置（单位为字节），length 表示 DataView 对象的长度（单位为字节）。例如，创建一个长度为 4 字节的 DataView 对象：
let buffer = new ArrayBuffer(4); let dataView = new DataView(buffer, 0, 4);
DataView 对象可以使用不同的方法读写 ArrayBuffer 中的数据，例如：
dataView.setInt8(0, 1); dataView.setInt8(1, 2); console.log(dataView.getInt8(0)); // 输出 1 console.log(dataView.getInt8(1)); // 输出 2
这里的 setInt8 和 getInt8 分别表示写入和读取 8 位有符号整数。DataView 还提供了其他类型的读写方法，例如 setUint8、setInt16、getUint16 等。
示例代码
下面是一个使用 ArrayBuffer、TypedArray 和 DataView 处理二进制数据的示例代码：
-- -------------------- ---- ------- -- ------- - --- ----------- -- --- ------ - --- --------------- -- ------- - - --------- -- --- --------- - --- ----------------- -- --- -- ----- --------- -- ------------ - -- ------------ - -- -- ------- - --- -------- -- --- -------- - --- ---------------- -- --- -- ----- -------- -- -------------------- -- ------ ---------------------- ---- ------ -- - --------- - -------- ------- -------------------------- -- -- - -------------------------- -- -- - -------------------------------- ------- -- -- - ---------------------------------- ------- -- -- ---
总结
ECMAScript 2018 中的 ArrayBuffer 和 TypedArray 让我们更方便地处理二进制数据，可以帮助我们优化性能、减少内存占用。同时，DataView 还提供了字节序解析的功能，可以在不同的平台上保证相同的数据解析结果。在实际开发中，我们可以根据具体的需求选择使用这些功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f56f582b3ccec22fd8e50f