DataView視圖

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

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

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

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

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

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

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

//將字符串轉(zhuǎn)換成 Blob對(duì)象 var blob = new Blob(['中文字符串'], {type: 'text/plain' }); //將Blob 對(duì)象轉(zhuǎn)換成 ArrayBuffer var reader = new FileReader(); reader.readAsArrayBuffer(blob); reader.onload = function (e) {console.info(reader.result); //ArrayBuffer {}//經(jīng)常會(huì)遇到的異常 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個(gè)字節(jié)，返回一個(gè)8位整數(shù)。
• getUint8：讀取1個(gè)字節(jié)，返回一個(gè)無(wú)符號(hào)的8位整數(shù)。
• getInt16：讀取2個(gè)字節(jié)，返回一個(gè)16位整數(shù)。
• getUint16：讀取2個(gè)字節(jié)，返回一個(gè)無(wú)符號(hào)的16位整數(shù)。
• getInt32：讀取4個(gè)字節(jié)，返回一個(gè)32位整數(shù)。
• getUint32：讀取4個(gè)字節(jié)，返回一個(gè)無(wú)符號(hào)的32位整數(shù)。
• getFloat32：讀取4個(gè)字節(jié)，返回一個(gè)32位浮點(diǎn)數(shù)。
• getFloat64：讀取8個(gè)字節(jié)，返回一個(gè)64位浮點(diǎn)數(shù)。

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

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

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

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

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

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

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

這一系列set方法，接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是字節(jié)序號(hào)，表示從哪個(gè)字節(jié)開(kāi)始寫(xiě)入，第二個(gè)參數(shù)為寫(xiě)入的數(shù)據(jù)。對(duì)于那些寫(xiě)入兩個(gè)或兩個(gè)以上字節(jié)的方法，需要指定第三個(gè)參數(shù)，false或者undefined表示使用大端字節(jié)序?qū)懭?#xff0c;true表示使用小端字節(jié)序?qū)懭搿?/p> // 在第1個(gè)字節(jié)，以大端字節(jié)序?qū)懭胫禐?5的32位整數(shù) dv.setInt32(0, 25, false); // 在第5個(gè)字節(jié)，以大端字節(jié)序?qū)懭胫禐?5的32位整數(shù) dv.setInt32(4, 25); // 在第9個(gè)字節(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的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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