JavaScript无法直接读写本地文件，而是通过Blob、File、FileReader等API在内存中处理二进制数据；File是带元信息的Blob；读取内容须用FileReader或arrayBuffer；Blob URL需手动释放以防内存泄漏；下载应使用Blob+a.download组合。
JavaScript 本身不能直接读写本地文件系统，所谓“操作文件”实际是通过 Blob、ArrayBuffer、File、FileReader 和 URL.createObjectURL() 等浏览器 API 在内存中处理二进制数据流。关键不在于“怎么存到硬盘”，而在于“怎么拿到、转换、传输、渲染或下载它”。
File 对象本质就是 Blob，但有额外元信息
用户通过 选中的文件，得到的是 File 实例。它继承自 Blob，所以所有 Blob 方法都可用，但多了 name、lastModified、webkitRelativePath 等属性。
常见误区是试图用 JSON.stringify(file) 查看内容——这只会输出空对象，因为 File 的二进制数据不可枚举。真正读取内容必须用 FileReader 或转为 ArrayBuffer。
-
file.size和file.type可直接访问，无需异步 -
file.slice(start, end, contentType)返回新Blob，常用于分片上传 - 不要依赖
file.path：浏览器出于安全限制，该属性始终为空或不可用
ArrayBuffer 是原始二进制内存块，TypedArray 是它的视图
ArrayBuffer 本身不可读写，必须通过 Uint8Array、Int32Array、Float64Array 等 TypedArray 来操作。它们共享同一段内存，改一个，另一个立刻反映变化。
立即学习“Java免费学习笔记（深入）”；
从 Blob 获取 ArrayBuffer 必须异步，因为可能涉及磁盘 I/O：
const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = () => {
const buffer = reader.result; // ArrayBuffer
const view = new Uint8Array(buffer); // 视图，可遍历字节
console.log(view[0], view.length); // 如：71, 1024
};
- 避免重复调用
reader.readAsArrayBuffer()：同一个FileReader实例只能用一次，需新建 - 大文件（>500MB）可能触发内存压力，建议用
stream()+ReadableStream分块读取（Chrome 109+ 支持） -
buffer.byteLength是总字节数；view.length是元素个数（对Uint8Array二者相等，对Uint32Array则是 1/4）
Blob URL 不是真实路径，用完记得 revoke
URL.createObjectURL(blob) 返回一个形如 blob:https://example.com/xxx 的临时 URL，可用于 、fetch() 或下载链接。但它会持续占用内存，直到显式释放。
典型错误是循环创建 Blob URL 却不清理，导致内存泄漏：
let currentUrl = null;
function showImage(file) {
if (currentUrl) URL.revokeObjectURL(currentUrl);
currentUrl = URL.createObjectURL(file);
img.src = currentUrl;
}
- 页面卸载前应调用
URL.revokeObjectURL()清理残留 URL - 服务端返回的
Response.blob()也可生成 URL，但注意 CORS 限制：跨域响应需带Access-Control-Allow-Origin -
Blob构造函数支持拼接多个源：new Blob([arrayBuffer, string, blob], {type: 'image/png'})
下载二进制数据时，a.download + Blob 是最可靠组合
想让用户下载脚本生成的二进制内容（如加密后的 PDF、合成的 ZIP），不能靠 window.open() 或重定向——它们无法控制 MIME 类型和文件名。正确做法是创建 Blob，再用 触发下载：
function downloadBytes(data, filename, mimeType = 'application/octet-stream') {
const blob = new Blob([data], { type: mimeType });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 立即释放
}
-
data可以是ArrayBuffer、TypedArray、String或Blob数组 - 某些旧版 Safari 不支持
a.download下载 Blob URL，需降级为 iframe 导航（极少见） - 服务器返回的
Content-Disposition: attachment头仍比前端方案更稳定，优先走后端
真正难的不是语法，而是判断该用 Blob 还是 ArrayBuffer：要渲染/传输/下载就用 Blob；要逐字节解析、加密、解码、WebAssembly 交互就必须转成 ArrayBuffer + TypedArray。中间多一次 await blob.arrayBuffer() 调用，就多一次内存拷贝——这点在处理视频帧或音频 PCM 数据时，直接影响性能。
