在 ES9 中使用 ArrayBuffer 和 TypedArray 提高二进制数据处理能力-JavaScript中文网-JavaScript教程资源分享门户

随着互联网飞速发展，处理大规模数据的需求越来越高。尤其是在前端开发领域，需要对二进制数据进行处理的场景也越来越多。在 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 对象：

const buffer = new ArrayBuffer(8); // 创建一个 8 个字节的 ArrayBuffer

创建 TypedArray

创建 TypedArray 非常简单，我们只需要传入相应的 ArrayBuffer 对象以及类型信息即可：

const buffer = new ArrayBuffer(8);
const int32Array = new Int32Array(buffer); // 创建一个 32 位整数的 TypedArray

当我们使用 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 中的元素：

const buffer = new ArrayBuffer(8);
const int32Array = new Int32Array(buffer);
int32Array[0] = 42;
console.log(int32Array[0]); // 输出 42

除了下标操作符，我们还可以使用以下方法进行读写操作：

TypedArray.prototype.set()：将一个 TypedArray 对象中的数据复制到另一个 TypedArray 对象中
TypedArray.prototype.subarray()：返回 TypedArray 中的一个子数组
TypedArray.prototype.slice()：返回一个新的 TypedArray，包含原数组中指定位置的元素

示例代码

下面是一个简单的示例代码，演示了如何使用 TypedArray 来读取二进制数据中的 32 位整数并计算其总和。

const data = new Uint8Array([0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08]);
const buffer = data.buffer;
const int32Array = new Int32Array(buffer, 0, 2);
let sum = 0;
for (let i = 0; i < int32Array.length; i++) {
  sum += int32Array[i];
}
console.log(sum); // 输出 67305985

总结

本文介绍了 ES9 中引入的 ArrayBuffer 和 TypedArray 的使用方法，以及二者之间的关系。通过使用 ArrayBuffer 和 TypedArray，我们可以高效地处理二进制数据，提高程序的性能和效率。如果你需要在前端开发中处理大规模的二进制数据，那么 ArrayBuffer 和 TypedArray 是一个不错的选择。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/651bd14f95b1f8cacd36ec25