JavaScript處理二進制數據：TypedArrays

翻譯自：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays

 

隨 着Web應用的發展，越來越多地需要使用JavaScript來處理視頻、音頻，或者通過WebSocks獲取原始數據。很顯然，我們需要有一種方法能夠 方便快捷地地用JavaScript處理原始二進制數據。過去，我們將原始數據作為字符串來對待，並使用charCodeAt()來從數據緩沖區中讀取字 節。由於需要進行多次轉換，這種方法低效而且容易出錯，特別是當數據格式不是實際上的字節數據時（如32位整數或是浮點數）。

JavaScript的類型化數組(TypedArrays)提供了一個更加高效的機制來訪問和處理二進制數據。

 

TypedArrays構造：緩沖區(Buffer)和視圖(View)

為了達到最大的靈活性和高效性，JavaScript的TypedArray分為兩個部分：緩沖區和視圖。

緩 沖區由ArrayBuffer實現，一個緩沖區是一個代表某個數據塊的對象。它沒有格式，而且沒有提供一個機制來訪問或操縱其中的內容。為了存取緩沖區中 的內容，你需要創建一個視圖。視圖提供了一個環境(context)，包括數據類型、起始偏移量以及元素數量。它把數據轉化為實際上的類型化數組。視圖由 ArrayBufferView和它的一些子類實現。

 

ArrayBufferView的子類：

下面的子類提供了特定的緩沖區視圖，用來處理不同類型的數據。要注意的是，如果要處理的數據類型超過一字節，將使用平台對應的端序。如果需要操作端序，可以使用DataView來代替ArrayBufferView。

Int8Array 、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array 

 

ArrayBufferView的父類：

DataView：DataView提供了一個底層接口來從ArrayBuffer中存取數據

StringView：​StringView提供了一個構建於ArrayBuffer之上的C語言風格的字符串操作接口（比如說字符編碼的數組，類似JavaScript中的ArrayBufferView）

//創建一個16字節的緩沖區，自動初始化為全0
var buffer = new ArrayBuffer(16);

//檢測緩沖區大小
if (buffer.byteLength == 16 ) {
    alert("it's 16 bytes.");
}

//為了能操作這個緩沖區，我們創建一個視圖，將緩沖區中的數據看成32位(4字節)有符號整數數組
var int32View = new Int32Array(buffer);

//現在可以像操作一個數組那樣操作里面的數據了。下面的這個操作會把數組中的四個元素賦值為0,2,4,6
for (var i=0; i<int32View.length; i++) {
    int32View[i] = i*2;
}

//使用多個視圖來操作同一個緩沖區。如果你的機器是小端序(一般都是小端序)，將顯示[ 0, 0, 2, 0, 4, 0, 6, 0 ]。如果是大端序，顯示[0, 0, 0, 2, 0, 4, 0, 6]
var int16View = new Int16Array(buffer);
console.log(int16View)

操作更復雜的數據結構

通過把不同類型、不同起始偏移量的數據組合成單個的緩沖區，我們可以創建和訪問類似C語言結構體的數據。

如下面的結構體

struct someStruct { unsigned long id; char username[16]; float amountDue; };

你可以這樣訪問

var buffer = new ArrayBuffer(24);

// ... read the data into the buffer ...

//Uint16Array Uint16Array(ArrayBuffer buffer, optional unsigned long byteOffset, optional unsigned long length);
//第一個參數是ArrayBuffer，第二個參數是偏移量(以字節計)，第三個參數是數據的長度(以字節計)
var idView = new Uint32Array(buffer, 0, 1);
var usernameView = new Uint8Array(buffer, 4, 16);
var amountDueView = new Float32Array(buffer, 20, 1);

轉換成普通的數組

在處理完一個類型化的數組之后，有時我們想把它轉化為一個普通的數組，因為這樣可以使用數組原型提供的方便的方法。

var typedArray = new Uint8Array( [ 1, 2, 3, 4 ] ),
     normalArray = Array.apply( [], typedArray );
normalArray.length === 4;
normalArray.constructor === Array;

兼容性

Typed arrays 已經在 Webkit 中可用了. Chrome 7 支持 ArrayBuffer, Float32Array, Int16Array, 和 Uint8Array. Chrome 9 和 Firefox 15 添加了 DataView 對象的支持. Internet Explorer 10 除了 Uint8ClampedArray 和 ArrayBuffer.prototype.slice 以外都支持.