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

今天我们就来聊一聊前端的二进制家族：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的例子，可以看到它很短

blob:d3958f5c-0777-0845-9dcf-2cb28783acaf

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

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

<!-- html部分 --> <a id="h">点此进行下载</a> <!-- js部分 --> <script> var blob = new Blob(["Hello World"]); var url = window.URL.createObjectURL(blob); var a = document.getElementById("h"); a.download = "helloworld.txt"; a.href = url; </script>

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

运行结果

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

<!-- html部分 --> <input type="file" id=‘f‘ /> <img id=‘img‘ style="width: 200px;height:200px;" /> <!-- js部分 --> <script> document.getElementById(‘f‘).addEventListener(‘change‘, function (e) { var file = this.files[0]; const img = document.getElementById(‘img‘); const url = window.URL.createObjectURL(file); img.src = url; img.onload = function () { // 释放一个之前通过调用 URL.createObjectURL创建的 URL 对象 window.URL.revokeObjectURL(url); } }, false); </script>

运行结果