ArrayBuffer 与 DataView：处理二进制数据的底层操作

ArrayBuffer 与 DataView：二进制世界的探险指南 🚀

各位亲爱的码农朋友们，大家好！今天咱们不聊风花雪月，不谈人生理想，咱们来聊点更实在的 —— 二进制数据！

等等，先别急着打哈欠，我知道一听“二进制”这仨字，很多人脑子里立刻浮现出0和1，然后就开始头疼。别怕，今天咱们要用最轻松幽默的方式，带大家走进二进制数据的世界，尤其是它的两位得力干将：ArrayBuffer 和 DataView。

想象一下，你是一个探险家，要进入一个神秘的地下宝库。这个宝库里没有金银珠宝，只有一堆用二进制编码的信息碎片。ArrayBuffer 就像是这个宝库的容器，它负责把这些碎片打包存起来。而 DataView 呢？它就是你手里的放大镜和解码器，帮你清晰地看到每个碎片的内容，并翻译成你理解的语言。

怎么样？是不是稍微有点兴趣了？那咱们就开始这场奇妙的探险之旅吧！

一、什么是 ArrayBuffer？ 📦

ArrayBuffer，顾名思义，就是“数组缓冲区”。它代表了一块原始的、连续的内存区域，用于存储二进制数据。你可以把它想象成一个巨大的数组，每个元素都是一个字节（8位）。

特点：

• 固定大小： ArrayBuffer 一旦创建，大小就固定了，不能动态调整。
• 原始内存： 它只是一块内存，不包含任何数据类型信息。
• 不可直接访问： 你不能像访问普通数组那样直接通过索引来访问 ArrayBuffer 中的数据。你需要借助“视图”（比如 DataView 或 TypedArray）才能读取和修改数据。

创建 ArrayBuffer：

// 创建一个 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);
console.log(buffer.byteLength); // 输出: 16

就像你购买了一个容量为 16GB 的 U 盘，但是里面还没有任何文件。

ArrayBuffer 的作用：

• 传输二进制数据： 比如在 WebSockets、XMLHttpRequest 中，可以用来传输图片、音频、视频等二进制文件。
• 处理图像数据： 可以用来存储图像的像素数据，进行图像处理。
• 进行底层操作： 可以用来进行一些底层的二进制数据操作，比如网络协议的解析。

二、DataView：你的二进制数据解读器 👓

DataView 就像是 ArrayBuffer 的专属翻译官，它提供了一种灵活的方式来读取和写入 ArrayBuffer 中的数据。你可以指定数据的类型、字节序（大小端）以及偏移量，来精确地控制如何访问数据。

特点：

• 灵活性： 可以读取和写入不同类型的数据（int8, uint8, int16, uint16, int32, uint32, float32, float64 等）。
• 字节序控制： 可以指定是大端序（big-endian）还是小端序（little-endian）。
• 偏移量访问： 可以从 ArrayBuffer 的任意位置开始读取或写入数据。

创建 DataView：

const buffer = new ArrayBuffer(16);
const dataView = new DataView(buffer);

// 创建 DataView 的时候，可以指定偏移量和长度
const dataView2 = new DataView(buffer, 4, 8); // 从偏移量 4 开始，长度为 8 个字节

就像你拿着一个多功能工具，可以精确定位 ArrayBuffer 中的每个字节，并用你想要的格式解读它。

DataView 的常用方法：

DataView 提供了很多方法来读取和写入不同类型的数据，这些方法的命名都很有规律：

• getInt8(byteOffset): 从指定偏移量读取一个有符号 8 位整数。
• getUint8(byteOffset): 从指定偏移量读取一个无符号 8 位整数。
• getInt16(byteOffset, littleEndian): 从指定偏移量读取一个有符号 16 位整数。
• getUint16(byteOffset, littleEndian): 从指定偏移量读取一个无符号 16 位整数。
• getInt32(byteOffset, littleEndian): 从指定偏移量读取一个有符号 32 位整数。
• getUint32(byteOffset, littleEndian): 从指定偏移量读取一个无符号 32 位整数。
• getFloat32(byteOffset, littleEndian): 从指定偏移量读取一个 32 位浮点数。
• getFloat64(byteOffset, littleEndian): 从指定偏移量读取一个 64 位浮点数。

还有对应的 set 方法：setInt8(), setUint8(), setInt16(), setUint16(), setInt32(), setUint32(), setFloat32(), setFloat64()。

字节序（Endianness）：

