HTML5 ArrayBufferView之DataView

DataView視圖

如果一段數據包括多種類型（比如服務器傳來的HTTP數據），這時除了建立ArrayBuffer對象的復合視圖以外，還可以通過DataView視圖進行操作。

DataView視圖提供更多操作選項，而且支持設定字節序。本來，在設計目的上，ArrayBuffer對象的各種類型化視圖，是用來向網卡、聲卡之類的本機設備傳送數據，所以使用本機的字節序就可以了；而DataView的設計目的，是用來處理網絡設備傳來的數據，所以大端字節序或小端字節序是可以自行設定的。

DataView本身也是構造函數，接受一個ArrayBuffer對象作為參數，生成視圖。

DataView(ArrayBuffer buffer [, 字節起始位置 [, 長度]]);

下面是一個實例。

var buffer = new ArrayBuffer(24);
var dv = new DataView(buffer);

實例2： 使用DataView還可以避免一些異常

//將字符串轉換成 Blob對象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//將Blob 對象轉換成 ArrayBuffer
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (e) {
    console.info(reader.result); //ArrayBuffer {}
    //經常會遇到的異常 Uncaught RangeError: byte length of Int16Array should be a multiple of 2
    //var buf = new int16array(reader.result);
    //console.info(buf);

    //將 ArrayBufferView  轉換成Blob
    var buf = new DataView(reader.result);
    console.info(buf); //DataView {}
    reader.readAsText(new Blob([buf]), 'utf-8');
    reader.onload = function () {
        console.info(reader.result); //中文字符串
    };
}

DataView視圖提供以下方法讀取內存：

• getInt8：讀取1個字節，返回一個8位整數。
• getUint8：讀取1個字節，返回一個無符號的8位整數。
• getInt16：讀取2個字節，返回一個16位整數。
• getUint16：讀取2個字節，返回一個無符號的16位整數。
• getInt32：讀取4個字節，返回一個32位整數。
• getUint32：讀取4個字節，返回一個無符號的32位整數。
• getFloat32：讀取4個字節，返回一個32位浮點數。
• getFloat64：讀取8個字節，返回一個64位浮點數。

這一系列get方法的參數都是一個字節序號，表示從哪個字節開始讀取。

var buffer = new ArrayBuffer(24);
var dv = new DataView(buffer);

// 從第1個字節讀取一個8位無符號整數
var v1 = dv.getUint8(0);
// 從第2個字節讀取一個16位無符號整數
var v2 = dv.getUint16(1); 
// 從第4個字節讀取一個16位無符號整數
var v3 = dv.getUint16(3);

上面代碼讀取了ArrayBuffer對象的前5個字節，其中有一個8位整數和兩個十六位整數。

如果一次讀取兩個或兩個以上字節，就必須明確數據的存儲方式，到底是小端字節序還是大端字節序。默認情況下，DataView的get方法使用大端字節序解讀數據，如果需要使用小端字節序解讀，必須在get方法的第二個參數指定true。

// 小端字節序
var v1 = dv.getUint16(1, true);
// 大端字節序
var v2 = dv.getUint16(3, false);
// 大端字節序
var v3 = dv.getUint16(3);

DataView視圖提供以下方法寫入內存：

• setInt8：寫入1個字節的8位整數。
• setUint8：寫入1個字節的8位無符號整數。
• setInt16：寫入2個字節的16位整數。
• setUint16：寫入2個字節的16位無符號整數。
• setInt32：寫入4個字節的32位整數。
• setUint32：寫入4個字節的32位無符號整數。
• setFloat32：寫入4個字節的32位浮點數。
• setFloat64：寫入8個字節的64位浮點數。

這一系列set方法，接受兩個參數，第一個參數是字節序號，表示從哪個字節開始寫入，第二個參數為寫入的數據。對於那些寫入兩個或兩個以上字節的方法，需要指定第三個參數，false或者undefined表示使用大端字節序寫入，true表示使用小端字節序寫入。

// 在第1個字節，以大端字節序寫入值為25的32位整數
dv.setInt32(0, 25, false); 
// 在第5個字節，以大端字節序寫入值為25的32位整數
dv.setInt32(4, 25); 
// 在第9個字節，以小端字節序寫入值為2.5的32位浮點數
dv.setFloat32(8, 2.5, true);

如果不確定正在使用的計算機的字節序，可以采用下面的判斷方式。

var littleEndian = (function() {
  var buffer = new ArrayBuffer(2);
  new DataView(buffer).setInt16(0, 256, true);
  return new Int16Array(buffer)[0] === 256;
})();

如果返回true，就是小端字節序；如果返回false，就是大端字節序。

屬性：

DataView.prototype.buffer

 Read onlyThe ArrayBuffer referenced by this view. Fixed at construction time and thus read only.

DataView.prototype.byteLength 

Read onlyThe length (in bytes) of this view from the start of its ArrayBuffer. Fixed at construction time and thus read only.

DataView.prototype.byteOffset 

Read onlyThe offset (in bytes) of this view from the start of its ArrayBuffer. Fixed at construction time and thus read only.

更多類型化數組：http://www.cnblogs.com/tianma3798/p/4294433.html

更多DataView：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView