聊聊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端輸出

我叫彭湖灣，請叫我胖灣