JavaScriptArrayBuffer基础与二进制处理方法

大家好，我们又见面了啊~本文《JavaScript ArrayBuffer简介及二进制操作方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

ArrayBuffer 是固定长度的原始二进制内存容器，不可直接读写，需通过 TypedArray 或 DataView 操作；TypedArray 适合同类型数值序列，DataView 适合混合类型、非对齐或需控制端序的场景。

ArrayBuffer 是一段固定长度的原始二进制内存

ArrayBuffer 本身不提供读写能力，它只是底层内存的“容器”。你不能直接用 arrayBuffer[0] 访问字节，也不能调用 .push() 或 .length（它只有 .byteLength）。真正操作数据靠的是视图（TypedArray 或 DataView）。

常见误用是把 ArrayBuffer 当成普通数组：比如试图用 for...of 遍历、或传给 JSON.stringify —— 这些都会失败或返回空对象。

• 创建：

  const buf = new ArrayBuffer(8); // 分配 8 字节

• 必须配合视图使用：

  const view = new Uint8Array(buf); // 现在可以读写了

• 注意：buf 和 view 共享同一段内存，改 view[0] 就等于改了 buf 的第 0 字节

用 TypedArray 快速处理同类型数值序列

当你有一串整数或浮点数要存为二进制（比如音频采样、图像像素），Uint8Array、Int16Array、Float32Array 是最常用的选择。它们自动按类型对齐、做边界检查，并且支持数组方法如 .map()、.slice()（返回新视图，不拷贝底层 ArrayBuffer）。

关键点是：类型决定每个元素占多少字节，也决定如何解释内存。例如 new Int16Array(buf) 把每 2 字节当一个有符号 16 位整数；若用错类型（比如用 Uint8Array 读原本是 Float32Array 写入的数据），结果完全不可预测。

• 初始化时可传长度（分配新 ArrayBuffer）：

  const arr = new Uint8Array(4); // [0, 0, 0, 0]

• 也可传已有 ArrayBuffer + offset + length：

  const sub = new Uint8Array(buf, 2, 3); // 从第 2 字节起取 3 字节

• 转换回 ArrayBuffer：arr.buffer（注意不是 arr.byteLength，那是视图长度）

DataView 更适合混合类型或非对齐读写

当你要在一个 buffer 里混着读 uint8、int32、float64，或者需要控制大小端（endianness），就得用 DataView。它不绑定数据类型，所有读写都显式指定类型和偏移量，且默认小端（littleEndian = true 可选）。

典型场景：解析网络协议头、文件格式（如 PNG header）、或与 C 结构体对接。这时候如果硬用 TypedArray，容易因对齐或端序出错 —— 比如 Uint32Array 强制 4 字节对齐，但协议字段可能从第 3 字节开始。

• 必须传 ArrayBuffer 构造：

  const dv = new DataView(buf);

• 读写带偏移和端序：

  dv.setUint32(0, 0x12345678, false); // 大端写入

  console.log(dv.getUint32(0, true)); // 小端读出

• 没有 .length，只有 .byteLength 和 .byteOffset

ArrayBuffer 不能直接 JSON 序列化，也不参与垃圾回收“自动释放”

JSON.stringify(new ArrayBuffer(10)) 返回 {}；JSON.parse() 也无法还原。需要手动转成 Uint8Array 再用 Array.from() 或 .reduce() 转为普通数组，或用 ArrayBuffer.slice()（ES2024+）配合 Blob / base64 传输。

更隐蔽的问题是内存泄漏：只要还有一个 TypedArray 或 DataView 持有对某个 ArrayBuffer 的引用，整个 buffer 就不会被 GC 回收 —— 即使你只用了其中几个字节。大文件处理中，忘记清理视图引用（比如闭包里长期持有 Uint8Array）会导致内存持续增长。

• 安全转 JSON：

  const arr = new Uint8Array(buf);<br>JSON.stringify(Array.from(arr)); // → [0,1,2,...]

• 释放大 buffer：

  arr = null; // 清除视图引用<br>buf = null; // 清除 buffer 引用<br>// 确保无其他引用，GC 才能回收

• 注意：buf.slice(start, end) 返回新 ArrayBuffer，旧的仍存在，需手动置 null

今天关于《JavaScriptArrayBuffer基础与二进制处理方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！