在前端开发中，处理大量数据时，往往会遇到内存问题。过多的数据会导致页面变慢、卡顿、崩溃等问题。为了解决这个问题，ES12 中引入了 ArrayBuffer 和 TypedArray。
什么是 ArrayBuffer 和 TypedArray？
ArrayBuffer 是一个通用的固定大小的缓冲区，它允许我们在内存中存储二进制数据。我们可以使用它来存储和操作二进制数据。而 TypedArray 是 ArrayBuffer 的一个视图，它提供了一种存储和操作不同类型二进制数据的方法。
总的来说，ArrayBuffer 提供了一个机制，可以在内存中创建一个固定大小的存储区域，而 TypedArray 则提供了一种从该存储区域读写数据的方法。
TypedArray 的类型
TypedArray 一共包括 9 种类型，分别是：
- Int8Array
- Uint8Array
- Uint8ClampedArray
- Int16Array
- Uint16Array
- Int32Array
- Uint32Array
- BigInt64Array
- BigUint64Array
每种 TypedArray 都表示一种特定类型的二进制数据。
如何使用 ArrayBuffer 和 TypedArray？
以下是一个例子：
-- -------------------- ---- ------- -- ------- - - ----------- ----- ------ - --- -------------- -- -- -------------- ---------- - ----------- -- - ---------- -- ------- - ---- ----- ---- - --- ------------------ -- -- -- ----- ----------- ---- ------- - - ------- - - -- ---- -------------------- -- -- - -------------------- -- -- -
如上例所示，我们可以使用 ArrayBuffer 构造函数创建一个指定长度的 ArrayBuffer，然后使用 TypedArray 的构造函数创建一个 TypedArray 视图来操作该 ArrayBuffer，并将数据写入该视图。最后，使用视图可以获取已存储的数据。
ArrayBuffer 和 TypedArray 的优势
相比于传统的数组、对象等数据结构，ArrayBuffer 和 TypedArray 省去了大量的类型判断和转换操作，降低了内存使用，同时提高了运行效率。
此外，TypedArray 的使用还可以对内存进行更有效的管理。例如，TypedArray 在 JavaScript 中是连续的内存，这意味着您可以很容易地将一个 TypedArray 转换为另一个 TypedArray，而不需要对其内容进行拷贝和转换。这样可以显著降低内存使用。
总结
基于 ES12 的 ArrayBuffer 和 TypedArray 提供了一种更加高效的方式来处理大量的二进制数据。使用它们可以大幅度降低内存使用，提高运行效率。同时，它也能够更有效地管理内存。希望本文能为您的开发带来一些启示和参考。
另外上文提到过 TypedArray 有9种类型，可视情况选择使用，不过更详细的请参考 MDN。
参考阅读
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d8bc1968c7c53b0855646