/

DataView物件

DataView物件

了解DataView物件及其使用方法

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

以下是一個例子：

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

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

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

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

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

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

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

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

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

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

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

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

示例：

1
2
3
4
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是一個完美的選擇。

tags: [“javascript”, “DataView”, “ArrayBuffer”, “Typed Arrays”, “big endian”, “little endian”]