现代JavaScript_ArrayBuffer与类型数组

ArrayBuffer是固定长度的二进制数据容器，需通过类型数组视图操作；类型数组如Uint8Array可按特定格式读写缓冲区，支持多视图共享同一缓冲，广泛用于文件、网络、音视频等高性能场景。

JavaScript中的ArrayBuffer和类型数组（Typed Arrays）为处理二进制数据提供了高效的方式，尤其适用于WebGL、音频处理、文件操作（如File API）以及网络协议（如WebSocket）等场景。它们弥补了传统JavaScript数组在性能和内存控制方面的不足。

ArrayBuffer：原始二进制数据容器

ArrayBuffer 是一个通用的固定长度的引用类型，用于表示一段二进制数据。它本身不提供直接操作数据的方法，只是一个“数据块”占位符。

创建一个16字节的缓冲区：

const buffer = new ArrayBuffer(16);

可以通过 byteLength 属性查看其大小：

console.log(buffer.byteLength); // 16

一旦创建，ArrayBuffer 的大小不可变。若要操作其中的数据，必须借助视图（view），最常见的就是类型数组。

类型数组：访问ArrayBuffer的桥梁

类型数组是建立在ArrayBuffer之上的视图，允许以特定数据类型解释二进制内容。常见的类型包括：

• Int8Array：8位有符号整数
• Uint8Array：8位无符号整数
• Int16Array：16位有符号整数
• Uint16Array：16位无符号整数
• Int32Array：32位有符号整数
• Uint32Array：32位无符号整数
• Float32Array：32位浮点数
• Float64Array：64位浮点数

使用类型数组操作ArrayBuffer：

const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);
view[0] = 42;
view[1] = 84;
console.log(view[0]); // 42

此时，view 将buffer 解释为两个32位整数（每个4字节），共8字节。对view 的修改直接影响底层的buffer。

多个视图共享同一缓冲区

同一个ArrayBuffer 可以被多个不同类型的视图引用，这在处理复杂数据结构时非常有用。

const buffer = new ArrayBuffer(8);
const intView = new Int32Array(buffer);
const byteView = new Uint8Array(buffer);

intView[0] = 0x12345678;
console.log(byteView); // [120, 86, 52, 18, 0, 0, 0, 0]

上面例子中，写入一个32位整数后，通过8位视图可以看到其字节序列（小端序）。这种能力常用于序列化或解析二进制协议。

实际应用场景

类型数组广泛应用于现代Web开发：

• 从fetch获取图片或音频资源时，响应体可转为ArrayBuffer
• 使用FileReader读取本地文件的二进制内容
• Web Audio API 中处理音频样本
• WebSocket传输二进制消息
• Canvas像素操作（ImageData使用Uint8ClampedArray）

例如，读取上传文件的前几个字节判断类型：

fileReader.onload = function(e) {
  const buffer = e.target.result;
  const bytes = new Uint8Array(buffer, 0, 4);
  console.log(bytes); // 输出前4个字节
};
fileReader.readAsArrayBuffer(file);

基本上就这些。ArrayBuffer与类型数组让JavaScript具备了接近系统级的语言对内存的控制能力，是现代高性能Web应用不可或缺的基础。