JavaScript操作二进制数据的核心是ArrayBuffer(不可读写的原始字节容器)和TypedArray(基于ArrayBuffer的类型化视图,如Uint8Array),配合DataView实现灵活的非对齐、多端序读写。

JavaScript 操作二进制数据的核心是 ArrayBuffer 和 TypedArray,它们不是“类”,而是底层数据容器和视图机制:ArrayBuffer 存储原始字节,TypedArray(如 Uint8Array、Int32Array)提供带类型和内存布局的读写接口。
ArrayBuffer 是一段连续的原始内存
它本身不可读写,只是一个固定大小的字节块,类似 C 里的 malloc 分配的一段内存。创建后不能扩容,也不能直接访问内容。
- 用
new ArrayBuffer(1024)创建一个 1024 字节的缓冲区 - 通过
.byteLength获取字节数,只读 - 常见来源包括
fetch().arrayBuffer()、FileReader.readAsArrayBuffer()、WebAssembly.Memory.buffer
TypedArray 是 ArrayBuffer 的“解读方式”
它不保存数据,只是在 ArrayBuffer 上建立一个有类型、有起始偏移和长度的视图。同一段 ArrayBuffer 可以被多个不同类型的 TypedArray 同时查看。
- 例如:
const buf = new ArrayBuffer(8); const view = new Uint32Array(buf);—— 把前 8 字节按两个无符号 32 位整数解读 - 常用构造器:
Uint8Array(字节)、Int16Array(有符号16位)、Float64Array(双精度浮点)等 - 支持数组常用方法:
.map()、.slice()、.set(),但注意.slice()返回新 TypedArray,不共享 buffer
实际操作二进制数据的典型流程
从加载到解析再到修改,通常三步走:
立即学习“Java免费学习笔记(深入)”;
- 获取 ArrayBuffer(比如通过 fetch 加载一张图片的二进制流)
- 用合适的 TypedArray 建立视图(如用
new Uint8Array(buffer)查看每个字节) - 读取或写入数据(如修改像素值、解析协议头、拼接帧数据)
- 需要传输或存储时,可转为
Blob或用TextEncoder/Decoder处理字符串
别忘了 DataView:更灵活的底层控制
当需要混合类型、非对齐读写(比如前 2 字节是 uint16,接着 3 字节是自定义字段),TypedArray 的固定类型和对齐限制就不够用了。这时用 DataView:
- 基于同一个 ArrayBuffer 创建:
const dv = new DataView(buffer) - 手动指定字节偏移和大小:
dv.getUint32(0, true)(从第 0 字节读 32 位小端整数) - 支持所有基础类型和大小端控制,适合解析二进制协议、文件头(PNG、WAV 等)











