JavaScript操作二进制数据主要依靠ArrayBuffer及其视图（如Uint8Array、DataView）进行内存级精细控制，而Blob用于不可变的类文件二进制数据，适用于网络请求、文件读写和媒体操作；二者定位不同，ArrayBuffer支持同步随机访问，Blob侧重流式处理与浏览器API集成，可相互转换。
访问，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 集成。
-
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 的默认行为）。
