随着互联网飞速发展，处理大规模数据的需求越来越高。尤其是在前端开发领域，需要对二进制数据进行处理的场景也越来越多。在 ES9 之前，JavaScript 只能使用字符串来处理这些数据，然而字符串的处理方式在处理二进制数据时非常低效，容易产生错误。因此，ES9 引入了 ArrayBuffer 和 TypedArray，以满足高效处理二进制数据的需求。
ArrayBuffer 和 TypedArray 简介
为了更好地理解 ArrayBuffer 和 TypedArray，我们首先需要了解二进制数据是如何存储的。在计算机中，二进制数据是以比特 (bit) 的形式存储的，8 个比特组成了一个字节 (byte)。在 JavaScript 中，每个字符都是以 UTF-16 编码形式存储的，这就导致了在处理二进制数据时存在问题。不同字节长度的二进制数据无法在 JavaScript 中正确处理。例如，如果我们要读取一个 32 位的整数，就必须要确保读取的字节的长度是 4 个字节。
为了解决这个问题，ES9 引入了 ArrayBuffer 和 TypedArray。其中，ArrayBuffer 是一种特殊的对象，用来存储二进制数据。而 TypedArray 是一组类数组对象，用来直接处理 ArrayBuffer 中存储的二进制数据。
ArrayBuffer 可以看作是 TypedArray 的底层数据存储器，而 TypedArray 可以看作是对 ArrayBuffer 中数据的封装和操作。两者之间的关系如图所示：
在 JavaScript 中，ArrayBuffer 是不可变的，即一旦创建就不能改变大小。如果想要改变大小，只能创建一个新的 ArrayBuffer 或者使用 TypedArray 进行分片操作。
ArrayBuffer 和 TypedArray 的使用
创建 ArrayBuffer
我们可以使用以下方式来创建一个 ArrayBuffer 对象：
----- ------ - --- --------------- -- ---- - ---- -----------
创建 TypedArray
创建 TypedArray 非常简单，我们只需要传入相应的 ArrayBuffer 对象以及类型信息即可：
----- ------ - --- --------------- ----- ---------- - --- ------------------- -- ---- -- ---- ----------
当我们使用 TypedArray 读取数据时，每个数组元素都会使用相应的字节长度来解析 ArrayBuffer 中的数据，因此，我们不需要关心二进制数据的字节长度。
TypedArray 类型
在 JavaScript 中，ES9 定义了以下 TypedArray 类型：
- Int8Array：8 位有符号整数
- Uint8Array：8 位无符号整数
- Uint8ClampedArray：8 位无符号整数（范围在 0 到 255 之间）
- Int16Array：16 位有符号整数
- Uint16Array：16 位无符号整数
- Int32Array：32 位有符号整数
- Uint32Array：32 位无符号整数
- Float32Array：32 位浮点数
- Float64Array：64 位浮点数
读写 TypedArray
我们可以使用下标操作符来访问 TypedArray 中的元素：
----- ------ - --- --------------- ----- ---------- - --- ------------------- ------------- - --- --------------------------- -- -- --
除了下标操作符，我们还可以使用以下方法进行读写操作：
- TypedArray.prototype.set()：将一个 TypedArray 对象中的数据复制到另一个 TypedArray 对象中
- TypedArray.prototype.subarray()：返回 TypedArray 中的一个子数组
- TypedArray.prototype.slice()：返回一个新的 TypedArray，包含原数组中指定位置的元素
示例代码
下面是一个简单的示例代码，演示了如何使用 TypedArray 来读取二进制数据中的 32 位整数并计算其总和。
----- ---- - --- ----------------- ----- ----- ----- ----- ----- ----- ------- ----- ------ - ------------ ----- ---------- - --- ------------------ -- --- --- --- - -- --- ---- - - -- - - ------------------ ---- - --- -- -------------- - ----------------- -- -- --------
总结
本文介绍了 ES9 中引入的 ArrayBuffer 和 TypedArray 的使用方法，以及二者之间的关系。通过使用 ArrayBuffer 和 TypedArray，我们可以高效地处理二进制数据，提高程序的性能和效率。如果你需要在前端开发中处理大规模的二进制数据，那么 ArrayBuffer 和 TypedArray 是一个不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651bd14f95b1f8cacd36ec25