JavaScript操作二进制数据主要依靠ArrayBuffer及其视图(如Uint8Array、DataView)进行内存级精细控制,而Blob用于不可变的类文件二进制数据,适用于网络请求、文件读写和媒体操作;二者定位不同,ArrayBuffer支持同步随机访问,Blob侧重流式处理与浏览器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 集成。
第一步】:将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式,可以查看:(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】:在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】:登录后台,工具箱里恢复数据管理后台是url/sho
立即学习“Java免费学习笔记(深入)”;
-
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 的默认行为)。










