在 ES9 中，新增了 Array Buffer 和 Shared Array Buffer 两个类型，这两个类型都是用来处理二进制数据的。
Array Buffer
Array Buffer 是一种用于存储二进制数据的缓冲区，其长度不可改变。可以通过 new ArrayBuffer(length) 创建一个指定长度的 Array Buffer。
const buffer = new ArrayBuffer(8); // 创建一个长度为 8 的 ArrayBuffer
Array Buffer 内部存储的是字节(Byte)数据，可以通过视图(View)来读取和写入数据。常用的视图有 DataView 和 TypedArray。
DataView
DataView 是一种可以读取和写入 Array Buffer 中数据的视图，可以通过 new DataView(buffer, byteOffset, byteLength) 创建一个 DataView。
const buffer = new ArrayBuffer(8); const view = new DataView(buffer, 0, 8); // 创建一个长度为 8 的 DataView
DataView 提供了一系列方法来读取和写入不同类型的数据，例如：
-- -------------------- ---- ------- -- ---- --------------- --- ---------------- --- ---------------- --- -- ---- ----------------------------- -- - ------------------------------ -- - ------------------------------ -- -
TypedArray
TypedArray 是一种可以读取和写入 Array Buffer 中特定类型数据的视图，例如 Int8Array 用于读取和写入 8 位有符号整数。
const buffer = new ArrayBuffer(8); const array = new Int8Array(buffer); // 创建一个长度为 8 的 Int8Array
TypedArray 提供了一系列方法来读取和写入数据，例如：
-- -------------------- ---- ------- -- ---- -------- - -- -------- - -- -------- - -- -- ---- ---------------------- -- - ---------------------- -- - ---------------------- -- -
Shared Array Buffer
Shared Array Buffer 是一种可以被多个 Web Worker 共享的 Array Buffer，其长度也不可改变。可以通过 new SharedArrayBuffer(length) 创建一个指定长度的 Shared Array Buffer。
const buffer = new SharedArrayBuffer(8); // 创建一个长度为 8 的 SharedArrayBuffer
由于 Shared Array Buffer 可以被多个 Web Worker 共享，因此需要通过 Atomics 和 Lock 等方法来保证数据的同步和安全性。
Atomics
Atomics 提供了一系列原子操作方法来操作 Shared Array Buffer 中的数据，这些操作是原子的，即在多个线程同时进行操作时，不会出现竞争条件。
例如，Atomics.add() 方法可以对 Shared Array Buffer 中的数据进行原子加操作。
-- -------------------- ---- ------- ----- ------ - --- --------------------- ----- ----- - --- ------------------- ----- ------- - --- -------------------- ----- ------- - --- -------------------- ----------------- - - -- - --------------------- ------------ -- ----------------- - - -- - --------------------- ------------ -- --------------------------- -- - ------- ----- ---------- --------------------------- -- - ------- ----- ---------- -- --------- -------------- - - -- - ----- ----- - ------- -- ---- ---------- ------- ----- ----- - -- ----- ----- - -- ----- ------ - ------------------ ------ ------- ------------------------- --
上述代码中，我们创建了两个 Web Worker，并向它们发送了一个共享的 Int32Array，然后在 worker.js 中对这个数组进行原子加操作，并将结果发送回主线程。
Lock
Lock 是一种用于保护共享资源的机制，可以通过 new Lock() 创建一个 Lock。
const lock = new Lock();
Lock 提供了两个方法：lock() 和 unlock()，分别用于获取锁和释放锁。
-- -------------------- ---- ------- ----- ------ - --- --------------------- ----- ----- - --- ------------------- ----- ---- - --- ------- ----- ------- - --- -------------------- ----- ------- - --- -------------------- ----------------- - - -- - --------------------- ------------ -- ----------------- - - -- - --------------------- ------------ -- --------------------- ------ ---- --- -- - ------- ----- ---------- - ---- --------------------- ------ ---- --- -- - ------- ----- ---------- - ---- -- --------- -------------- - - -- - ----- - ------ ---- - - ------- -- --- ------------ -- ---- ---------- ---- ----- ----- - -- ----- ----- - -- ------------ -- ------ -- --- -------------- ------------------------------- --
上述代码中，我们创建了两个 Web Worker，并向它们发送了一个共享的 Int32Array 和一个 Lock，然后在 worker.js 中对这个数组进行操作，并使用 Lock 来保证操作的同步和安全性。
总结
Array Buffer 和 Shared Array Buffer 是用于处理二进制数据的新类型，可以通过视图来读取和写入数据。Shared Array Buffer 可以被多个 Web Worker 共享，需要使用 Atomics 和 Lock 等方法来保证数据的同步和安全性。这些新特性可以提高 JavaScript 处理二进制数据的效率和性能，对于开发高性能的 Web 应用程序具有重要意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655716d0d2f5e1655d1843ba