`File`、`Blob`、`ArrayBuffer`、`Buffer`联系及区别

首先我们来看下前端历程

1. 最开始我们看网页时，比如200x年前，我们对网页的需求不高，显示点文字，显示点图片就很满足了，所以对于浏览器而言其操作的数据其实并不多（比如读取本地图片显示出来，或上传图片到服务器），那么浏览器这时就需要一个对象（我们知道js里一切皆为对象）来表示图片信息，我们知道图片是一个文件(文件存在电脑上，其实就是一坨二进制数字),所以就有了Blob(Binary Large Object),二进制大对象(先这么翻译吧)，由此可见(小到字符串，大到文件都可以用这个二精致大对象来表示)，而File就是Blob对文件实现的一种(可以先这么理解，实际上File是基于Blob做了很多扩展)

2. 大约2010年左右Nodejs(应该是2009发布的)面向市场，受到了大量开发者的追捧，而在Node里就内置了Buffer(二进制缓冲区)这个类，在此之JS语言中没有用于读取或操作二进制数据流的机制

   • 问：那么什么是二进制缓存区，为啥需要操作二进制数据流机制呢？
   • 答：首先我们知道电脑硬件只认识0101010101这样的二进制，所以我们硬盘里存放的图片，视频，文档等等文件其实都是01010101这样的二进制数字，常规而言，我们编辑文件，是要将二进制数据转换成我们人类能懂得形式编辑的，比如hello，其对应的二进制为0110100001100101011011000110110001101111，如果我要将hello改成helloww，让我们直接去改二进制，那肯定不可能(如果有这样的大神，那就当我没说)，通常是我们用文档编辑器，帮我将二进制转换为我们能懂得字母，然后我们编辑字母，保存时，编辑器再将它保存回二进制字符串。(上面举例的只是说文档编辑器改字符串，还有比如PS该图片，quickTime改视频都一样是这个原理)，说了这就么多，其实最主要的就是为了便于这最后这个概念的理解：二进制缓存区就是在编辑器里，不让编辑器做转换工作，而是直接从内存读取这些二进制数据，然后使用Buffer类提供的方法来间接操作这些二进制数据。为啥需要这么做，恩...，一切都是为了用户性能体现，比如html里使用canvas画图，要是一直转换来转换去，那对电脑的性能可想而知，更何况这里还涉及到显卡等硬件设备，所以直接js里操作二进制文件，性能会有飞质提升

3. 故事继续：随着前端的疯狂式发展(前端技术发展是在是太快了) 以及HTML5的普及，对JS的需求也越来越苛刻(JS的技术发展要照顾到那么多浏览器厂家的发展，说实话每一次版本的革新，说苛刻一点都不过分，它不能像其它编程语言，一个大版本更新，搞得六亲不认(指向下兼容性))，人们发现JS需要操作的数据量已经越来越大，传统的技术已经完全有点更不上时代的发展，然后就有了JS的现代里程碑式版本的出现ES6

   • ES6(ECMA 2015) 将ArrayBuffer对象、TypedArray视图和DataView视图纳入了 ECMAScript 规格，并且增加了新的方法。
   • ArrayBuffer便是新增的二进制缓冲区,而与Node的Buffer不同的是它并没有提供操作方法，而操作是由TypedArray视图或DataView视图来实现的
   • 这一块的具体讲解，可以参看阮一峰老师的ArrayBuffer

最后总结一下区别

• Blob是一种二进制对象(包括字符，文件等等)，es6对其进行了补充
• File是基于Blob的一种二进制文件对象,扩展了Blob，es6同样进行了补充
• ArrayBuffer是ES6新引入的二进制缓冲区
• Buffer是Nodejs内置的二进制缓冲区，Buffer相当于ES6中Uint8Array(属于TypedArray)的一种扩展

备注：

• Buffer参看文献Node-buffer
• ArrayBuffer参看文献阮一峰--ArrayBuffer