js ArrayBuffer 二进制基本数据暂存对象

ArrayBuffer 是 JavaScript 中用于表示二进制数据的低级对象。它是一段固定长度的连续内存区域，通常用于处理文件、图像、音频、视频等二进制数据。ArrayBuffer 本身只是一个字节数组，不能直接操作，需要通过类型化数组（Typed Array）或DataView来访问和修改其内容。

---

1. ArrayBuffer 的基本概念

• 固定长度：ArrayBuffer 的长度在创建时确定，之后无法更改。
• 二进制数据：ArrayBuffer 存储的是原始的二进制数据，没有数据类型的概念。
• 不可直接操作：ArrayBuffer 本身没有提供访问或修改数据的方法，需要通过视图（如 Uint8Array、DataView）来操作。

---

2. 创建 ArrayBuffer

使用 new ArrayBuffer(length) 创建一个指定字节长度的 ArrayBuffer。

示例：

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

---

3. 使用类型化数组操作 ArrayBuffer

类型化数组（Typed Array）是 ArrayBuffer 的视图，提供了对 ArrayBuffer 中数据的类型化访问。常见的类型化数组包括：

• Uint8Array：8 位无符号整数数组。
• Int16Array：16 位有符号整数数组。
• Float32Array：32 位浮点数数组。

示例：

const buffer = new ArrayBuffer(16);

// 创建一个 Uint8Array 视图
const uint8Array = new Uint8Array(buffer);

// 向 ArrayBuffer 写入数据
uint8Array[0] = 255; // 写入一个字节
uint8Array[1] = 128;

console.log(uint8Array); // Uint8Array(16) [255, 128, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

---

4. 使用 DataView 操作 ArrayBuffer

DataView 是一个更灵活的视图，允许以不同的数据类型（如 Int16、Float32 等）访问 ArrayBuffer 中的数据。

示例：

const buffer = new ArrayBuffer(16);

// 创建一个 DataView 视图
const dataView = new DataView(buffer);

// 向 ArrayBuffer 写入数据
dataView.setUint8(0, 255); // 写入一个 8 位无符号整数
dataView.setUint16(2, 65535); // 写入一个 16 位无符号整数

// 从 ArrayBuffer 读取数据
console.log(dataView.getUint8(0)); // 255
console.log(dataView.getUint16(2)); // 65535

---

5. ArrayBuffer 的应用场景

• 文件处理：读取或写入二进制文件（如图片、音频、视频）。
• 网络通信：处理二进制协议（如 WebSocket、WebRTC）。
• 加密和解密：操作二进制数据进行加密或解密。
• 图像处理：操作像素数据。

示例：读取文件的二进制数据

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const arrayBuffer = e.target.result;
    console.log(arrayBuffer); // ArrayBuffer
  };

  reader.readAsArrayBuffer(file);
});

---

6. ArrayBuffer 的注意事项

• 共享内存：多个视图（如 Uint8Array、DataView）可以共享同一个 ArrayBuffer，修改一个视图会影响其他视图。
• 字节顺序：DataView 支持指定字节顺序（大端序或小端序），默认是大端序。
• 性能：直接操作 ArrayBuffer 比操作普通数组更快，适合处理大量二进制数据。

---

7. 总结

• ArrayBuffer：表示一段固定长度的二进制数据。
• 类型化数组：提供对 ArrayBuffer 的类型化访问（如 Uint8Array、Int16Array）。
• DataView：提供更灵活的二进制数据访问方式。
• 应用场景：文件处理、网络通信、加密解密、图像处理等。

通过 ArrayBuffer，JavaScript 可以高效地处理二进制数据，满足现代 Web 开发中对文件、网络通信等场景的需求。