零、參考資料
- 《圖解 + 實戰》File、Blob、TypedArray、DataView
- JavaScript也有操作二進制的一天：聊ArrayBuffer和Blob
- 聊聊JS的二進制家族：Blob、ArrayBuffer和Buffer
一、定義
- 宏觀：Blob - 表示一個不可變、原始數據的類文件對象，可讀不可寫
- 微觀：ArrayBuffer - 表示通用的原始二進制數據緩衝區，可讀不可寫
二、Blob
這個對象被設計出來就是爲了方便進行文件的操作，所以看定義，是一個"原始數據"、"類文件"對象。
Blob 對象"不可變"，其中的數據可以按照文本或者二進制格式進行讀取；但是我們可以轉換成 ReadableStream 去進行數據操作(進行操作的對象和原對象基本沒啥關係了)。
Blob 對象一個重要的 slice 方法，其作用是將一個大 Blob 分割爲多個小 Blob，這也是 FE 能實現分段上傳文件的核心 API。
File 對象則是一個特殊的 Blob 對象，是基於用戶的操作系統拓展的 Blob，使用戶可以通過瀏覽器安全的訪問系統的本地文件。
三、ArrayBuffer、TypedArray 和 DataView
（一）由來
爲了充分利用 3D 圖形 API 和 GPU 加速在 canvas 上渲染複雜圖形，出現了WebGL(Web Graphics Library)。但因爲 JavaScript 運行時中的數組並不存在類型，所以當WebGL底層與 JavaScript 之間傳遞數據時，需要爲目標環境分配新數組，並以當前格式迭代，這將花費很多時間。
爲了解決這個問題，則出現了定型數組(TypeArray)。通過定型數組 JavaScript 可以分配、讀取、寫入數組，並直接傳給底層圖形驅動程序，也可直接從底層獲取。
既然定型數組賦予 JavaScript 跟底層進行數據交換的能力，那麼就同樣會出現與其他設備/網絡進行二進制數據的交流，應對更復雜的場景，DataView 也應運而生。
他們以數組的語法處理二進制數據，所以統稱爲二進制數組，TypedArray 和 DataView 可以像C語言一樣通過修改下標的方式直接操作內存
（二）ArrayBuffer
ArrayBuffer對象用來表示通用的、固定長度的原始數據緩衝區，是一個普通的 JavaScript 構造函數，可用於內存中分配特定數量的字節空間。ArrayBuffer 存儲原始的二進制數據，本身是可讀不可寫的，只是一個數據容器，所以纔有了 TypedArray 與 DataView 去完成寫入工作。
const buf = new ArrayBuffer(16) // 在內存中分配16字節 console.log(buf.byteLength) // 16
ArrayBuffer 和 JavaScript 數組在使用上是完全不同的，有三個區別：
- ArrayBuffer 初始化後是固定大小的，並且可讀不可寫；
- 數組裏面可以放數字、字符串、布爾值以及對象和數組等，ArrayBuffer 放0和1組成的二進制數據；
- ArrayBuffer 放在棧中，而 Array 放在堆中；
（三）TypedArray
TypeArray是一個統稱，實際使用的是特定元素類型的類型化數組構造函數：類型化數組 - TypedArray。
常用於音視頻、canvas、錄音，處理網絡中接收到的二進制數據，web work 中的大量數據處理場景。
（四）DataView
專爲文件 I/O 和網絡 I/O 設計，對緩衝數據有高度的控制，但比其他視圖性能差一點。跟 TypeArray 不同，DataView 視圖中允許存在多種類型。
常用於構建二進制文件或格式化文件。
四、總結
（一）Blob 和 ArrayBuffer
- Blob實際上就是針對文件設計出來的對象，而 ArrayBuffer 針對需要傳輸的數據本身；
- Blob主要解決媒體類型（MIME）的問題，ArrayBuffer 解決的是數據類型問題；
- Blob是瀏覽器的api，ArrayBuffer 則是 JavaScript 中的標準，ArrayBuffer 是更底層的API，可以直接操作內存；
（二）二進制數組操作場景
- 與底層顯卡/外部設備進行二進制數據交互
- 利用 SharedArrayBuffer 在不同 worker 間共享內存
- ...
五、其他
（一）FileReader
FileReader 對象允許 Web 應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，就 3 個主要方法，完成 Blob/File 到其他不同數據(二進制/string/base64)的轉換:
- readAsArrayBuffer(blob) -> Blob 轉換成 ArrayBuffer
- readAsDataURL(blob) -> Blob 轉換成 base64
- readAsText(blob) -> Blob 轉換成 string