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 ...

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

轉換成普通的數組

在處理完一個類型化的數組以後，有時咱們想把它轉化爲一個普通的數組，由於這樣可使用數組原型提供的方便的方法。

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 之外都支持.