DataView視圖

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

DataView視圖提供更多操作選項(xiàng)，而且支持設(shè)定字節(jié)序。本來，在設(shè)計(jì)目的上，ArrayBuffer對象的各種類型化視圖，是用來向網(wǎng)卡、聲卡之類的本機(jī)設(shè)備傳送數(shù)據(jù)，所以使用本機(jī)的字節(jié)序就可以了；而DataView的設(shè)計(jì)目的，是用來處理網(wǎng)絡(luò)設(shè)備傳來的數(shù)據(jù)，所以大端字節(jié)序或小端字節(jié)序是可以自行設(shè)定的。

DataView本身也是構(gòu)造函數(shù)，接受一個ArrayBuffer對象作為參數(shù)，生成視圖。

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

下面是一個實(shí)例。

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

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

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

DataView視圖提供以下方法讀取內(nèi)存：

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

這一系列g(shù)et方法的參數(shù)都是一個字節(jié)序號，表示從哪個字節(jié)開始讀取。

var buffer = new ArrayBuffer(24); var dv = new DataView(buffer);// 從第1個字節(jié)讀取一個8位無符號整數(shù) var v1 = dv.getUint8(0); // 從第2個字節(jié)讀取一個16位無符號整數(shù) var v2 = dv.getUint16(1); // 從第4個字節(jié)讀取一個16位無符號整數(shù) var v3 = dv.getUint16(3);

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

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

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

DataView視圖提供以下方法寫入內(nèi)存：

• setInt8：寫入1個字節(jié)的8位整數(shù)。
• setUint8：寫入1個字節(jié)的8位無符號整數(shù)。
• setInt16：寫入2個字節(jié)的16位整數(shù)。
• setUint16：寫入2個字節(jié)的16位無符號整數(shù)。
• setInt32：寫入4個字節(jié)的32位整數(shù)。
• setUint32：寫入4個字節(jié)的32位無符號整數(shù)。
• setFloat32：寫入4個字節(jié)的32位浮點(diǎn)數(shù)。
• setFloat64：寫入8個字節(jié)的64位浮點(diǎn)數(shù)。

這一系列set方法，接受兩個參數(shù)，第一個參數(shù)是字節(jié)序號，表示從哪個字節(jié)開始寫入，第二個參數(shù)為寫入的數(shù)據(jù)。對于那些寫入兩個或兩個以上字節(jié)的方法，需要指定第三個參數(shù)，false或者undefined表示使用大端字節(jié)序?qū)懭?#xff0c;true表示使用小端字節(jié)序?qū)懭搿?/p> // 在第1個字節(jié)，以大端字節(jié)序?qū)懭胫禐?5的32位整數(shù) dv.setInt32(0, 25, false); // 在第5個字節(jié)，以大端字節(jié)序?qū)懭胫禐?5的32位整數(shù) dv.setInt32(4, 25); // 在第9個字節(jié)，以小端字節(jié)序?qū)懭胫禐?.5的32位浮點(diǎn)數(shù) dv.setFloat32(8, 2.5, true);

如果不確定正在使用的計(jì)算機(jī)的字節(jié)序，可以采用下面的判斷方式。

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

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

屬性：

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.

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

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

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的HTML5 ArrayBufferView之DataView的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。