ArrayBuffer 是 JavaScript 中用于存储二进制原始数据的固定长度内存容器，需配合 Uint8Array 或 DataView 等视图操作；它不可直接索引或修改，常来自文件、网络响应等外部源，支持高效批量处理或精确字节序控制，并可与 Blob、fetch 等 API 无缝对接。
ArrayBuffer 是 JavaScript 中处理二进制原始数据的底层内存容器，它本身不提供读写能力，必须配合视图（如 Uint8Array 或 DataView）才能真正操作字节。核心在于：它是一块“未解释的内存”，你决定怎么读、从哪读、按什么格式读。
创建和理解 ArrayBuffer
ArrayBuffer 表示一段固定长度的连续二进制内存空间，单位是字节。创建后长度不可变：
- new ArrayBuffer(1024) —— 分配 1KB 空缓冲区，所有字节初始为 0
- 它不是普通数组，不能用
buffer[0]访问，也不能 push 或 pop - 常见来源不是手动创建，而是来自外部：比如
file.arrayBuffer()、response.arrayBuffer()、canvas.getContext('2d').getImageData().data.buffer
用类型化数组（TypedArray）高效读写同构数据
当你要处理大量相同类型的数据（如图像像素、音频采样、结构化整数），Uint8Array、Int32Array 等是最常用、性能最优的选择：
- 共享同一块内存：多个视图指向同一个 ArrayBuffer，修改一个会影响另一个（例如改 Uint8Array[0] 会改变 Int32Array[0] 的最低字节）
-
const u8 = new Uint8Array(buffer); u8[0] = 255;—— 直接写入第 1 字节 -
const i32 = new Int32Array(buffer); i32[0] = -1;—— 写入一个 4 字节有符号整数，占据字节 0–3 - 适合批量操作：
u8.set([1,2,3,4], 8)从偏移 8 开始填入 4 个字节
用 DataView 精确控制偏移与字节序
当你需要混合类型、指定起始位置、或确保跨平台一致性（比如解析网络协议、文件头），DataView 更可靠：
- 支持显式设置大小端：
dv.setInt32(4, 123456, true)（小端） vsfalse（大端） - 可重叠读写：
dv.setUint8(0, 0x89); dv.setUint32(0, 0x89504e47, false)—— 先写 1 字节 PNG 签名首字节，再用大端写完整 4 字节签名 - 适合解析头部信息：比如读取 PNG 文件前 8 字节判断魔数，再跳过 12 字节读 IHDR 块长度
与实际场景对接的关键操作
真实项目中，ArrayBuffer 往往是数据流转的中间形态，需灵活转换：
-
转 Blob 下载：
const blob = new Blob([buffer], {type: 'image/png'}); URL.createObjectURL(blob) -
从 Blob/File 获取：
file.arrayBuffer().then(buf => { ... }) -
分片上传大文件：用
blob.slice(start, end)获取子 Blob，再调.arrayBuffer()避免一次性加载全量 -
流式处理响应体：对超大 response，用
response.body.getReader()分块读取 Uint8Array，再用value.buffer提取每段 ArrayBuffer -
直接发送二进制请求：fetch 的
body可直接受 ArrayBuffer、TypedArray 或 DataView
