ArrayBuffer是二进制数据容器，需通过TypedArray或DataView视图操作；Blob用于封装文件类二进制对象，可与ArrayBuffer互转，适用于文件传输与网络通信。
JavaScript 提供了多种方式来操作二进制数据，特别是在处理文件、网络传输、图像音频处理等场景中，ArrayBuffer 和 Blob 是核心工具。下面介绍它们的基本用法和常见操作。
ArrayBuffer：底层二进制数据容器
ArrayBuffer 表示一段固定长度的二进制数据缓冲区。它本身不能直接读写，需要通过视图（如 Uint8Array、DataView）来访问。
例如创建一个 8 字节的缓冲区并写入数字：
- const buffer = new ArrayBuffer(8);
- const view = new Uint8Array(buffer);
- view[0] = 42; // 写入一个字节
- console.log(view[0]); // 输出: 42
如果需要更灵活地读写不同格式的数据（如整数、浮点数），可以使用 DataView：
立即学习“Java免费学习笔记（深入）”；
- const dataView = new DataView(buffer);
- dataView.setFloat32(0, 3.14); // 在偏移 0 处写入 float
- console.log(dataView.getFloat32(0)); // 输出: 3.14
TypedArray：便捷的类型化数组
TypedArray（如 Uint8Array、Int16Array）是 ArrayBuffer 的常用视图。它们让操作二进制数据更直观。
从字符串转换为二进制数据：
- const encoder = new TextEncoder();
- const uint8Array = encoder.encode("Hello");
- console.log(uint8Array); // Uint8Array [72, 101, 108, 108, 111]
再转回字符串：
- const decoder = new TextDecoder();
- const text = decoder.decode(uint8Array);
- console.log(text); // 输出: Hello
Blob：表示不可变的二进制大对象
Blob 常用于文件操作，可以包含任意类型的二进制数据，比如图片、视频或下载内容。
创建一个文本 Blob：
- const blob = new Blob(["Hello, world!"], { type: "text/plain" });
- console.log(blob.size); // 输出: 13
- console.log(blob.type); // 输出: text/plain
创建一个包含多种数据类型的 Blob（如 JSON）：
- const jsonData = { name: "Alice", age: 25 };
- const jsonBlob = new Blob([JSON.stringify(jsonData)], { type: "application/json" });
ArrayBuffer 与 Blob 的相互转换
在实际开发中，经常需要在这两种格式之间转换。
将 ArrayBuffer 转为 Blob：
- const buffer = new Uint8Array([72, 101, 108, 108, 111]);
- const blob = new Blob([buffer], { type: "text/plain" });
将 Blob 转为 ArrayBuffer：
- blob.arrayBuffer().then(buffer => {
- const arr = new Uint8Array(buffer);
- console.log(arr); // 可以看到原始字节
- });
基本上就这些。掌握 ArrayBuffer、TypedArray 和 Blob 的使用，就能高效处理前端中的大多数二进制任务，比如文件上传、Canvas 图像导出、WebSocket 二进制通信等。关键是理解它们之间的关系：ArrayBuffer 是数据容器，TypedArray 是访问方式，Blob 是用于文件和网络的封装。不复杂但容易忽略细节。
