`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同样进行了补充
  • ArrayBufferES6新引入的二进制缓冲区
  • BufferNodejs内置的二进制缓冲区,Buffer相当于ES6Uint8Array(属于TypedArray)的一种扩展

备注:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,978评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,954评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,623评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,324评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,390评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,741评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,892评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,655评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,104评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,569评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,254评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,834评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,725评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,950评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,260评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,446评论 2 348

推荐阅读更多精彩内容