前言
在 JavaScript 的早期版本中，其原始数据类型主要包含数字、布尔、字符串等。这些数据类型对于常规应用已经足够使用，但是对于一些性能较高、需要操作二进制数据的场景，这些基础数据类型并不能满足需求。因此，在 ECMAScript 2019 中引入了 ArrayBuffer 和 SharedArrayBuffer 两种新的数据类型，以满足这些特殊场景的需求。
ArrayBuffer
ArrayBuffer 是一种表示一个通用的、固定长度的二进制数据缓冲区的类型。我们可以通过它来操作二进制数据，如读取、修改、传输等。这个操作过程中，我们不需要考虑字节序（也称为大端序和小端序）问题。
创建 ArrayBuffer
我们可以通过以下方式来创建一个 ArrayBuffer。
const buffer = new ArrayBuffer(8);
上面的代码中，我们创建了一个长度为 8 个字节的 ArrayBuffer 缓冲区。
读写 ArrayBuffer
我们可以通过 DataView 和 TypedArray 来读写 ArrayBuffer 数据。
// 创建一个长度为 4 的 Int32Array 数据视图对象 const int32Array = new Int32Array(buffer, 0, 1); // 将 int32Array 的第 0 个元素设置为 100 int32Array[0] = 100; // 读取 int32Array 的第 0 个元素的值 console.log(int32Array[0]); // 100
应用场景
ArrayBuffer 主要用于处理、操作二进制数据流，如使用 Canvas 绘制图片时，可以使用 ArrayBuffer 将图片像素数据传输到 WebGL 中进行后续操作。
SharedArrayBuffer
SharedArrayBuffer 与 ArrayBuffer 类似，不同的是，SharedArrayBuffer 可以被多个线程进行共享操作。这也意味着，在多核处理器或多线程环境下，SharedArrayBuffer 的性能表现更好。
创建 SharedArrayBuffer
我们可以通过以下方式来创建一个 SharedArrayBuffer。
const buffer = new SharedArrayBuffer(8);
上面的代码中，我们创建了一个长度为 8 个字节的 SharedArrayBuffer 缓冲区。
读写 SharedArrayBuffer
SharedArrayBuffer 的读写操作和 ArrayBuffer 类似，同样可以使用 DataView 和 TypedArray 来进行操作。
// 创建一个长度为 4 的 Int32Array 数据视图对象 const int32Array = new Int32Array(buffer, 0, 1); // 将 int32Array 的第 0 个元素设置为 100 int32Array[0] = 100; // 读取 int32Array 的第 0 个元素的值 console.log(int32Array[0]); // 100
应用场景
SharedArrayBuffer 主要用于在多线程环境下操作大量的二进制数据，比如 Web Worker 等多线程应用开发场景。
总结
ArrayBuffer 和 SharedArrayBuffer 这两种新的数据类型为我们提供了更加灵活、高效的方式来操作二进制数据。在特定场景下，使用这两种数据类型可以有效提高代码的性能表现。我认为这两种数据类型的出现，不仅为前端开发人员带来了更多的工具和思路，也为我们的技术发展提供了新的方向。
示例代码
以下是一个简单的 ArrayBuffer 示例代码，演示了如何操作 ArrayBuffer 数据。
const buffer = new ArrayBuffer(8); const int32Array = new Int32Array(buffer, 0, 2); int32Array[0] = 100; int32Array[1] = -50; console.log(int32Array[0]); // 100 console.log(int32Array[1]); // -50
以下是一个简单的 SharedArrayBuffer 示例代码，演示了如何在多线程环境下共享操作数据。
-- -------------------- ---- ------- -- ---------- ----- ----------------- - --- --------------------- ----- ---------- - --- ----------------------------- -- --- ------------- - ---- ------------- - ---- ------------------------------- -- ---------- --------------------------- ----- -- - ----- ---------- - --- ---------------------- -- --- --------------------------- -- --- --------------------------- -- --- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6dc93f6b2d6eab32359e4