在客户端和服务端编程中，我们经常需要处理二进制数据，比如音频、视频、图片等。ECMAScript 2021 (ES12) 引入了新的 ArrayBuffer 和 TypedArray 对象，让处理二进制数据更加方便和高效。
ArrayBuffer
ArrayBuffer 是一种用于处理二进制数据的对象，它表示一块内存区域，可以在其中存储任意类型的二进制数据。使用 ArrayBuffer 的第一步是创建它，代码如下：
----- ------ - --- --------------- -- ------- - - -----------
这样就创建了一个长度为 4 字节的 ArrayBuffer 对象，可以用来存储 4 个字节的数据。可以通过下标来操作 ArrayBuffer 中的数据，例如：
----- ------ - --- --------------- ----- ---- - --- ----------------- ---------------- ----- -- - ----------- ----- -- ---- ------------------------------ -- -- ----------- -- -- ----
上述代码中，我们首先创建了一个长度为 4 字节的 ArrayBuffer 对象。然后我们使用 DataView 对象来操作 ArrayBuffer 对象中的数据，设置了一个 32 位整数值 100，并读取了该值。
TypedArray
TypedArray 是一种类型化数组，可以让我们方便地处理 ArrayBuffer 中的二进制数据。它是各种不同类型的数组实现的基础，包括 Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array 等。
下面是一个 Uint16Array 的例子：
----- ------ - --- --------------- ----- ---- - --- ----------------- ----------------- ----- -- - ----------- ----- -- ------- ----- ----- - --- -------------------- -- -- ----------- ------- ---------------------- -- -- ----------- -- -- -------
上述代码中，我们首先创建了一个长度为 4 字节的 ArrayBuffer 对象，并使用 DataView 对象来设置一个 16 位无符号整数值 100。然后我们使用 Uint16Array 对象来创建一个视图，用来操作 ArrayBuffer 中的数据，最后打印了存储在 ArrayBuffer 中的 16 位无符号整数值。
TypedArray 不仅可以读写 ArrayBuffer，还可以读写其他的 TypedArray，例如：
----- ------ - --- --------------- ----- ---------- - --- ------------------- ----- ---------- - --- ------------------- ------------- - ----- ------------------------ -- -- ----------- ------
上述代码中，我们首先创建了一个长度为 8 字节的 ArrayBuffer 对象，然后使用 Int16Array 和 Uint8Array 创建了两个视图，随后将 Int16Array 视图的第一个元素设置为 1000。最后，我们打印了存储在 ArrayBuffer 中的所有字节，可以看到前两个字节存储的值为 1000，后面的字节都是 0。
结论
通过上面的示例，我们可以看到，在 ECMAScript 2021 中，通过使用 ArrayBuffer 和 TypedArray 对象，处理二进制数据的代码变得更加方便和高效。因此，在项目的开发中，我们可以考虑使用这些新特性来处理二进制数据，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6711ce84ad1e889fe200ec2f