ES10 之 ArrayBuffer, 可以放心使用 dataset 接口了
在前端开发中，我们经常需要通过 API 接口来获取数据，同时也需要将一些数据保存在本地或者特定物理存储介质（如内存或者硬盘）中。ES10 中引入了 ArrayBuffer 数据类型，极大地方便了 JavaScript 在处理数据方面的能力。
ArrayBuffer 的介绍
ArrayBuffer 是一种通用的数据容器，它本质上是一段连续的内存区域，可以存储各种类型的数据，包括数字和字符串等。这一特点使得 ArrayBuffer 非常适合于 JavaScript 在处理大量数据时的需求。
在引入 ArrayBuffer 之前，JavaScript 处理大量数据的性能一直存在问题。在进行大量数据处理时，原生的 JavaScript 数组的性能通常会比较低下。因此，一些前端框架（如 React、Vue 等）通过对数据进行多次切片，用较小的数据块来逐步处理数据的方式来提高性能。而由于 ArrayBuffer 是一种连续的数据储存方式，因此可以大幅提高机器读写数据的速度。
我们可以通过下面的代码来创建一个 ArrayBuffer：
const buffer = new ArrayBuffer(size);
其中，size 表示需要分配的内存大小，单位为字节。创建了一个 ArrayBuffer 之后，我们可以通过 DataView 对象来操作其内部的数据。例如，我们可以通过下面的代码来获取 ArrayBuffer 的长度：
const buffer = new ArrayBuffer(8); console.log(buffer.byteLength); // 8
DataView 的介绍
在 JavaScript 中，要想直接读取和修改 ArrayBuffer 的内部数据，就需要使用 DataView 对象。通过在内存中对具体的数据类型进行操作，这种方式可以更加直观地读取和修改数据。
我们可以通过下面的代码来创建一个 DataView：
const buffer = new ArrayBuffer(8); const view = new DataView(buffer);
其中，创建 DataView 的时候我们需要传入一个 ArrayBuffer 对象。在 DataView 中，我们可以通过下面的方式来读取和修改已有数据：
const buffer = new ArrayBuffer(8); const view = new DataView(buffer); view.setInt8(0, 1); view.setInt8(1, 2); console.log(view.getInt8(0)); // 1 console.log(view.getInt8(1)); // 2
在这段代码中，我们首先创建了一个 ArrayBuffer，并通过 DataView 对象来读写数据。在使用 DataView 读写数据时，我们需要首先指定数据类型（例如 Int8、Uint8、Int16 等），然后再指定数据在内存的起始位置。
ArrayBuffer 在数据处理中的作用
在数据处理中，ArrayBuffer 可以使用在数据解析、图像处理、音频处理、视频处理等场景中，它可以极大地降低 JavaScript 在处理数据方面的复杂度和性能开销。
例如，我们可以使用 ArrayBuffer 来解析某个文件的数据：
-- -------------------- ---- -------
----- --- - --- -----------------
---------------------- - -------- -- -
-- --------------- --- - -- ---------- --- ---- -
----- ----------- - -------------
----- -------- - --- ----------------------
-- ----
-
--
--------------- ------------ ------
---------------- - --------------
-----------在这段代码中，我们通过 XMLHttpRequest 的 API 获取数据，并通过 responseType 属性指定返回的数据类型为 ArrayBuffer。在读取了 ArrayBuffer 之后，我们就可以通过 DataView 对象来解析数据了。
使用 ArrayBuffer 储存 dataset 数据
除了可以使用 ArrayBuffer 解析一些大型的数据集外，它还能够用来保存较小的数据集，例如 Web 页面中的 dataset 数据。dataset 是我们经常在 HTML 中使用的一个 API，通过它我们可以方便地在 HTML 元素上存储自定义的数据，但是 dataset 的性能一直存在问题。在 ES10 中，我们可以通过 ArrayBuffer 来存储 dataset 数据，从而大幅提高 JavaScript 在处理 dataset 数据时的性能。
我们可以通过下面的代码来使用 ArrayBuffer 存储 dataset 数据：
-- -------------------- ---- ------- ----- -- - ----------------------------- ----- --------- - --- -------------------------------------- -- - -- -- ----------- -- ------- -- ----- ------ - --- --------------- ----- ---- - --- ----------------- -- - ------- ----- ----------- - ---------------- --------------- ------------------ ------------------ ----------------------- ---
在这段代码中，我们首先根据选择器获取了某个 ul 元素下所有的 li 元素，然后遍历这些元素，将每个 li 元素的 dataset 数据存储到一个新创建的 ArrayBuffer 中。此时，我们需要注意内存中该 ArrayBuffer 存储的数据类型和每个数据的长度。例如，在这段代码中，我们将每个 li 元素的 dataset 存储到了 8 个字节的 ArrayBuffer 中，前 4 个字节保存数据的 id 值，后 4 个字节保存数据的 score 值。
总结
ES10 中引入了 ArrayBuffer 数据类型，它可以用于存储一定量的数据，例如文件数据、图片数据等等。在数据处理方面，ArrayBuffer 可以在一定程度上提高 JavaScript 的解析效率。此外，通过使用 ArrayBuffer 来存储较小的数据集（例如 dataset 数据），我们也能够大幅提高 JavaScript 在处理 dataset 数据时的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6c1a848841e9894365095