JavaScript中”ArrayBuffer”对象与”Blob”对象到底有什么区别？

1、ArrayBuffer 第一类

ArrayBuffer 第一类则表示几段十进制统计数据，用以演示缓存里头的统计数据。透过那个第一类，JavaScript 能随机存取十进制统计数据。那个第一类能看做缓存统计数据的抒发。

那个第一类是 ES6 才载入国际标准的，一般的页面程式设计用不出它，为的是讲义管理体系的完备，下面只提供更多两个隐晦的如是说，详尽如是说请看《ES6 国际标准进阶》里头的段落。

应用程序原生植物提供更多ArrayBuffer()缺省，用以聚合实例。它拒绝接受两个有理数做为模块，则表示这段十进制统计数据挤占啥个十进制。

var buffer = new ArrayBuffer(8);

下面标识符中，示例第一类buffer挤占8个十进制。

ArrayBuffer 第一类有示例属性byteLength，则表示现阶段示例挤占的缓存长度（单位十进制）。

var buffer = new ArrayBuffer(8);buffer.byteLength // 8

ArrayBuffer 第一类有示例方式slice()，用以复制一部分缓存。它拒绝接受两个有理数模块，分别则表示复制的开始位置（从0开始）和结束位置（复制时不包括结束位置），如果省略第二个模块，则则表示一直复制到结束。

var buf1 = new ArrayBuffer(8);var buf2 = buf1.slice(0);

下面标识符则表示复制原来的示例。

2、Blob 第一类

2.1、简介

Blob 第一类则表示两个十进制文件的统计数据内容，比如两个图片文件的内容就能透过 Blob 第一类随机存取。它通常用以随机存取文件，它的名字是 Binary Large Object （十进制大型第一类）的缩写。它与 ArrayBuffer 的差别在于，它用于操作十进制文件，而 ArrayBuffer 用于操作缓存。

应用程序原生植物提供更多Blob()缺省，用以聚合示例第一类。

new Blob(array [, options])

Blob缺省拒绝接受两个模块。第两个模块是数组，成员是字符串或十进制第一类，则表示新聚合的Blob示例第一类的内容；第二个模块是可选的，是两个配置第一类，目前只有两个特性type，它的值是两个字符串，则表示统计数据的 MIME 类型，默认是空字符串。

var htmlFragment = [<a id=”a”><b id=”b”>hey!</b></a>];var myBlob = new Blob(htmlFragment, {type : text/html});

下面标识符中，示例第一类myBlob包含的是字符串。聚合示例的时候，统计数据类型指定为text/html。

下面是另两个例子，Blob 保存 JSON 统计数据。

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

2.2、示例特性和示例方式

Blob具有两个示例特性size和type，分别返回统计数据的大小和类型。

var htmlFragment = [<a id=”a”><b id=”b”>hey!</b></a>];var myBlob = new Blob(htmlFragment, {type : text/html}); myBlob.size // 32myBlob.type // “text/html”

Blob具有两个示例方式slice，用以拷贝原来的统计数据，返回的也是两个Blob示例。

myBlob.slice(start, end, contentType)

slice方式有三个模块，都是可选的。它们依次是起始的十进制位置（默认为0）、结束的十进制位置（默认为size特性的值，该位置本身将不包含在拷贝的统计数据之中）、新示例的统计数据类型（默认为空字符串）。

文件选择器<input type=”file”>用以让用户选取文件。出于安全考虑，应用程序不允许脚本自行设置那个控件的value特性，即文件必须是用户手动选取的，不能是脚本指定的。一旦用户选好了文件，脚本就能读取那个文件。

文件选择器返回两个 FileList 第一类，该第一类是两个类似数组的成员，每个成员都是两个 File 示例第一类。File 示例第一类是两个特殊的 Blob 示例，增加了name和lastModifiedDate特性。

// HTML 标识符如下// <input type=”file” accept=”image/*” multiple onchange=”fileinfo(this.files)”/>function fileinfo(files) { for (var i = 0; i < files.length; i++) { var f = files[i]; console.log( f.name, // 文件名，不含路径 f.size, // 文件大小，Blob 示例特性 f.type, // 文件类型，Blob 示例特性 f.lastModifiedDate // 文件的最后修改时间 ); }}

除了文件选择器，拖放 API 的dataTransfer.files返回的也是两个FileList 第一类，它的成员因此也是 File 示例第一类。

2.4、下载文件

AJAX 请求时，如果指定responseType特性为blob，下载下来的就是两个 Blob 第一类。

function getBlob(url, callback) { var xhr = new XMLHttpRequest(); xhr.open(GET, url); xhr.responseType = blob; xhr.onload = function () { callback(xhr.response); } xhr.send(null);}

下面标识符中，xhr.response拿到的就是两个 Blob 第一类。

2.5、聚合 URL

应用程序允许使用URL.createObjectURL()方式，针对 Blob 第一类聚合两个临时 URL，以便于某些 API 使用。那个 URL 以blob://开头，表明对应两个 Blob 第一类，协议头后面是两个识别符，用以唯一对应缓存里头的 Blob 第一类。这一点与data://URL（URL 包含实际统计数据）和file://URL（本地文件系统里头的文件）都不一样。

下面标识符透过为拖放的图片文件聚合两个 URL，产生它们的缩略图，从而使得用户能预览选择的文件。

应用程序处理 Blob URL 就跟一般的 URL 一样，如果 Blob 第一类不存在，返回404状态码；如果跨域请求，返回403状态码。Blob URL 只对 GET 请求有效，如果请求成功，返回200状态码。由于 Blob URL 就是一般 URL，因此能下载。

2.6、读取文件

取得 Blob 第一类以后，能透过FileReader第一类，读取 Blob 第一类的内容，即文件内容。

FileReader 第一类提供更多四个方式，处理 Blob 第一类。Blob 第一类做为模块传入这些方式，然后以指定的格式返回。

FileReader.readAsText()：返回文本，需要指定文本编码，默认为 UTF-8。FileReader.readAsArrayBuffer()：返回 ArrayBuffer 第一类。FileReader.readAsDataURL()：返回 Data URL。FileReader.readAsBinaryString()：返回原始的十进制字符串。

下面是FileReader.readAsText()方式的例子，用以读取文本文件。

// HTML 标识符如下// <input type=’file onchange=readfile(this.files[0])></input>// <pre id=output></pre>function readfile(f) { var reader = new FileReader(); reader.readAsText(f); reader.onload = function () { var text = reader.result; var out = document.getElementById(output); out.innerHTML = ; out.appendChild(document.createTextNode(text)); } reader.onerror = function(e) { console.log(Error, e); };}

下面标识符中，透过指定 FileReader 示例第一类的onload监听函数，在示例的result特性上拿到文件内容。

下面是FileReader.readAsArrayBuffer()方式的例子，用于读取十进制文件。

// HTML 标识符如下// <input type=”file” onchange=”typefile(this.files[0])”></input>function typefile(file) { // 文件开头的四个十进制，聚合两个 Blob 第一类 var slice = file.slice(0, 4); var reader = new FileReader(); // 读取这四个十进制 reader.readAsArrayBuffer(slice); reader.onload = function (e) { var buffer = reader.result; // 将这四个十进制的内容，视作两个32位有理数 var view = new DataView(buffer); var magic = view.getUint32(0, false); // 根据文件的前四个十进制，判断它的类型 switch(magic) { case 0x89504E47: file.verified_type = image/png; break; case 0x47494638: file.verified_type = image/gif; break; case 0x25504446: file.verified_type = application/pdf; break; case 0x504b0304: file.verified_type = application/zip; break; } console.log(file.name, file.verified_type); };}