首先看到Buffer，有寫過NodeJS等後端語言，應該對此比較熟悉，而這邊只先了解一下
它是用來處理跟memory相關的效能議題，而在前端領域上，近來 Canvas、WebGL等開始走紅，也因此效能越來越受重視，
在這類互動應用中會需要與顯卡等系統有大量讀寫及計算，因此如果JS能夠不透過轉譯，直接操作binary data的話，效率肯定大幅提升。

在ES6中納入了包括ArrayBuffer在內的三個操作binary data的接口:

• ArrayBuffer：Buffer，代表一段記憶體區塊，只能讀不能寫，僅能透過 View 操作其內容。
• TypedArray：View，儲存固定型別資料的 Array，例如 Uint8Array（8-bit unsigned integer）、Float64Array（64-bit IEEE floating point number)。
• DataView：View，不限制型別，可自定義從哪個 byte，以什麼型別，用哪種 byte order（endian）存取。

ArrayBuffer

construct

new ArrayBuffer(length)

定義一段固定大小的記憶體區塊，也稱為 byte-array。
主要的功能就是配置實體記憶體來儲存 raw binary data。
如果要操作其內容，僅能透過View(TypedArray , DataView)。

以下有幾種取得ArrayBuffer的方式：

// 配置16 bytes的記憶體區塊
const buf = new ArrayBuffer(16)

console.log(buf.byteLength) // 16
console.log(buf.slice(0, 2).byteLength) // 2

或是透過FileReader API 轉換File物件，得到使用者上傳的檔案數據。

const fileReader = new FileReader()

fileReader.addEventListener('load', e => console.log(e.result))
fileReader.readAsArrayBuffer(blob)

也能像Blob，設定Api response type。

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer"; //也能設為blob

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

引用自MDN

TypedArray

TypedArray其實不是一個api或是類別，而是泛指不同限定型別(typed)的陣列，
且都是用來操作binary data。
目前ES6定義了九種typed array types，詳細可以查看MDN，這邊就不一一介紹。

而幾個需要注意的點：

• TypedArray只保存buffer的reference

var buf = new ArrayBuffer(64)
var int8 = new Uint8Array(buf) // [0....] byteLength = 64
var int16 = new Uint16Array(buf) // [0...] byteLength = 32
// new Uint32Array(buf) => byteLength = 16
// new Float64Array(buf) => byteLength = 8

int8[0] = 42
console.log(int8) // [42,0....]
console.log(int16) // [42,0....]

• TypedArray 有著類似Array的methods，但會修改array長度的methods是沒有實作的如(pop/push...)，畢竟是參考ArrayBuffer而其基本就是定義一個固定長度的記憶體區塊，所以只能讀寫內容但無法改變其長度。
  
• Blob也能接收buffer，來試試下面範例會印出什麼。

var buffer = new ArrayBuffer(2) // 2 bytes
var word = new Uint16Array(buffer)

// 'A'.charCodeAt() === 65
// 'B'.charCodeAt() === 66
var value = (65 << 8) + 66 // 使用位元運算子(<< 左移)並填入
word[0] = value

var blob = new Blob([buffer], {type: 'text/plain'})
var dataUri = window.URL.createObjectURL(blob)
window.open(dataUri)
// 轉換出來'BA'

DataView

先來看看範例:

var buffer = new ArrayBuffer(2);
new DataView(buffer).setInt16(0, 256, true /* littleEndian */);
// Int16Array uses the platform's endianness.
console.log(new Int16Array(buffer)[0] === 256)

跟TypedArray不同的是，建構時不會固定其資料型別，只有當需要存取時透過getter/setter的方式，指定data type以及從哪個byte offset開始取出資料。

除此之外，另一個重點就是上面setter 函式後面多帶的一個boolean參數及標註的littleEndian，就是所謂的Endianness，主要會牽扯到與系統層面相關的讀寫效能，這邊就不深入研究。

這邊試試同上TypedArray的範例，看看有什麼不同～

var buffer = new ArrayBuffer(2) // array buffer for two bytes
var view = new DataView(buffer)

// 'A'.charCodeAt() === 65
// 'B'.charCodeAt() === 66
var value = (65 << 8) + 66 // 使用位元運算子(<< 左移)並填入
view.setUint16(0, value)

var blob = new Blob([buffer], {type: 'text/plain'})
var dataUri = window.URL.createObjectURL(blob)
window.open(dataUri)
// 轉換出來'AB'

從結果就能看出其中DataView與TypedArray的Endianness方式不同，
引用網路上資源解釋:

• The TypedArray will use the native endianness of the system.
• The DataView will default to big endian.

也因為這個差異，可以了解到，DataView因為能夠彈性指定 endian ，其在接收或是發送 Binary data 的應用場景上會比TypedArray安全許多，如通過 XMLHttpRequest, FileReader, 或是 任何 input/output API來交換資料的應用下，相對的，TypedArray因為 endian 預設是根據當下系統CUP的設定，在同個系統下的應用會比較適合，如Canvas或WebGL等與系統有著大量讀寫的互動應用。

支援度

• Can I Use - ArrayBuffer

• Can I Use - TypedArray

• Can I Use - DataView

總結

本章了解到：

• JavaScript中如何透過ArrayBuffer/TypedArray/DataView來操作Binary Data
• ArrayBuffer：
  • Buffer，代表一段記憶體區塊，只能讀不能寫，僅能透過 View 操作其內容。
  • 跟blob相同，在request中能夠指定responseType回傳arraybuffer型別。
• TypedArray：
  • View，儲存固定型別資料的 Array，例如 Uint8Array（8-bit unsigned integer）、Float64Array（64-bit IEEE floating point number)。
  • 共九種typed array
  • 適合在Canvas或WebGL的應用上用來創建與操作Binary data。
• DataView：
  • View，不限制型別，可自定義從哪個 byte，以什麼型別，用哪種 byte order（endian）存取。
  • 適合需要安全處理Binary data的情境，如從server接收或是發送到其他系統的應用。

額外:

如要更深入了解，記憶體操作，以下相關知識就一定要去瞭解看看：

• Endianness
• Data Structure Alignment

參考

• MDN - ArrayBuffer
• MDN - Endianness
• 使用 JavaScript 處理二進位資料
• ES6 ArrayBuffer - 阮一峰

新手入門，如有錯誤，歡迎指正～～～

系列文章同步更新於部落格