JavaScript通过ArrayBuffer、TypedArray和DataView实现二进制数据操作：ArrayBuffer为固定长度的原始二进制数据缓冲区，需通过视图访问；TypedArray（如Uint8Array、Float32Array）提供带类型的数据视图，适用于图像、音频等场景；DataView支持手动指定字节序的灵活读写，适合协议解析。实际应用包括文件读取、WebSocket通信、Canvas图像处理及音视频流操作，三者协同实现高效二进制处理。
JavaScript中操作二进制数据的能力在处理文件、网络通信、图像音频处理等场景中非常关键。虽然JavaScript最初是为网页脚本设计的，但随着Node.js和Web API的发展，它已经具备了完整的二进制数据处理能力。
1. ArrayBuffer：二进制数据的容器
ArrayBuffer 是用于表示通用、固定长度的原始二进制数据缓冲区的类型。它本身不能直接操作数据，必须通过视图（如 TypedArray 或 DataView）来读写。
创建一个8字节的缓冲区：
const buffer = new ArrayBuffer(8);此时 buffer 只是一块内存空间，没有具体的解释方式。
立即学习“Java免费学习笔记（深入）”；
2. TypedArray：带类型的数组视图
TypedArray 提供了以特定数据类型访问 ArrayBuffer 的方式，比如 Int8Array、Uint8Array、Float32Array 等。
示例：使用 Uint8Array 操作字节
const buffer = new ArrayBuffer(8);const view = new Uint8Array(buffer);
view[0] = 42;
console.log(view[0]); // 42
常见类型：
- Int8Array：8位有符号整数
- Uint8Array：8位无符号整数
- Uint16Array：16位无符号整数（自动处理字节序）
- Float32Array：32位浮点数
- Float64Array：64位浮点数
这些视图让开发者能按需解析二进制数据，常用于图像像素、音频样本等处理。
3. DataView：灵活的二进制数据读写
DataView 提供了更底层、更灵活的方式来读写 ArrayBuffer 中的数据，支持手动指定字节序（大端或小端）。
示例：混合读取不同类型的数据
const buffer = new ArrayBuffer(8);const dataView = new DataView(buffer);
dataView.setUint16(0, 255, true); // 偏移0，写入16位数，true表示小端
dataView.setFloat32(2, 3.14, true); // 偏移2，写入32位浮点数
console.log(dataView.getUint16(0, true)); // 255
console.log(dataView.getFloat32(2, true)); // 3.14
DataView 特别适合处理协议数据包、文件头等需要精确控制字节顺序的场景。
4. 实际应用场景
在前端或Node.js中，常见的二进制操作包括：
- 读取文件（File API）：用户上传的文件可通过 FileReader 读成 ArrayBuffer
- WebSocket 通信：发送和接收 binary 数据时常用 ArrayBuffer 或 Blob
- Canvas 图像处理：getImageData 返回 ImageData，其数据是 Uint8ClampedArray
- 音视频处理：Web Audio API 和 MediaRecorder 输出二进制流
示例：从文件读取 ArrayBuffer
const fileInput = document.getElementById('file');fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function() {
const arrayBuffer = reader.result;
const uint8Array = new Uint8Array(arrayBuffer);
console.log(uint8Array);
};
reader.readAsArrayBuffer(file);
});
基本上就这些。掌握 ArrayBuffer、TypedArray 和 DataView，就能应对大多数二进制数据操作需求。关键是理解它们之间的关系：ArrayBuffer 是数据容器，TypedArray 提供类型化视图，DataView 提供灵活读写。不复杂但容易忽略细节，比如字节序和内存对齐。
