Blob、ArrayBuffer、Buffer

  • Blob：前端专门用于支持文件操作的二进制对象。
  • ArrayBuffer：前端的一个通用的二进制缓冲区，类似数组，但在 API 和特性上不同。
  • Buffer：Node.js 提供的一个二进制缓冲区，用来处理 IO 操作。

Blob

Blob 是用来支持文件操作的。简单来说，在 JS 中有两个构造函数 File 和 Blob，而 File 继承了所有 Blob 的属性。

Blob API

通过 window.URL.createObjectURL 方法可以把一个 Blob 转化为一个 Blob URL，用作文件下载或图片显示的链接。

Blob URL 所实现的下载或者显示等功能，仅可在单个浏览器内部进行，不能在服务器上存储——它没有在服务器端存储的意义。它只是浏览器内部的"引用"，从这个角度看 Blob URL 是浏览器自行制定的一个伪协议。

文件下载

通过 window.URL.createObjectURL 接收一个 Blob（File）对象，将其转化为 Blob URL，然后赋值 a.download 属性，页面上点击这个链接就能下载。

<a id="h">点此进行下载</a>
<script>
  var blob = new Blob(["Hello World"]);
  var url = window.URL.createObjectURL(blob);
  var a = document.getElementById("h");
  a.download = "helloworld.txt";
  a.href = url;
</script>

Blob 文件分片上传

  • 通过 Blob.slice(start, end) 分割大 Blob 为多个小 Blob。
  • xhr.send 可以直接发送 Blob 对象。

本地读取文件内容

借助 FileReader 对象的 API：

  • FileReader.readAsText(Blob)：将 Blob 转化为文本字符串。
  • FileReader.readAsArrayBuffer(Blob)：将 Blob 转为 ArrayBuffer。
  • FileReader.readAsDataURL()：将 Blob 转化为 Base64 格式的 Data URL。
<input type="file" id="f" />;
document.getElementById("f").addEventListener(
  "change",
  function (e) {
    var file = this.files[0];
    const reader = new FileReader();
    reader.onload = function () {
      const content = reader.result;
      console.log(content);
    };
    reader.readAsText(file);
  },
  false
);

ArrayBuffer

ArrayBuffer 是 JavaScript 用来表示一段不可变的原始二进制数据缓冲区的对象。它表示通用、固定长度的原始二进制数据缓冲区，可以通过类型数组对象或 DataView 对象来读写内存原始数据。

获取 ArrayBuffer

const arrayBuffer = await file.arrayBuffer();

通过 TypedArray 对 ArrayBuffer 进行写操作

Uint8Array 到 Uint16Array 转化后的字节是小端序。

// 生成 8 个字节内存空间
const buf = new ArrayBuffer(8);
const int8Array = new Int8Array(buf, 0);
int8Array[3] = 32;
const int16Array = new Int16Array(buf, 0, 4);
int16Array[0] = 42;
console.log(int16Array); // [42, 8192, 0, 0]
console.log(int8Array);  // [42, 0, 0, 32, 0, 0, 0, 0]

通过 DataView 对 ArrayBuffer 进行写操作

new DataView(ArrayBuffer buffer [, 字节起始位置 [, 长度]]);

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
view.setInt8(2, 42);
console.log(view.getInt8(2)); // 42

DataView 可以支持设置字节序：

// 小端字节序
const v1 = dv.getUint16(1, true);
// 大端字节序
const v2 = dv.getUint16(3, false);

Buffer

Buffer 是 Node.js 提供的对象，前端没有。它一般应用于 IO 操作，例如接收前端请求数据时，可以通过 Buffer 的 API 对接收到的前端数据进行整合。

在进行大量数值计算或图像处理时，可以使用 TypedArray 来操作数据以提高性能；在进行网络通信或文件读写时，可以使用 Buffer 来处理二进制数据。

来源整理自：我的有道云笔记