由來

推薦在這裡閱讀

js操作二進位數據三兄弟

ArrayBuffer對象， TypeArray視圖和DataView視圖

它們都以數組的語法處理二進位數據，所以統稱為二進位數組

::: tip
二進位數組並不是真正的數組，而是類似數組的對象
:::

設計的目的

與WebGL項目有關，WebGL是瀏覽器和顯卡之間的通信介面，

利用二進位數據通信可以大大提升腳本性能

概念

• ArrayBuffer： 原始的二進位數據
• TypeArray： 用於讀寫簡單類型的二進位數據
• DataView： 用於讀寫複雜類型的二進位數據
• TypeArray支持的數據類型

用途

在瀏覽器中

以下幾個AIP用到了二進位數組操作二進位數據

• File API
  • fileReader可以使用readAsArrayBuffer(file)讀取文件
• XMLHttpRequest
  • ajax的返回值可以是ArrayBuffer對象
• Fetch API
  • fetch取回的數據就是ArrayBuffer對象
• Canvas
  js{1} const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const uint8ClampedArray = imageData.data;
  • 上面取到的是 一種針對canvas元素的專有類型Unit8ClampedArray。
  • 這個視圖類型專門針對顏色，把每個位元組解讀為無符號8位整數，只能取值0 - 255
• WebSockets
  • 通過ArrayBuffer 發送或者接收二進位數據

  let socket = new WebSocket('ws://127.0.0.1:8081');
  socket.binaryType = 'arraybuffer';
  // Wait until socket is open
  socket.addEventListener('open', function (event) {
  // Send binary data
  const typedArray = new Uint8Array(4);
  socket.send(typedArray.buffer);
  });
  // Receive binary data
  socket.addEventListener('message', function (event) {
  const arrayBuffer = event.data;
  // ···
  });

ArrayBuffer 的api

/**
 * 生成了一段32位元組的記憶體區域，
 * 每個位元組的預設值都是0
 * 不能直接讀寫
 * 只能通過視圖讀寫
 * @type {ArrayBuffer}
 */
const arrbuffer = new ArrayBuffer(32)

返回所分配的記憶體區域的位元組長度

ArrayBuffer.prototype.byteLength

允許將記憶體區域的一部分複製生成一個新的ArrayBuffer對象

ArrayBuffer.prototype.slice()

用DataView視圖讀取

/**
 * 為ArrayBuffer創建視圖
 * 以便讀取
 * @type {DataView}
 */
const dataView = new DataView(arrbuffer)

/**
 * 以無符號8位整數格式讀取第一個元素
 */
dataView.getUint8(0)  // 0

用TypeArray視圖讀取

上表中每一種數據類型對應一個構造函數

返回整段記憶體區域對應的ArrayBuffer對象，只讀

TypeArray.prototype.buffer

返回TypeArray數組占據的記憶體長度，單位位位元組， 只讀

TypeArray.prototype.byteLength

用於整段的複製，複製a的內容到b

// TypeArray.prototype.set()
const a  = new Uint8Array(8);
const b = new Uint8Array(8);
b.set(a);

:::tip
普通數組的操作方法和屬性對TypeArray 數組完全適用
:::