JS - 二进制数据 Blob, ArrayBuffer与Buffer

Blob, Buffer, ArrayBuffer都是JS中处理二进制数据的对象，常常需要互相转换，本文梳理了这多个对象的用途与关系

> Blob 对象

类文件对象
不可修改
本身含有类型信息(mediatype)
可处理大型二进制文件而无需载入内存

构造函数：new Blob([array], options)

const blob = new Blob([array], { type: [MIME类型] });

string --> Blob

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

json --> string --> Blob

const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj)], {
  type: "application/json",
});

转换

Blob --> string：<Promise> Blob.text()

Blob --> ArrayBuffer：<Promise> blob.arrayBuffer()

Blob --> BlobURL：URL.createObjectURL(blob)

BlobURL 格式：blob:https://[域名]/[BlobID]

Blob --> DataURL(base64)：FileReader

const blob = new Blob([binaryImage], { type: "image/png" });
const reader = new FileReader();
reader.onload = function (e) {
  const imgElement = document.createElement("img");
  imgElement.src = e.target.result;
  document.body.appendChild(imgElement);
};
reader.readAsDataURL(blob);

> ArrayBuffer 对象

内存缓冲区对象
允许修改
本身不含有类型信息
可在内存检测器中查看

构造函数：new ArrayBuffer([字节数])

const arraybuffer = new ArrayBuffer(8);

读取、修改数据：TypeArray

const array = new Uint8Array(arraybuffer);
array[0] = 119;
console.log(array);

转换

ArrayBuffer --> Blob：new Blob(arraybuffer, {type: [MIME 类型]})

> Buffer 对象 (只存在于Node.js 环境)

允许修改
适合网络编程或文件系统操作

构造函数：Buffer.from(data)

• string --> Buffer：Buffer.from(str, "utf8")
• ArrayBuffer --> Buffer：Buffer.from(arrayBuffer[, ByteOffset[, length]])

文件读写中的运用

• <Buffer> fs.readFileSync(path)
• fs.writeFileSync(path, buffer)

转换

<Promise> blob.text()：Buffer --> string

<Promise> blob.arrayBuffer()：Buffer --> ArrayBuffer

> 另：Base64 的编码与解码

注意

string中每个字符只能由一个字节表示，否则报错（如汉字、部分特殊符号）

string --> base64 string <string> btoa(string)

base64 string --> string <string> atob(string)