JavaScript操作二进制数据：ArrayBuffer与Blob详解

JavaScript操作二进制数据的核心在于合理选用ArrayBuffer与Blob：前者是内存中可精细控制字节的底层缓冲区，支持同步随机读写，适用于加密、图像处理等算法密集型任务；后者是不可变的类文件数据对象，专为网络请求、文件I/O和媒体操作设计，强调流式处理与浏览器API无缝集成；二者定位互补、可高效转换，掌握其差异与协作模式，是实现高性能前端二进制处理的关键。

JavaScript 操作二进制数据主要靠 ArrayBuffer 及其视图（如 Uint8Array、DataView），而 Blob 用于处理不可变的、类文件的原始二进制数据，常用于网络请求、文件读写和媒体操作。

ArrayBuffer 是二进制数据的底层容器

ArrayBuffer 是一段固定大小的原始内存空间，不能直接读写，必须通过视图（view）来操作。它本身不存储数据类型信息，只提供字节长度。

• 创建：const buf = new ArrayBuffer(1024); 表示分配 1KB 内存
• 常用视图：
  • new Uint8Array(buf)：按字节读写（0–255）
  • new Int32Array(buf)：按 32 位有符号整数读写（每项占 4 字节）
  • new DataView(buf)：更灵活，可指定字节序和任意偏移读写不同长度的数据
• 注意：ArrayBuffer 不可扩容，也不可直接转字符串；需用 TextEncoder/TextDecoder 处理文本编码

Blob 适合处理大块、不可变的二进制资源

Blob 表示不可变的、类似文件的原始二进制数据对象，常用于上传下载、Canvas 导出、音视频处理等场景。它不暴露内部字节，而是提供异步访问接口。

• 创建方式多样：
  • 从数组：new Blob([uint8Array], {type: 'application/octet-binary'})
  • 从字符串：new Blob(['hello'], {type: 'text/plain'})
  • 多个片段拼接：new Blob([buf1, buf2, str])
• 读取内容需借助 FileReader 或 blob.arrayBuffer()（返回 Promise）
• 常见用途：
  • 生成可下载链接：URL.createObjectURL(blob)
  • 作为 fetch 请求体：fetch('/upload', {method:'POST', body: blob})
  • 加载图像或音频：

ArrayBuffer 和 Blob 的关键区别

二者定位不同：ArrayBuffer 是内存中的可读写二进制“缓冲区”，适合精细控制字节；Blob 是面向 I/O 的“数据包”，强调流式处理与浏览器 API 集成。

• ArrayBuffer 支持同步、随机访问，适合算法处理（如加密、解码、图像像素操作）
• Blob 不可修改，但支持分片（blob.slice()）、延迟加载、自动内存管理，适合大文件或网络传输
• 转换关系：
  • ArrayBuffer → Blob：直接传入构造函数
  • Blob → ArrayBuffer：调用 blob.arrayBuffer()（返回 Promise）

实际协作示例：读取并修改图片文件

比如用户选中一张 PNG 文件，想把前 100 字节清零再保存：

• 用 FileReader 读取为 ArrayBuffer
• 用 Uint8Array 修改字节：new Uint8Array(buf).fill(0, 0, 100)
• 转回 Blob：new Blob([buf], {type: 'image/png'})
• 生成下载链接：URL.createObjectURL(modifiedBlob)

不复杂但容易忽略：ArrayBuffer 共享内存，复制需用 buf.slice() 或 structuredClone()（较新环境支持）；Blob 的 type 是 MIME 类型提示，不影响内容，但会影响后续处理逻辑（如 URL.createObjectURL 的默认行为）。

今天关于《JavaScript操作二进制数据：ArrayBuffer与Blob详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！