ArrayBuffer是固定长度的二进制数据容器，需通过类型数组视图操作；类型数组如Uint8Array可按特定格式读写缓冲区，支持多视图共享同一缓冲，广泛用于文件、网络、音视频等高性能场景。
JavaScript中的ArrayBuffer和类型数组（Typed Arrays）为处理二进制数据提供了高效的方式，尤其适用于WebGL、音频处理、文件操作（如File API）以及网络协议（如WebSocket）等场景。它们弥补了传统JavaScript数组在性能和内存控制方面的不足。
ArrayBuffer：原始二进制数据容器
ArrayBuffer 是一个通用的固定长度的引用类型，用于表示一段二进制数据。它本身不提供直接操作数据的方法，只是一个“数据块”占位符。
创建一个16字节的缓冲区：
const buffer = new ArrayBuffer(16);可以通过 byteLength 属性查看其大小：
立即学习“Java免费学习笔记（深入）”；
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 view = new Int32Array(buffer);
view[0] = 42;
view[1] = 84;
console.log(view[0]); // 42
此时，view 将buffer 解释为两个32位整数（每个4字节），共8字节。对view 的修改直接影响底层的buffer。
多个视图共享同一缓冲区
同一个ArrayBuffer 可以被多个不同类型的视图引用，这在处理复杂数据结构时非常有用。
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应用不可或缺的基础。
