在 ECMAScript 2016 (ES7) 中，引入了 ArrayBuffer 类型，它是一种通用的、固定长度的二进制数据缓冲区，可以用来存储任意类型的数据。ArrayBuffer 的存储模式是连续的、固定大小的字节序列，它的长度在创建时就已经确定，不可改变。
ArrayBuffer 的创建与使用
通过 new ArrayBuffer() 方法可以创建一个指定长度的 ArrayBuffer 实例，其语法如下：
let buffer = new ArrayBuffer(length);
其中，length 是指定的字节长度，可以是一个正整数。例如，创建一个长度为 10 的 ArrayBuffer 实例，可以这样写：
let buffer = new ArrayBuffer(10);
创建完之后，我们可以通过 DataView 对象来读写 ArrayBuffer 中的数据，其语法如下：
let dataView = new DataView(buffer);
DataView 对象提供了一系列方法来读写 ArrayBuffer 中的数据，例如：
dataView.setInt8(offset, value); // 在指定偏移量写入一个 8 位整数 dataView.getInt8(offset); // 从指定偏移量读取一个 8 位整数 dataView.setInt16(offset, value); // 在指定偏移量写入一个 16 位整数 dataView.getInt16(offset); // 从指定偏移量读取一个 16 位整数 // ... 其他方法同理
ArrayBuffer 的应用实例
1. 二进制数据传输
ArrayBuffer 可以用于二进制数据的传输，例如在 Websocket、WebRTC 等通信协议中，可以将数据转换为 ArrayBuffer 类型进行传输。以下是一个简单的示例，用于将一个字符串转换为 ArrayBuffer 类型并发送到服务器：
let socket = new WebSocket('ws://localhost:8080');
let str = 'hello world';
let buffer = new ArrayBuffer(str.length * 2);
let dataView = new DataView(buffer);
for (let i = 0; i < str.length; i++) {
dataView.setInt16(i * 2, str.charCodeAt(i));
}
socket.send(buffer);2. 图像处理
ArrayBuffer 可以用于图像处理，例如可以将图像数据转换为 ArrayBuffer 类型，然后使用 Canvas API 进行绘制。以下是一个简单的示例，用于将一个图像绘制到 Canvas 中：
-- -------------------- ---- ------- --- --- - --- -------- ------- - ------------ ---------- - ---------- - --- ------ - --------------------------------- ------------ - ---------- ------------- - ----------- --- --- - ------------------------ ------------------ -- --- --- --------- - ------------------- -- ---------- ------------ --- ------ - ---------------------- --- -------- - --- ----------------- -- --------- -- --- --------------------------- -- --- ---------------------------------- --
3. 网络协议解析
ArrayBuffer 可以用于网络协议解析，例如在 HTTP、TCP 等协议中，可以将数据转换为 ArrayBuffer 类型进行解析。以下是一个简单的示例，用于解析一个 HTTP 响应：
-- -------------------- ---- -------
--- --- - --- -----------------
--------------- -------------------------
---------- - ---------- -
--- ------ - -------------
--- -------- - --- -----------------
--- ------ - ----------------------
--- ------------- - ----------------------
--- ------- - ---
--- ---- - - -- - - -------------- ---- -
--- ---------- - ------------------- - - - ---
--- ----------- - -------------------- - - - ---
--- ---- - ---
--- ---- - - -- - - ----------- ---- -
---- -- --------------------------------------- - - - - - ----
-
--- ----- - ---
--- ---- - - -- - - ------------ ---- -
----- -- --------------------------------------- - - - - - ---------- - ----
-
------------- - ------
-
--- ---- - -------------- - ------------- - ---
-- ---------
-- ---
--
---------------- - --------------
-----------以上是三个简单的应用实例，展示了 ArrayBuffer 的一些用途。当然，ArrayBuffer 还有很多其他的应用场景，读者可以根据实际需求进行探索。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d436aca941bf71347f009b