ES9 中的 Array Buffer 和 Shared Array Buffer-JavaScript中文网-JavaScript教程资源分享门户

在 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 提供了一系列方法来读取和写入不同类型的数据，例如：

// javascriptcn.com 代码示例
// 写入数据
view.setInt8(0, 1);
view.setInt16(1, 2);
view.setInt32(3, 3);

// 读取数据
console.log(view.getInt8(0)); // 1
console.log(view.getInt16(1)); // 2
console.log(view.getInt32(3)); // 3

TypedArray

TypedArray 是一种可以读取和写入 Array Buffer 中特定类型数据的视图，例如 Int8Array 用于读取和写入 8 位有符号整数。

const buffer = new ArrayBuffer(8);
const array = new Int8Array(buffer); // 创建一个长度为 8 的 Int8Array

TypedArray 提供了一系列方法来读取和写入数据，例如：

// javascriptcn.com 代码示例
// 写入数据
array[0] = 1;
array[1] = 2;
array[2] = 3;

// 读取数据
console.log(array[0]); // 1
console.log(array[1]); // 2
console.log(array[2]); // 3

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 中的数据进行原子加操作。

// javascriptcn.com 代码示例
const buffer = new SharedArrayBuffer(4);
const array = new Int32Array(buffer);

const worker1 = new Worker('worker.js');
const worker2 = new Worker('worker.js');

worker1.onmessage = e => {
  console.log(`worker1: ${e.data}`);
};

worker2.onmessage = e => {
  console.log(`worker2: ${e.data}`);
};

worker1.postMessage(array); // 向 worker1 发送共享的 Int32Array
worker2.postMessage(array); // 向 worker2 发送共享的 Int32Array

// worker.js
self.onmessage = e => {
  const array = e.data;

  // 对共享的 Int32Array 进行原子加操作
  const index = 0;
  const value = 1;
  const result = Atomics.add(array, index, value);

  self.postMessage(result);
};

上述代码中，我们创建了两个 Web Worker，并向它们发送了一个共享的 Int32Array，然后在 worker.js 中对这个数组进行原子加操作，并将结果发送回主线程。

Lock

Lock 是一种用于保护共享资源的机制，可以通过 new Lock() 创建一个 Lock。

const lock = new Lock();

Lock 提供了两个方法：lock() 和 unlock()，分别用于获取锁和释放锁。

// javascriptcn.com 代码示例
const buffer = new SharedArrayBuffer(4);
const array = new Int32Array(buffer);
const lock = new Lock();

const worker1 = new Worker('worker.js');
const worker2 = new Worker('worker.js');

worker1.onmessage = e => {
  console.log(`worker1: ${e.data}`);
};

worker2.onmessage = e => {
  console.log(`worker2: ${e.data}`);
};

worker1.postMessage({ array, lock }); // 向 worker1 发送共享的 Int32Array 和 Lock
worker2.postMessage({ array, lock }); // 向 worker2 发送共享的 Int32Array 和 Lock

// worker.js
self.onmessage = e => {
  const { array, lock } = e.data;

  // 获取锁
  lock.lock();

  // 对共享的 Int32Array 进行操作
  const index = 0;
  const value = 1;
  array[index] += value;

  // 释放锁
  lock.unlock();

  self.postMessage(array[index]);
};

上述代码中，我们创建了两个 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