JavaScript 型別陣列

為了追求最大的可朔性與效率，JavaScript 型別陣列的實作分為緩衝與視圖。一個緩衝（以類別 ArrayBuffer 實作）為代表一塊資料資料的物件，它沒有任何格式，也沒有任何存取其內容的機制。想存取一個緩衝所佔的記憶體必須用一個視圖。一個視圖提供了一種前後關係 — 資料型別、起始偏移與元素的數目 — 使得資料變成真實的型別陣列。視圖以類別 ArrayBufferView 與其子類別實作。

ArrayBuffer 是一種資料型態，用於表示通用的固定長度二進制資料緩衝區。 你不能直接操作 ArrayBuffer 的內容。但是，你可以建立一個型別陣列視圖 (typed array view) 或一個 DataView (en-US)，它以特定格式代表緩衝區，並使用它讀取和寫入緩衝區的內容。

型別陣列視圖具有自述性名稱，並為所有常用的數字類型（如 Int8, Uint32, Float64 等）提供視圖。 有一個特殊的型別陣列視圖 Uint8ClampedArray。 它的範圍值在 0 到 255 之間。它對於 Canvas 的資料處理非常有用。

The DataView (en-US) is a low-level interface that provides a getter/setter API to read and write arbitrary data to the buffer. This is useful when dealing with different types of data, for example. Typed array views are in the native byte-order (see Endianness (en-US)) of your platform. With a DataView you are able to control the byte-order. It is big-endian by default and can be set to little-endian in the getter/setter methods.

FileReader.prototype.readAsArrayBuffer()

The FileReader.prototype.readAsArrayBuffer() method starts reading the contents of the specified Blob or File.

XMLHttpRequest.prototype.send()

XMLHttpRequest instances' send() method now supports typed arrays and ArrayBuffer objects as argument.

ImageData.data (en-US)

Is a Uint8ClampedArray (en-US) representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 inclusive.

先來建立一個 16 位元組的緩衝：

var buffer = new ArrayBuffer(16);

在這個時候，我們有位元組全部初始為 0 的一塊記憶體，但是用它做不了什麼事。我們只能確認它的確是 16 的位元組的長度：

if (buffer.byteLength === 16) {
  console.log("沒錯，是 16 個位元組。");
} else {
  console.log("糟糕，長度不對！");
}

要用這個緩衝搞點花樣之前，建立一個視圖是必需的。來建立一個視圖把這個緩衝當作 32 位元的有符號整數：

var int32View = new Int32Array(buffer);

這樣就可以把它當作一般的陣列以存取欄位：

for (var i = 0; i < int32View.length; i++) {
  int32View[i] = i * 2;
}

這會把此陣列的四個欄位以 0、2、4、6 填滿（四個 4 位元組，總共 16 位元組）。

考慮在同一份資料上建立多個視圖的有趣情形。舉例來說，繼續使用上面的代碼：

var int16View = new Int16Array(buffer);

for (var i = 0; i < int16View.length; i++) {
  console.log("Entry " + i + ": " + int16View[i]);
}

雖然該緩衝上已有一個 32 位元的視圖，這裡建立了同一個緩衝上的 16 位元整數視圖，這裡的輸出為 0, 0, 2, 0, 4, 0, 6, 0。

繼續考慮這種情況：

int16View[0] = 32;
console.log("現在32位元陣列的欄位0是" + int32View[0]);

輸出為"現在 32 位元陣列的欄位 0 是 32"。也就是，這兩個陣列真的是同一個資料緩衝的在不同格式下的看法。其他 view types 也是同樣的情形。

在單一個緩衝使用不同型別、不同起始偏移的多個視圖以操作資料物件含有的多個資料型別。這個方法可以用在使用 WebGL 、資料檔案、js-ctypes 時遇到的複雜的資料結構。

考慮這個 C 結構：

struct someStruct {
  unsigned long id;
  char username[16];
  float amountDue;
};

可以用以下方法存取含有這種資料格式的緩衝：

var buffer = new ArrayBuffer(24);

// ... 將資料讀入緩衝 ...

var idView = new Uint32Array(buffer, 0, 1);
var usernameView = new Uint8Array(buffer, 4, 16);
var amountDueView = new Float32Array(buffer, 20, 1);

舉例來說，可以用 amountDueView[0] 存取 amountDue。

After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the Array prototype. This can be done using Array.from, or using the following code where Array.from is unsupported.

var typedArray = new Uint8Array([1, 2, 3, 4]),
  normalArray = Array.prototype.slice.call(typedArray);
normalArray.length === 4;
normalArray.constructor === Array;

• Getting ArrayBuffers or typed arrays from Base64-encoded strings (en-US)
• StringView – a C-like representation of strings based on typed arrays
• Faster Canvas Pixel Manipulation with Typed Arrays
• Typed Arrays: Binary Data in the Browser
• Endianness (en-US)