聊聊JS的二进制家族：Blob、ArrayBuffer和Buffer

事实上，前端很少涉及对二进制数据的处理，但即便如此，我们偶尔总能在角落里看见它们的身影。今天我们就来聊一聊前端的二进制家族：Blob、ArrayBuffer和Buffer

事实上，前端很少涉及对二进制数据的处理，但即便如此，我们偶尔总能在角落里看见它们的身影。

今天我们就来聊一聊前端的二进制家族：Blob、ArrayBuffer和Buffer

概述

Blob: 前端的一个专门用于支持文件操作的二进制对象

ArrayBuffer：前端的一个通用的二进制缓冲区，类似数组，但在API和特性上却有诸多不同

Buffer：Node.js提供的一个二进制缓冲区，常用来处理I/O操作 

我们首先来介绍Blob，Blob是用来支持文件操作的。简单的说：在JS中，有两个构造函数 File 和 Blob, 而File继承了所有Blob的属性。

所以在我们看来，File对象可以看作一种特殊的Blob对象。

在前端工程中，我们在哪些操作中可以获得File对象呢？ 请看：

（备注：目前 File API规范的状态为Working Draft）

我们上面说了，File对象是一种特殊的Blob对象，那么它自然就可以直接调用Blob对象的方法。让我们看一看Blob具体有哪些方法，以及能够用它们实现哪些功能

通过window.URL.createObjectURL方法可以把一个blob转化为一个Blob URL，并且用做文件下载或者图片显示的链接。

Blob URL所实现的下载或者显示等功能，仅仅可以在单个浏览器内部进行。而不能在服务器上进行存储，亦或者说它没有在服务器端存储的意义。

下面是一个Blob的例子，可以看到它很短

和冗长的Base64格式的Data URL相比，Blob URL的长度显然不能够存储足够的信息，这也就意味着它只是类似于一个浏览器内部的“引用“。从这个角度看，Blob URL是一个浏览器自行制定的一个伪协议 

我们可以通过window.URL.createObjectURL，接收一个Blob（File）对象，将其转化为Blob URL,然后赋给 a.download属性，然后在页面上点击这个链接就可以实现下载了

备注：download属性不兼容IE, 对IE可通过window.navigator.msSaveBlob方法或其他进行优化(IE10/11)

运行结果

window.URL.createObjectURL生成的Blob URL还可以赋给img.src，从而实现图片的显示

通过Blob.slice(start,end)可以分割大Blob为多个小Blob

xhr.send是可以直接发送Blob对象的

前端

Node端

文件内容

如果想要读取Blob或者文件对象并转化为其他格式的数据，可以借助FileReader对象的API进行操作

FileReader.readAsText(Blob)：将Blob转化为文本字符串

FileReader.readAsArrayBuffer(Blob)： 将Blob转为ArrayBuffer格式数据

FileReader.readAsDataURL(): 将Blob转化为Base64格式的Data URL

下面我们尝试把一个文件的内容通过字符串的方式读取出来

上面介绍了Blob的用法，我们不难发现，Blob是针对文件的，或者可以说它就是一个文件对象，同时呢我们发现Blob欠缺对二进制数据的细节操作能力，比如如果如果要具体修改某一部分的二进制数据，Blob显然就不够用了，而这种细粒度的功能则可以由下面介绍的ArrayBuffer来完成。

让我们用一张图看下ArrayBuffer的大体的功能

同时要说明，ArrayBuffer跟JS的原生数组有很大的区别，如图所示

下面一一进行细节的介绍

通过xhr.responseType = "arraybuffer" 指定响应的数据类型

在onload回调里打印xhr.response

Buffer是Node.js提供的对象，前端没有。 它一般应用于IO操作，例如接收前端请求数据时候，可以通过以下的Buffer的API对接收到的前端数据进行整合

例子如下：

Node端（Koa）

Node端输出

我叫彭湖湾，请叫我胖湾