关于javascript:3分钟入门Blob-对象的了解与创建

Blob 对象

Blob，英文全称 binary large object，是指二进制类型大对象。

Blob 对象示意不可变的、相似文件对象的原始数据。即它是相似文件对象的二进制数据，能够像操作 File 对象一样操作 Blob 对象。但话又说回来，File 其实是继承自 Blob。

创立 Blob 对象

Blob 构造函数

new Blob(blobData[, options])

• blobData 参数：必须是一个数组，数组每个元素连接起来形成 Blob 对象的数据。
• 可选参数 options：一个对象，为 Blob 对象配置属性。罕用的是 type 属性，指明多媒体 MIME 类型，默认值为 “”。

const blob = new Blob(['hello'], {type: 'text/html'})
const blob2 = new Blob(['hello'], {type: 'application/pdf'})

// 栗子：var data1 = "a";
var data2 = "b";
var data3 = "<div style='color:red;'>This is a blob</div>";
var data4 = {"name": "abc"};

var blob1 = new Blob([data1]);
var blob2 = new Blob([data1, data2]);
var blob3 = new Blob([data3]);
var blob4 = new Blob([JSON.stringify(data4)]);
var blob5 = new Blob([data4]);
var blob6 = new Blob([data3, data4]);

console.log(blob1);  // Blob {size: 1, type: ""}
console.log(blob2);  // Blob {size: 2, type: ""}
console.log(blob3);  // Blob {size: 44, type: ""}
console.log(blob4);  // Blob {size: 14, type: ""}
console.log(blob5);  // Blob {size: 15, type: ""}
console.log(blob6);  // Blob {size: 59, type: ""}

Blob 对象的 size 属性代表大小，单位是字节。

和 localStorage、sessionStorage 一样，创立 Blob 对象时会先把数据转换成字符串。

JSON.stringify(data4) 的后果是 "{"name":"abc"}"，正好 14 个字节（不包含最里面的引号）。而创立 blob5 的时候，先调用 data4 的 toString() 办法，将对象转换为字符串 "[Object Object]"，正好 15 个字节，blob5 保留的数据实际上是 "[Object Object]"。

因而，无奈将 Symbol 构建为 Blob 对象，因为 Symbol 类型的值无奈转换成字符串。

var s = Symbol();
var symbolBlob = new Blob([s]);

slice() 办法

Blob 对象的 slice 办法返回一个新的 Blob 对象，蕴含源 Blob 对象指定范畴的数据。
该办法与数组的 slice 办法用法相似。contentType 指明这个新的 Blob 对象的 MIME 类型。

Blob.slice([start[, end[, contentType]]])
var data = "abcdef";
var blob1 = new Blob([data]);
var blob2 = blob1.slice(0,3);

console.log(blob1);  // 输入：Blob {size: 6, type: ""}
console.log(blob2);  // 输入：Blob {size: 3, type: ""}