聊聊js中的Blob～

在js里面，如果想处理二进制，有很多方式，但是由于我之前的项目中并未涉及到二进制相关的处理，所以一直对这块比较陌生，最近抽出时间好好研究了下，所以准备写文章来记录一下

js里处理二进制的方式比较多，列举如下

• File
• Blob
• FileReader
• ArrayBuffer
• Base64

本篇文章就准备先聊聊 Blob，废话不多说，开搞！

什么是Blob

Blob 全称为 binary large object ，即 二进制大对象，MDN对其描述为：Blob对象表示一个 不可变、包含原始数据 的类文件对象，它的数据可以按 文本或二进制 的格式进行读取

如何使用Blob

我们可以使用Blob构造函数来创建一个Blob的实例：new Blob(array, options),两个参数的含义为：

• array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成，将会被放进 Blob；
• options：可选的，它会指定如下两个属性
  • type：默认值为 “”，表示将会被放入到 blob 中的数组内容的 MIME 类型。
  • endings：默认值为”transparent“，用于指定包含行结束符\n的字符串如何被写入，不常用

当我们拿到Blob的实例后，就可以利用它来处理二进制数据了，通常它有两种使用方式

1. 结合URL.createObjectURL()来使用

const blob = new Blob(["Hello World"], {type: "text/plain"})
const url = URL.createObjectURL(blob)

window.open(url)

通过打开这个链接，可以看到一个显示 Hello World 的网页

2. 分片，使用Blob提供的 slice 方法，可以将Blob进行分片，语法为

   const blob = instanceOfBlob.slice([start [, end [, contentType]]]};

三个参数的含义分别为

• start：设置切片的起点，即切片开始位置。默认值为 0，这意味着切片应该从第一个字节开始
• end：设置切片的结束点，会对该位置之前的数据进行切片，默认值为blob.size
• contentType：设置新 blob 的 MIME 类型，如果省略 type，则默认为 blob 的原始值

下面给个例子

const blob = new Blob(["Hello World"], {type: "text/plain"})
const subBlob = blob.slice(0, 5)

window.open(URL.createObjectURL(subBlob))

通过打开这个链接，可以看到一个显示 Hello 的网页