在前端开发中，我们通常需要处理二进制数据。ES10 中引入了 ArrayBuffer 对象和 TypedArray，使得 JavaScript 可以更加方便地处理二进制数据。本文将详细介绍 ArrayBuffer 对象和 TypedArray 的使用方法，并提供示例代码。
什么是 ArrayBuffer 对象
ArrayBuffer 对象是一种通用的二进制数据缓冲区，它可以存储任意类型的二进制数据。它类似于数组，但是它的元素是字节而不是数值。ArrayBuffer 对象的长度是固定的，一旦创建就无法改变。
创建 ArrayBuffer 对象的方式如下：
const buffer = new ArrayBuffer(length);
其中，length 是缓冲区的长度，单位是字节。例如，如果要创建一个长度为 16 字节的缓冲区，可以这样写：
const buffer = new ArrayBuffer(16);
什么是 TypedArray
TypedArray 是一种特殊的数组类型，它可以从 ArrayBuffer 对象中读取数据，并且可以直接操作这些数据。TypedArray 的元素类型是固定的，例如 Int8Array 表示每个元素是一个 8 位有符号整数，Uint32Array 表示每个元素是一个 32 位无符号整数。
创建 TypedArray 的方式如下：
const typedArray = new TypedArray(buffer, byteOffset, length);
其中，buffer 是一个 ArrayBuffer 对象，表示要读取的缓冲区；byteOffset 是一个整数，表示要读取的起始位置（单位是字节），默认为 0；length 是一个整数，表示要读取的元素个数，默认为缓冲区长度减去起始位置除以元素大小。
例如，如果要从一个长度为 16 字节的缓冲区中读取 4 个 32 位无符号整数，可以这样写：
const buffer = new ArrayBuffer(16); const uint32Array = new Uint32Array(buffer, 0, 4);
TypedArray 的常见类型
ES10 中提供了 9 种 TypedArray 类型，分别是：
- Int8Array：每个元素是一个 8 位有符号整数
- Uint8Array：每个元素是一个 8 位无符号整数
- Uint8ClampedArray：每个元素是一个 8 位无符号整数，超出范围的值会被截断为 0 或 255
- Int16Array：每个元素是一个 16 位有符号整数
- Uint16Array：每个元素是一个 16 位无符号整数
- Int32Array：每个元素是一个 32 位有符号整数
- Uint32Array：每个元素是一个 32 位无符号整数
- Float32Array：每个元素是一个 32 位浮点数
- Float64Array：每个元素是一个 64 位浮点数
TypedArray 的常用操作
TypedArray 可以直接操作 ArrayBuffer 中的数据，常见的操作包括读取、修改、复制和比较。
读取数据
TypedArray 可以通过下标访问元素，例如：
const uint8Array = new Uint8Array([1, 2, 3, 4]); console.log(uint8Array[0]); // 1 console.log(uint8Array[1]); // 2 console.log(uint8Array[2]); // 3 console.log(uint8Array[3]); // 4
修改数据
TypedArray 可以通过下标修改元素，例如：
const uint8Array = new Uint8Array([1, 2, 3, 4]); uint8Array[0] = 5; console.log(uint8Array); // Uint8Array [ 5, 2, 3, 4 ]
复制数据
TypedArray 可以通过 slice 方法复制数据，例如：
const uint8Array1 = new Uint8Array([1, 2, 3, 4]); const uint8Array2 = uint8Array1.slice(); console.log(uint8Array2); // Uint8Array [ 1, 2, 3, 4 ]
比较数据
TypedArray 可以通过比较运算符比较数据，例如：
const uint8Array1 = new Uint8Array([1, 2, 3, 4]); const uint8Array2 = new Uint8Array([1, 2, 3, 4]); console.log(uint8Array1 === uint8Array2); // false console.log(uint8Array1.toString() === uint8Array2.toString()); // true
示例代码
下面是一个示例代码，演示了如何使用 ArrayBuffer 和 TypedArray 处理二进制数据：
-- -------------------- ---- ------- -- ------- -- ------ ----- ------ - --- ---------------- -- ---- -- -------- ----- ----------- - --- ------------------- -- --- -- -------- -------------- - -- -------------- - -- -------------- - -- -------------- - -- -- -------- ---------------------------- -- - ---------------------------- -- - ---------------------------- -- - ---------------------------- -- - -- ---- ----- ------------ - -------------------- -------------------------- -- ----------- - -- -- -- - - -- ---- ----------------------- --- -------------- -- ----- ---------------------------------- --- ------------------------- -- ----
总结
本文介绍了 ES10 中的 ArrayBuffer 对象和 TypedArray，它们可以更加方便地处理二进制数据。通过本文的学习，你可以了解 ArrayBuffer 对象和 TypedArray 的使用方法，并掌握常见的操作。在实际开发中，你可以根据自己的需求选择不同的 TypedArray 类型，并灵活运用它们的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658bf4f1eb4cecbf2d144bda