[HTML5] ArrayBuffer與類型化數組

寫在前面

這是關於JS二進制操做的第三篇博客，前兩篇詳見：
[HTML5] Blob對象
[HTML5] FileReader對象
此前從宏觀角度介紹瞭如何經過JS建立一個二進制對象，並介紹瞭如何將本地二進制內容讀取至內存。本篇將介紹如何在內存中操做二進制數據。

JS與二進制數據

現代計算機中操做二進制數據的基本單位是字節（byte），故二進制數據通常以字節數組的形式存在於程序中。如：Java中的InputStream於OutputStream類，容許經過指定大小的字節數組（如：byte[] bytes = new byte[1024]）對文件進行讀寫。
然而回到JS，其設計之初也沒有想過要處理二進制，故對於字節的概念並不清晰。再加上JS對數據類型的弱化，即便要表示字節數組，也只能經過普通數組的方式表示。
HTML5的創建對前端而言是顛覆性的，一方面基於XHR2， 使上傳下載二進制內容成爲可能；另外一方面，WebGL/Canvas等新技術須要JS與顯卡之間進行大量的、實時的數據交換，而其數據通訊的形式必須是二進制。這樣，JS操做二進制成爲了必然。
在JS中，能夠經過ArrayBuffer和類型化數組（Typed Array）在內存中對二進制數據進行操做。

ArrayBuffer

ArrayBuffer是一段連續的長度固定的字節序列，如：經過實例化ArrayBuffer對象在內存中建立一段二進制存儲空間（或叫二進制緩衝區），

// 建立一段字節長度爲8的內存空間
var buffer = new ArrayBuffer(8);
// 獲取字節長度
console.log(buffer.byteLength); // 8

因爲是連續的內存空間，故在其上進行的讀寫操做都會比普通JS Array快不少。
但須要說明的是：ArrayBuffer只是存儲數據的區域，沒法進行讀寫。若想進行訪問，須要藉助類型化數組（Typed Array）
故能夠理解爲：類型化數組是訪問ArrayBuffer中數據的接口

類型化數組

類型化數組（或稱視圖view）是讀寫ArrayBuffer中數據的接口,JS能夠經過8種不一樣的接口建立類型化數組，分別爲：

名稱	描述	字節長度
Int8Array	8位有符號整數	1
Uint8Array	8位無符號整數	1
Int16Array	16位有符號整數	2
Uint16Array	16位無符號整數	2
Int32Array	32位有符號整數	4
Uint32Array	32位無符號整數	4
Float32Array	32位浮點數	4
Float64Array	64位浮點數	8

經過類型化數組能夠對ArrayBuffer中的數據進行讀寫，一段ArrayBuffer上能夠重疊多個類型化數組。

// 建立一段12字節的ArrayBuffer
var b = new ArrayBuffer(12);
// 在b上建立一個視圖v1，視圖中每一個元素類型爲Uint8（佔1字節），開始於字節索引0，結束於ArrayBuffer結尾
var v1 = new Uint8Array(b);
// 在b上建立一個視圖v2，視圖中每一個元素類型爲Uint32（佔4字節），開始於字節索引4，結束於ArrayBuffer結尾
var v2 = new Uint32Array(b,4);
// 在b上建立一個視圖v3，視圖中每一個元素類型爲Uint16（佔2字節），開始於字節索引2，視圖長度爲2，結束於字節索引5
var v3 = new Uint16Array(b,2,2);

下面畫圖說明存儲方式：

如圖可見，一段ArrayBuffer上重疊了三個視圖，能夠經過三種方式訪問ArrayBuffer中的數據
此時作以下測試：
一、經過v1向b中寫入數據
二、經過v一、v二、v3從b中讀取數據

下面簡單說明下各輸出：
首先經過v1爲每一個元素賦值爲十進制1，則ArrayBuffer中每一個元素存儲的二進制爲00000001
經過v2讀取，v2[0]和v2[1]中讀取出的二進制均爲00000001000000010000000100000001，轉換爲十進制即爲16843009
經過v3讀取，v3[0]和v3[1]中讀取出的二進制均爲0000000100000001，轉換爲十進制即爲257
由此咱們能夠概括出ArrayBuffer與類型化數組間的關係：

• ArrayBuffer存儲二進制數據，但只有經過類型化數組才能進行二進制數據的讀寫
• 一段ArrayBuffer上能夠重疊多個不一樣的類型化數組，不一樣類型化數組影響對ArrayBuffer中數據的讀寫方式

總結

本篇主要介紹如何對內存中的二進制內容進行讀寫，並重點介紹了ArrayBuffer及類型化數組的關係。寫這篇的目的也是在於解釋ArrayBuffer中二進制數據存在的形式，但每每咱們操做本地文件時，並不須要關心二進制數據內容是如何排列的，故此處不討論字節序或對齊等問題，之後有機會可能會結合Canvas進行說明。

參考資料

MDN_ArrayBuffer
MDN_TypedArray