JavaScript二进制数据处理与ArrayBuffer

JavaScript通过ArrayBuffer实现二进制数据处理，需借助TypedArray或DataView操作；TypedArray用于高效访问特定类型数据，如Uint8Array；DataView支持灵活读写及字节序控制，适用于网络协议解析；广泛应用于文件、WebSocket、Canvas和WebAssembly场景。

JavaScript中的二进制数据处理能力在现代Web开发中越来越重要，尤其是在处理文件上传、音视频操作、WebSocket通信、Canvas图像处理等场景中。核心的底层数据结构是ArrayBuffer，它是表示通用、固定长度的原始二进制数据缓冲区的类型。

ArrayBuffer：原始二进制数据容器

ArrayBuffer本身不能直接读写，它只是一个内存区域的抽象表示，类似于C语言中的字节数组。要操作其中的数据，必须通过“视图”（View）来实现，最常用的是TypedArray（如Uint8Array、Int32Array）和DataView。

创建一个长度为16字节的ArrayBuffer：

const buffer = new ArrayBuffer(16);
console.log(buffer.byteLength); // 16

此时buffer中没有任何可操作的接口，只能知道它的大小。

使用TypedArray操作二进制数据

TypedArray是一类基于ArrayBuffer的视图，提供对特定类型数据的访问方式。常见的有：

• Uint8Array：无符号8位整数（1字节）
• Int16Array：有符号16位整数（2字节）
• Float32Array：32位浮点数（4字节）
• Uint8ClampedArray：用于图像像素，超出范围时自动钳制

示例：用Uint8Array操作ArrayBuffer

const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);

view[0] = 42;
view[1] = 255;

console.log(view[0]); // 42
console.log(view[1]); // 255

多个TypedArray可以共享同一个ArrayBuffer，但以不同方式解释同一段内存。

DataView：灵活读写不同字节序

当需要处理网络协议或跨平台数据交换时，字节序（大端或小端）变得重要。DataView提供了更细粒度的控制，允许手动指定字节序。

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

dataView.setUint32(0, 0x12345678, false); // 大端写入
dataView.setInt16(4, -100, true);         // 小端写入

console.log(dataView.getUint32(0, false)); // 305419896 (0x12345678)
console.log(dataView.getInt16(4, true));   // -100

DataView适合处理混合类型和明确要求字节序的场景，比如解析自定义二进制格式。

实际应用场景

常见用途包括：

• 文件处理：File API读取文件返回ArrayBuffer
• WebSocket：发送和接收二进制消息时使用ArrayBuffer
• Canvas图像处理：getImageData().data返回Uint8ClampedArray
• WebAssembly：与Wasm共享内存的基础

例如从Blob读取ArrayBuffer：

file.arrayBuffer().then(buffer => {
  const bytes = new Uint8Array(buffer);
  console.log('前4个字节:', bytes.slice(0, 4));
});

基本上就这些。理解ArrayBuffer及其视图机制，是掌握JavaScript高效处理二进制数据的关键。根据不同需求选择TypedArray或DataView，能有效提升性能和兼容性。