ArrayBuffer 是 javaScript 中操作二进制数据的基础内存容器,需配合 Uint8Array、Int32Array 或 DataView 等视图使用;其长度固定,创建后不可变,常用于文件读取、网络请求、canvas 像素处理及 WebAssembly 等场景。

javascript 中的 ArrayBuffer 是操作二进制数据的基础容器,它本身不提供读写能力,必须配合视图(如 Uint8Array、Int32Array、DataView)才能使用。核心逻辑是:先申请一段连续内存(ArrayBuffer),再用“视角”去解释这段内存里的 字节。
创建和分配 ArrayBuffer
-
const buf = new ArrayBuffer(1024);—— 创建 1KB 的空缓冲区 -
const buf = new ArrayBuffer(8);—— 适合存两个 32 位整数(每个占 4 字节) - 注意:
ArrayBuffer一旦创建,长度不可变;如需扩容,得新建并手动复制
用类型化数组(TypedArray)读写数据
这是最常用的方式,适合处理同类型、等间隔的数据,比如图像像素、音频采样:
-
const view = new Uint8Array(buf);—— 把缓冲区当 8 位无符号整数数组用 -
view[0] = 255; view[1] = 0; view[2] = 128;—— 直接赋值,自动写入对应字节 -
const ints = new Int32Array(buf); ints[0] = -1;—— 写一个 32 位有符号整数(占 4 字节) - ⚠️ 注意:不同视图共享同一段内存,改一个会影响另一个(例如改
Uint8Array[0]可能影响Int32Array[0]的低字节)
用 DataView 精确控制字节序和偏移
当你需要混合类型、指定起始位置、或明确大小端时,DataView 更灵活:
立即学习“Java 免费学习笔记(深入)”;
const dv = new DataView(buf);-
dv.setUint8(0, 42);—— 从第 0 字节写一个 uint8 -
dv.setInt32(4, 123456, true);—— 从第 4 字节写一个 32 位整数,true 表示小端序 -
const val = dv.getFloat64(8, false);—— 从第 8 字节读一个大端双精度浮点数 - 优点:可跨类型、可重叠、可控制 endianness;缺点:语法稍长,性能略低于 TypedArray(但通常可忽略)
与实际场景对接:文件、网络、canvas
真实项目中,ArrayBuffer 很少手动构造,多来自外部数据源:
- 读取文件:
file.arrayBuffer()返回 promise - fetch 响应:
response.arrayBuffer()获取二进制响应体 - Canvas 像素:
ctx.getImageData(0,0,w,h).data.buffer是Uint8ClampedArray的缓冲区 - 传输优化:发送前可直接传
ArrayBuffer给websocket.send()或postMessage(),无需转 base64
基本上就这些。关键不是记住所有 API,而是理解「ArrayBuffer 是内存块,视图决定怎么读」这个模型。用熟了,处理图片、音视频、协议解析甚至 WebAssembly 就顺手多了。
以上就是怎样使用