ArrayBuffer提供固定长度的二进制数据存储，TypedArray作为视图以特定格式（如Int32Array、Uint8Array）读写该数据，二者结合实现高效二进制操作，适用于文件读写、网络通信和音视频处理等场景。
在JavaScript中处理二进制数据时，ArrayBuffer 和 TypedArray 是核心工具。它们为操作原始二进制数据提供了高效的方式，常用于文件读写、网络通信（如WebSocket）、音视频处理等场景。
ArrayBuffer：二进制数据的容器
ArrayBuffer 表示一段固定长度的二进制数据缓冲区。它本身不能直接读写，只能通过视图来操作，比如 TypedArray 或 DataView。
创建一个 ArrayBuffer 很简单：
const buffer = new ArrayBuffer(8); // 创建一个8字节的缓冲区
你可以检查它的大小：
console.log(buffer.byteLength); // 8
一旦创建，ArrayBuffer 的大小不可变。如果需要扩展，必须创建新的 ArrayBuffer 并复制数据。
TypedArray：ArrayBuffer 的视图
TypedArray 不是一个单一类型，而是一组视图类型的统称，它们可以将 ArrayBuffer 中的二进制数据以特定格式解析出来。常见的类型包括：
- Int8Array：8位有符号整数
- Uint8Array：8位无符号整数
- Int16Array：16位有符号整数
- Uint16Array：16位无符号整数
- Int32Array：32位有符号整数
- Uint32Array：32位无符号整数
- Float32Array：32位浮点数
- Float64Array：64位浮点数
使用 TypedArray 操作 ArrayBuffer 示例：
const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer); // 将buffer按32位整数解析
view[0] = 42;
view[1] = 84;
console.log(view); // [42, 84]
这里，8字节的 buffer 被两个 32 位整数填满。每个元素占 4 字节。
多种视图共享同一块内存
同一个 ArrayBuffer 可以被多个不同类型的 TypedArray 视图引用。这在需要按不同方式解释同一段数据时非常有用。
例如：
const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);
const byteView = new Uint8Array(buffer);
intView[0] = 0x12345678;
intView[1] = 0xABCDEF00;
console.log(byteView); // [120, 86, 52, 18, 0, 239, 205, 171]
上面代码中，intView 写入了两个32位整数，而 byteView 将同样的数据以字节形式展示。注意字节序问题：小端还是大端会影响结果顺序。
实际应用场景
常见用途包括：
- 从 File API 读取文件后，获取 ArrayBuffer 进行解析
- WebSocket 接收二进制消息时使用 ArrayBuffer
- Canvas 图像数据处理（getImageData）返回的是 Uint8ClampedArray
- WebAssembly 内存交互
例如读取文件片段：
const file = document.querySelector('input[type="file"]').files[0];
const reader = new FileReader();
reader.onload = function(e) {
const buffer = e.target.result; // ArrayBuffer
const bytes = new Uint8Array(buffer);
console.log(bytes.slice(0, 10)); // 查看前10个字节
};
reader.readAsArrayBuffer(file);
基本上就这些。ArrayBuffer 提供存储，TypedArray 提供访问方式，两者结合让 JavaScript 也能高效处理底层二进制数据。不复杂但容易忽略细节，比如类型长度和字节序。掌握它们对高性能或系统级前端开发很有帮助。
