javascript如何操作二进制数据_ArrayBuffer和TypedArray是什么？

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

实际操作二进制数据的典型流程

从加载到解析再到修改，通常三步走：

• 获取 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 等）