在 JavaScript 中，ArrayBuffer 和 SharedArrayBuffer 是两个重要的数据类型，它们可以用来存储二进制数据。在 ES12 中，这两个数据类型得到了进一步的加强和扩展，本文将详细介绍它们的使用方法。
ArrayBuffer
ArrayBuffer 是一种通用的、固定长度的二进制数据缓冲区，它可以存储任意类型的二进制数据。使用 ArrayBuffer 可以避免在存储和传输二进制数据时进行类型转换的开销，从而提高性能。
创建 ArrayBuffer
创建 ArrayBuffer 的方法很简单，只需要指定缓冲区的长度即可：
----- ------ - --- ---------------
上述代码创建了一个长度为 8 字节的 ArrayBuffer。
操作 ArrayBuffer
ArrayBuffer 中的数据是以字节为单位存储的，因此要操作 ArrayBuffer 中的数据需要使用 TypedArray 或 DataView。
TypedArray
TypedArray 是一组类型化数组，它们可以视为 ArrayBuffer 的视图，用来读取和写入 ArrayBuffer 中的数据。常见的 TypedArray 有：
- Int8Array
- Uint8Array
- Int16Array
- Uint16Array
- Int32Array
- Uint32Array
- Float32Array
- Float64Array
以 Int8Array 为例，创建一个长度为 8 字节的 ArrayBuffer，并使用 Int8Array 读写数据：
----- ------ - --- --------------- ----- --------- - --- ------------------ -- ------- -------------------------- -- - -- ------- ------------ - ---- -- ------- -------------------------- -- ---
上述代码中，首先创建了一个长度为 8 字节的 ArrayBuffer，然后使用 Int8Array 创建了一个视图，可以通过索引读取和写入数据。
DataView
DataView 是一种通用的数据视图，可以用来读取和写入 ArrayBuffer 中的数据。相比 TypedArray，DataView 的灵活性更高，但性能稍差。
以 DataView 为例，创建一个长度为 8 字节的 ArrayBuffer，并使用 DataView 读写数据：
----- ------ - --- --------------- ----- -------- - --- ----------------- -- ------- --------------------------------- -- - -- ------- ------------------- ----- -- ------- --------------------------------- -- ---
上述代码中，首先创建了一个长度为 8 字节的 ArrayBuffer，然后使用 DataView 创建了一个视图，可以通过方法读取和写入数据。
ArrayBuffer 与字符串的转换
ArrayBuffer 与字符串之间的转换是非常常见的操作，可以使用 TextEncoder 和 TextDecoder 完成转换。
以 TextEncoder 为例，将字符串转换为 ArrayBuffer：
----- ----------- - --- -------------- ----- ------ - ------------------------- ---------------
上述代码中，首先创建了一个 TextEncoder 实例，然后使用 encode 方法将字符串转换为 Uint8Array，最后通过 buffer 属性获取 ArrayBuffer。
以 TextDecoder 为例，将 ArrayBuffer 转换为字符串：
----- ----------- - --- -------------- ----- --- - --------------------------- ----------------- -- ------ ------
上述代码中，首先创建了一个 TextDecoder 实例，然后使用 decode 方法将 ArrayBuffer 转换为字符串。
SharedArrayBuffer
SharedArrayBuffer 是一种多线程共享的 ArrayBuffer，它可以让不同的线程访问同一段内存，从而实现高效的并发编程。
创建 SharedArrayBuffer
创建 SharedArrayBuffer 的方法与创建 ArrayBuffer 类似，只需要指定缓冲区的长度即可：
----- ------ - --- ---------------------
上述代码创建了一个长度为 8 字节的 SharedArrayBuffer。
操作 SharedArrayBuffer
SharedArrayBuffer 中的数据也是以字节为单位存储的，同样需要使用 TypedArray 或 DataView 进行操作。
Atomics
Atomics 是一个全局对象，提供了一组原子操作，可以保证多线程访问 SharedArrayBuffer 时的原子性，避免竞争条件。
常见的原子操作有：
- add
- sub
- and
- or
- xor
- compareExchange
- wait
- wake
以 add 为例，创建一个长度为 8 字节的 SharedArrayBuffer，并使用 add 方法进行原子操作：
----- ------ - --- --------------------- ----- ---------- - --- ------------------- -- ---- - --------- -- ----------------------- -- ---- -- ----- - ------ --------------------------- -- --
上述代码中，首先创建了一个长度为 8 字节的 SharedArrayBuffer，然后使用 Int32Array 创建了一个视图。接着使用 Atomics.add 方法在索引为 0 的位置上原子地加上 10，最后通过索引读取该位置上的值。
Worker
Worker 是一种 Web Worker，可以在后台线程中执行 JavaScript 代码。在 Worker 中可以访问 SharedArrayBuffer，从而实现多线程共享内存。
以创建一个 Worker 为例，让 Worker 访问 SharedArrayBuffer 并进行原子操作：
-- -------- ----- ------ - --- --------------------- ----- ---------- - --- ------------------- -- ---- - --------- -- ----------------------- -- ---- -- ---- ------ ----- ------ - --- -------------------- -- - ------ ---- --------------------------- -- ---- ------ --- ---------------- - ------- -- - ------------------------ --
-- --------- --------- - ------- -- - ----- ------ - ----------- ----- ---------- - --- ------------------- -- ---- - --------- -- ----------------------- -- ---- -- -------- --------------------------- --
上述代码中，首先在主线程中创建了一个长度为 8 字节的 SharedArrayBuffer，并使用 Atomics.add 方法在索引为 0 的位置上原子地加上 10。接着创建了一个 Worker，并向 Worker 发送了 SharedArrayBuffer。Worker 中接收到 SharedArrayBuffer 后，也使用 Atomics.add 方法在索引为 0 的位置上原子地加上 20，并将结果发送回主线程。
总结
本文介绍了 ES12 中的 ArrayBuffer 和 SharedArrayBuffer 的使用方法，包括创建、操作和转换等。其中，SharedArrayBuffer 可以实现多线程共享内存，可以用于提高并发编程的性能。开发者需要注意多线程访问时的竞争条件，使用原子操作保证线程安全。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d8446a1886fbafa45eee45