JavaScript中的Blob与ArrayBuffer详解

1. 基本概念
Blob（Binary Large Object）和ArrayBuffer是JavaScript中处理二进制数据的两个核心对象。

• Blob：表示不可变的原始数据类文件对象，常用于处理文件（如图片、音频等）。
• ArrayBuffer：表示通用的、固定长度的原始二进制数据缓冲区，不能直接操作，需通过视图（如TypedArray或DataView）访问。

2. Blob的创建与使用
创建Blob：通过构造函数传入数组和数据选项：

const blob = new Blob(["Hello, World"], { type: "text/plain" });  

• 第一个参数是数组，可包含字符串、ArrayBuffer等。
• 第二个参数是可选配置，如type指定MIME类型（默认""）。

应用场景：

• 生成文件下载链接：

const url = URL.createObjectURL(blob);  
const a = document.createElement("a");  
a.href = url;  
a.download = "example.txt";  
a.click();  
URL.revokeObjectURL(url); // 释放内存  

• 通过FileReader读取Blob内容：

const reader = new FileReader();  
reader.onload = () => console.log(reader.result);  
reader.readAsText(blob); // 结果转为文本  

3. ArrayBuffer的创建与视图
创建ArrayBuffer：

const buffer = new ArrayBuffer(16); // 创建16字节的缓冲区  

通过视图操作数据：

• TypedArray（如Uint8Array）：

const uint8View = new Uint8Array(buffer);  
uint8View[0] = 255; // 写入数据  

• DataView（更灵活，可指定字节序）：

const dataView = new DataView(buffer);  
dataView.setInt16(0, 1000, true); // 小端序写入16位整数  

4. Blob与ArrayBuffer的转换
Blob转ArrayBuffer：

blob.arrayBuffer().then(buffer => {  
  const view = new Uint8Array(buffer);  
  console.log(view);  
});  

ArrayBuffer转Blob：

const newBlob = new Blob([buffer], { type: "application/octet-stream" });  

5. 实际应用场景

• 文件切片上传：将文件分割为Blob片段，分步上传。
• 图像处理：通过Canvas获取图像数据的ArrayBuffer，进行像素级操作。
• WebSocket传输二进制数据：直接发送ArrayBuffer或Blob。

6. 关键区别

• Blob：侧重“类文件”操作，适用于I/O场景（如上传/下载）。
• ArrayBuffer：侧重内存中的原始数据操作，需通过视图读写。

7. 性能与注意事项

• 大型Blob会占用内存，需用URL.revokeObjectURL()及时释放。
• ArrayBuffer是底层存储，TypedArray/DataView是操作接口。
• 现代浏览器支持Blob.arrayBuffer()等便捷方法，替代部分FileReader用法。

通过掌握Blob和ArrayBuffer，可高效处理二进制数据，满足文件操作、媒体处理等高级需求。