在计算机中，多字节数据（比如 16 位、32 位整数）在内存中的存储方式有两种：

• 大端序（Big-Endian）： 高位字节存储在低地址，低位字节存储在高地址。就像我们平时写数字一样，从左到右，高位在前，低位在后。
• 小端序（Little-Endian）： 低位字节存储在低地址，高位字节存储在高地址。

举个例子，假设我们要存储一个 16 位整数 0x1234：

• 大端序： 内存中的存储顺序是 0x12 0x34
• 小端序： 内存中的存储顺序是 0x34 0x12

不同的计算机架构可能会使用不同的字节序。在使用 DataView 读取和写入数据时，需要根据实际情况指定正确的字节序，否则可能会导致数据解析错误。

一个 DataView 的例子：

const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);

// 写入一个 32 位整数
dataView.setInt32(0, 123456789, true); // 从偏移量 0 开始，写入 123456789，小端序

// 读取这个 32 位整数
const value = dataView.getInt32(0, true); // 从偏移量 0 开始，读取 32 位整数，小端序
console.log(value); // 输出: 123456789

// 写入一个 64 位浮点数
dataView.setFloat64(4, 3.1415926, true); // 从偏移量 4 开始，写入 3.1415926，小端序

// 读取这个 64 位浮点数
const floatValue = dataView.getFloat64(4, true); // 从偏移量 4 开始，读取 64 位浮点数，小端序
console.log(floatValue); // 输出: 3.1415926

是不是感觉自己像一个二进制数据侦探，可以任意解读 ArrayBuffer 中的秘密信息了？ 😎

三、ArrayBuffer 和 DataView 的关系：最佳拍档 🤝

ArrayBuffer 和 DataView 并不是孤立存在的，它们是紧密合作的伙伴。ArrayBuffer 负责提供原始的内存空间，而 DataView 负责提供访问和操作这些内存的接口。

你可以把 ArrayBuffer 想象成一个图书馆的书架，DataView 就像是图书馆的管理员，可以根据你的需求找到特定的书籍（数据），并告诉你书中的内容（数据类型和值）。

没有 ArrayBuffer，DataView 就无处施展拳脚；没有 DataView，ArrayBuffer 就只是一堆无法解读的二进制数据。

四、TypedArray：ArrayBuffer 的另一种“视图” 👀

除了 DataView 之外，还有一种访问 ArrayBuffer 的方式，叫做 TypedArray（类型化数组）。TypedArray 提供了一种更简洁、更高效的方式来访问 ArrayBuffer 中的数据，特别是当你知道数据的类型是统一的时候。

特点：

• 类型化： TypedArray 中的所有元素都具有相同的类型（比如 Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array 等）。
• 数组式访问： 可以像访问普通数组那样通过索引来访问 TypedArray 中的元素。
• 效率更高： 在处理大量同类型数据时，TypedArray 的效率通常比 DataView 更高。

创建 TypedArray：

const buffer = new ArrayBuffer(16);

// 创建一个 Int32Array，它使用 ArrayBuffer 的前 8 个字节
const int32Array = new Int32Array(buffer, 0, 2); // 偏移量 0，长度为 2 个元素 (2 * 4 = 8 字节)

// 创建一个 Float32Array，它使用 ArrayBuffer 的后 8 个字节
const float32Array = new Float32Array(buffer, 8, 2); // 偏移量 8，长度为 2 个元素 (2 * 4 = 8 字节)

TypedArray 的用法：

// 设置值
int32Array[0] = 10;
int32Array[1] = 20;

// 读取值
console.log(int32Array[0]); // 输出: 10
console.log(int32Array[1]); // 输出: 20

// 设置浮点数的值
float32Array[0] = 3.14;
float32Array[1] = 2.718;

// 读取浮点数的值
console.log(float32Array[0]); // 输出: 3.140000104904175
console.log(float32Array[1]); // 输出: 2.7179999351501465

TypedArray 的种类：

类型	描述	每个元素占用的字节数
Int8Array	有符号 8 位整数数组	1
Uint8Array	无符号 8 位整数数组	1
Int16Array	有符号 16 位整数数组	2
Uint16Array	无符号 16 位整数数组	2
Int32Array	有符号 32 位整数数组	4
Uint32Array	无符号 32 位整数数组	4
Float32Array	32 位浮点数数组	4
Float64Array	64 位浮点数数组	8
Uint8ClampedArray	无符号 8 位整数数组，数值会被限制在 0-255 之间，常用于处理图像数据。	1
BigInt64Array	有符号 64 位整数数组 (ES2020 新增)	8
BigUint64Array	无符号 64 位整数数组 (ES2020 新增)	8

