Blob ArrayBuffer 和 BinaryString StringView

Blob & File

Blob:Binary large Object,二进制大对象。
不可变的原始数据的类似文件的对象, 可以读取为文本或二进制数据, 也可以转换为ReadableStream然后使用其方法来处理数据。

Blob => ArrayBuffer

Blob对象有一个异步的arrayBuffer(): Promise<ArrayBuffer>方法.

Blob => String

new Blob([str], { type : 'text/plain' });

Blob => ObjectURL

let blob = new Blob(['你好', 123], { type : 'text/plain' });
URL.createObjectURL(blob);

Blob => DataURL

使用FileReader#readAsDataURL(blob):

                let reader = new FileReader();
                reader.addEventListener('loadend', event => {
                    a.href = event.target.result;
                    console.log(a.href); // Data URLs
                    // 这里是异步的, 所以要重复操作
                    a.download = '文件.ext'; // 8位位组八位字节流可以自定义文件后缀
                    a.click(); // 遗憾的是, 无法感知文件下载完成事件, 从而无法主动revoke释放Blob对象创建的ObjectURL
                });
                let blob = new Blob([text], { type: 'application/octet-stream' });
                reader.readAsDataURL(blob);

DataURL => Blob => ObjectURL

            let data = `data: application/octet-stream; base64,${base64}`;
            let blob = await (await fetch(data)).blob(); // 还可以arrayBuffer()
            let url = URL.createObjectURL(blob);
            this.setState({ objectURL: url });

ArrayBuffer

Blob => ArrayBuffer

async function (blob: Blob): ArrayBuffer {
  let buffer = await blob.arrayBuffer();
  return buffer;
}

StringView

StringView是一种填充物, 很明显,有时候JavaScript代码需要快速并轻松处理原始二进制数据。
过去,必须通过将原始数据视为字符串并使用该charCodeAt()方法从数据缓冲区读取字节来模拟这种情况。
现在则可以使用StringView填充, StringView 效率比 BinaryString 效率高.

原文地址:https://www.cnblogs.com/develon/p/13975531.html