了解DataView物件及其使用方法

DataView是一個對ArrayBuffer的視圖,類似於Typed Arrays,但是在這種情況下,數組中的項目可以具有不同的大小和類型。

以下是一個例子:

const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)

因為這是對緩衝區的視圖,我們可以指定從哪個字節開始,以及長度:

const view = new DataView(buffer, 10) //從第10個字節開始
const view = new DataView(buffer, 10, 30) //從第10個字節開始,添加30個項目

如果不添加這些附加參數,則該視圖從位置0開始,並加載緩衝區中的所有字節。

我們可以使用一組方法將數據添加到緩衝區中:

  • setInt8()
  • setInt16()
  • setInt32()
  • setUint8()
  • setUint16()
  • setUint32()
  • setFloat32()
  • setFloat64()

這是如何調用其中一個方法的示例:

const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
view.setInt16(0, 2019)

默認情況下,數據使用big endian表示。您可以通過添加第三個帶有true值的參數來覆蓋此設置並使用little endian:

const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
view.setInt16(0, 2019, true)

以下是如何從視圖中獲取數據:

  • getInt8()
  • getInt16()
  • getInt32()
  • getUint8()
  • getUint16()
  • getUint32()
  • getFloat32()
  • getFloat64()

示例:

const buffer = new ArrayBuffer(64)
const view = new DataView(buffer)
view.setInt16(0, 2019)
view.getInt16(0) //2019

由於DataView是一個ArrayBufferView,我們有以下3個只讀屬性:

  • buffer 指向原始的ArrayBuffer
  • byteOffset 是該緩衝區的偏移量
  • byteLength 是其內容的字節長度

需要注意的一點是,Typed Array不允許我們控制字節順序:它使用系統的字節順序。一般情況下,這正常工作,因為主要用例就是在本地使用該數組,使用多媒體API之一。

如果在另一個系統上傳輸Typed Array的數據,且數據使用Big Endian,而您使用Little Endian,則數據可能編碼不正確。如果您需要此類控制,DataView是一個完美的選擇。