Blob File ArrayBuffer TypedArray Int32Array等的區別

本系列文章是本人學習相關知識時所積累的筆記，以記錄自己的學習歷程，也爲了方便回顧知識；故文章內容較爲隨意簡練，抱着學習目的來的同學務必轉移他處，以免我誤人子弟~

參考資料
mdn: blob
ArrayBuffer和TypedArray，以及Blob的使用
簡書：JavaScript(ES6) - ArrayBuffer

Blob

Blob是 Web Api，即是隻有瀏覽器才實現。若在nodejs環境中，則沒有此對象

// app.js
let blob = new Blob([])

$ node app.js
  ReferenceError: Blob is not defined

同理，FormData 也是Web Api，因此在nodejs中也是同樣的錯誤-FormData is not defined
blob是一個不變的、包含原始數據的類文件對象，input[type=file]獲取的File對象就是基於 Blob接口；

提取 Blob 的數據

Blob --> ArrayBuffer

ArrayBuffer是 web api ，在nodejs中 Buffer 與之類似

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
   let arrayBuffer = reader.result;
});
reader.readAsArrayBuffer(blob);

Blob ArrayBuffer TypedArray 間的相互轉換

let arraybuffer = new ArrayBuffer(32)
let intArray = new Int8Array(arraybuffer)
intArray[0] = 97
let blob = new Blob([intArray], {type: "application/octet-binary"});
let fr = new FileReader();
fr.addEventListener("load", function(e) {
    let arrayBuffer = e.target.result;
    let intArray = new Int8Array(arrayBuffer);
    console.log(intArray);
});
//把blob文件轉化爲arraybuffer；
fr.readAsArrayBuffer(blob)

ArrayBuffer

ArrayBuffer對象代表儲存二進制數據的一段內存，它不能直接讀寫，只能通過視圖（TypedArray視圖和DataView視圖)來讀寫，視圖的作用是以指定格式解讀二進制數據。

ArrayBuffer有兩種視圖，一種是TypedArray視圖，另一種是DataView視圖。前者的數組成員都是同一個數據類型，後者的數組成員可以是不同的數據類型。