简介
在 Web 开发中，我们通常处理的是文本数据，例如 HTML，CSS，JavaScript 代码等，这些数据都是以字符串的形式进行传输与处理的。但是，在某些特定场景下，我们需要处理的数据却是二进制数据，例如图片、音频、视频、压缩文件等。在这些场景下，文本形式显然不够高效，因为它们需要更多的字符集和编码等，而且还会导致每个字符的额外字节。
ECMAScript 2019 引入了 ArrayBuffer 和 TypedArrays 来解决这些问题，这篇文章将深入探讨这两个 API 的用法和使用场景。
ArrayBuffer
ArrayBuffer 是一种可以存储原始二进制数据的容器。它类似于其他编程语言中的 buffer 或 byte array。ArrayBuffer 对象本身并不能进行任何操作，但是可以通过一个或多个 TypedArrays 来操作其底层内存。
一个 ArrayBuffer 对象可以由 new ArrayBuffer() 构造函数创建，也可以使用其他 ArrayBuffer 相关 API 来创建，例如 SharedArrayBuffer 和 transfer。它们的具体用法如下：
-- -------------------- ---- ------- -- ---- ---- - -- - ----------- ----- ------ - --- ---------------- -- ------- ---- - -- - ----------- ----- ------------ - --- ---------------------- -- -- -------------- ---------- ----------- ----- -------------- - --- ---------------- ----- -------------- - --------------------------
TypedArrays
TypedArrays 是利用 ArrayBuffer 的底层内存来操作存储在 ArrayBuffer 中的数据的一种方式。它们提供了一种简单的方法来读取和写入原始数据，例如整数、浮点数、字节，以及其他类似的数据。目前，ECMAScript 规范中存在以下 9 种 TypedArrays：
- Int8Array、Uint8Array 和 Uint8ClampedArray：8 位整数数组，分别用于有符号数、无符号数和经过了边界检查的无符号数。
- Int16Array 和 Uint16Array：16 位整数数组，分别用于有符号数和无符号数。
- Int32Array 和 Uint32Array：32 位整数数组，分别用于有符号数和无符号数。
- Float32Array 和 Float64Array：32 位和 64 位浮点数组。
这些 TypedArrays 都提供了类似数组的接口，例如 length 属性、索引和迭代器等。它们可以通过传递 ArrayBuffer 对象和可选的偏移量和长度来创建，例如：
-- -------------------- ---- ------- -- --------- -- ------ ----------- ----- ------ - --- ---------------- ----- ---------- - --- ------------------- -- --------- - -------- - ---- ---------- ----- ---------- - --- -------------- -- -- -- ---- -- --------- -- -------- ----------- ----- ---------- ----- ------------ - --- ------------------ --- -----
示例
让我们来看一个示例，如何使用 TypedArrays 对图像文件进行操作：
-- -------------------- ---- ------- -- - --- --- --- -- ----- --- - ------------------------------ -- ------ ------ -- ----- ------ - --------------------------------- -- - ------ ------------ ------------ - ---------- ------------- - ----------- -- --- ------ ------ ----- --- - ------------------------ ------------------ -- --- -- - --- ---- ------ --- ----- --------- - ------------------- -- ------------- --------------- -- - --------- ----- ---------- - ----- ---------- - --- ---------------------------------- -- - ---------- --- ----------- ----- ------ - ------------------ -- ----------- ------ ----------------
在这个示例中，我们使用了 Canvas 的 getContext('2d') 方法来获取绘制 2D 图形的上下文。接着，我们在 Canvas 上绘制了源图像，并使用 getImageData() 方法获取了 Canvas 上指定区域的图像数据。然后，我们使用 Uint8ClampedArray 来存储 imageData 数据，并将其转换为 ArrayBuffer，以便于进行传输或存储。
总结
通过使用 ArrayBuffer 和 TypedArrays，我们可以更高效地存储和处理二进制数据。以上展示了一些基础知识，但是实际使用时可能需要更进一步的学习和练习。希望这篇文章对你有所帮助，并且能够引导你在未来的开发过程中更好地应用这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64883d7948841e98946c0fe9