ArrayBuffer是JavaScript中表示固定长度二进制数据的缓冲区，需通过类型数组或DataView等视图操作。1. 类型数组如Uint8Array提供特定数据类型解释，适用于Canvas、WebGL等场景；2. DataView支持灵活读写不同数据类型及字节序控制，适合处理复杂二进制结构；3. 广泛应用于文件读取、WebSocket通信、音视频处理等领域，是前端高效处理二进制数据的核心机制。
JavaScript中的类型数组（Typed Arrays）是处理二进制数据的重要工具，尤其在操作原始二进制数据如音频、视频、图像或网络协议时非常有用。它们让开发者可以直接读写ArrayBuffer中的字节内容，适用于WebGL、WebSocket、文件操作（如FileReader）、Canvas像素处理等场景。
什么是ArrayBuffer？
ArrayBuffer 是JavaScript中表示一段固定长度的二进制数据缓冲区。它本身不能直接读写，必须通过“视图”（View）来操作，最常见的视图就是类型数组。
例如创建一个8字节的缓冲区：const buffer = new ArrayBuffer(8);
此时buffer只是一个空的字节容器，无法直接操作其中的数据。
常见的类型数组（Typed Arrays）
类型数组是ArrayBuffer的视图，提供不同的数据类型解释方式。常见类型包括：
立即学习“Java免费学习笔记（深入）”；
- Int8Array：8位有符号整数
- Uint8Array：8位无符号整数
- Uint8ClampedArray：用于Canvas，超出范围时会被限制在0-255
- Int16Array：16位有符号整数
- Uint16Array：16位无符号整数
- Int32Array：32位有符号整数
- Uint32Array：32位无符号整数
- Float32Array：32位浮点数
- Float64Array：64位浮点数
示例：使用Uint8Array操作ArrayBuffer
const buffer = new ArrayBuffer(8); const view = new Uint8Array(buffer); view[0] = 42; console.log(view[0]); // 输出 42
如何处理更复杂的二进制结构？DataView
当需要在一个缓冲区中混合读取不同类型的值（比如先读int32，再读float64），DataView 更灵活。
const buffer = new ArrayBuffer(16); const dataView = new DataView(buffer); dataView.setInt32(0, 42); // 在偏移0处写入32位整数 dataView.setFloat64(4, 3.14); // 在偏移4处写入64位浮点数 console.log(dataView.getInt32(0)); // 42 console.log(dataView.getFloat64(4)); // 3.14
DataView支持指定字节序（小端/大端），适合处理跨平台的二进制协议。
实际应用场景
类型数组广泛用于以下场景：
- 文件读取：FileReader读取文件后返回ArrayBuffer
- Canvas像素操作：getImageData().data 返回 Uint8ClampedArray
- WebSocket二进制通信：发送和接收ArrayBuffer
- WebAssembly：与WASM共享内存
- 音视频处理：AudioContext、MediaSource等API依赖类型数组
示例：从Blob读取ArrayBuffer
fileReader = new FileReader();
fileReader.onload = function(e) {
const arrayBuffer = e.target.result; // 二进制数据
const uint8View = new Uint8Array(arrayBuffer);
console.log('前几个字节:', uint8View.slice(0, 5));
};
fileReader.readAsArrayBuffer(file);
基本上就这些。掌握类型数组和ArrayBuffer是深入前端二进制处理的关键一步，虽然概念略底层，但在高性能或多媒体应用中不可或缺。