TypedArray 和 DataView 的选择：

• 如果你需要灵活地访问 ArrayBuffer 中的不同类型的数据，并且需要控制字节序，那么 DataView 是更好的选择。
• 如果你需要高效地处理大量同类型的数据，并且不需要控制字节序，那么 TypedArray 是更好的选择。

就像你既需要一个多功能的瑞士军刀（DataView），也需要一把锋利的砍刀（TypedArray），根据不同的场景选择合适的工具。

五、应用场景：二进制数据的用武之地 ⚔️

ArrayBuffer 和 DataView 在前端开发中有很多应用场景，下面列举几个常见的例子：

1. 文件上传和下载：

   可以使用 ArrayBuffer 来读取和写入二进制文件，然后通过 XMLHttpRequest 或 Fetch API 将文件上传到服务器，或者从服务器下载文件。

   const fileInput = document.getElementById('fileInput');
   
   fileInput.addEventListener('change', async (event) => {
     const file = event.target.files[0];
     const arrayBuffer = await file.arrayBuffer(); // 将文件读取为 ArrayBuffer
   
     // 将 ArrayBuffer 发送到服务器
     fetch('/upload', {
       method: 'POST',
       body: arrayBuffer,
     });
   });

2. WebGL：

   WebGL 是一个用于在浏览器中渲染 3D 图形的 API。它使用 ArrayBuffer 来存储顶点数据、纹理数据等。

   // 创建一个 ArrayBuffer 来存储顶点数据
   const vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   const vertices = new Float32Array([
     -0.5, -0.5, 0.0,
      0.5, -0.5, 0.0,
      0.0,  0.5, 0.0
   ]);
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

3. 音频处理：

   可以使用 ArrayBuffer 来存储音频数据，然后使用 Web Audio API 来播放和处理音频。

   const audioContext = new AudioContext();
   
   // 从服务器获取音频数据
   fetch('/audio.mp3')
     .then(response => response.arrayBuffer())
     .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
     .then(audioBuffer => {
       // 创建一个 BufferSourceNode
       const source = audioContext.createBufferSource();
       source.buffer = audioBuffer;
       source.connect(audioContext.destination);
       source.start();
     });

4. 图像处理：

   可以使用 ArrayBuffer 来存储图像的像素数据，然后进行图像处理操作，比如缩放、旋转、滤镜等。

   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   const data = imageData.data; // data 是一个 Uint8ClampedArray，包含了图像的像素数据
   
   // 修改像素数据
   for (let i = 0; i < data.length; i += 4) {
     // 将红色通道的值设置为 255
     data[i] = 255;
   }
   
   // 将修改后的数据更新到 canvas 上
   ctx.putImageData(imageData, 0, 0);

5. 网络协议解析：

   可以使用 ArrayBuffer 和 DataView 来解析网络协议的数据包，提取出有用的信息。

   // 假设我们收到了一个二进制数据包
   const buffer = new ArrayBuffer(10);
   const dataView = new DataView(buffer);
   
   // 假设数据包的前 4 个字节是包头，包含包的类型
   const packetType = dataView.getUint32(0, true);
   
   // 假设数据包的第 5-8 个字节是数据长度
   const dataLength = dataView.getUint32(4, true);
   
   // 根据包的类型和数据长度，解析数据包的内容
   if (packetType === 1) {
     // 处理类型为 1 的数据包
     const data = new Uint8Array(buffer, 8, dataLength);
     console.log('Data:', data);
   }

六、总结：二进制世界的钥匙 🔑

ArrayBuffer 和 DataView 是处理二进制数据的强大工具，它们为我们打开了通往底层操作的大门。掌握它们，你就可以：

• 更高效地处理文件： 可以直接操作二进制数据，避免不必要的类型转换。
• 更灵活地控制数据： 可以精确地控制数据的类型、字节序和偏移量。
• 更深入地理解底层： 可以更好地理解计算机内部的数据存储方式。

希望通过今天的讲解，大家对 ArrayBuffer 和 DataView 有了更清晰的认识。记住，二进制数据并不神秘，只要你掌握了正确的工具，就可以轻松驾驭它！ 💪

最后，送给大家一句至理名言：“二进制的世界，0 和 1 决定一切！” (手动滑稽)

感谢大家的聆听，我们下次再见！ 👋