JavaScript处理文件与二进制数据全解析

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript操作文件与二进制数据详解》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

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 来操作。它们共享同一段内存，改一个，另一个立刻反映变化。

从 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); // 立即释放
}