We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

翻譯不完整。請協助 翻譯此英文文件

當 Webapp 有了視頻、音頻操作及用 WebSockets 存取原始資料等等的功能而變得越來越強大,讓 JavaScript 代碼可以快速、簡單地操作原始二進制資料的好處就越來越明顯。以前唯一的解法是視原始資料為字串並用 charCodeAt() 方法讀取資料緩衝的位元組。

然而,由於需要多次型別轉換(特別是二進制資料並非以位元組計算,如32位元整數或浮點數),這個解法既慢又容易發生錯誤。

JavaScript 型別陣列提供了存取二進制資料更有效率的機制。

型別陣列不該與一般的陣列搞混,當對型別陣列呼叫Array.isArray()時會回傳false。此外,一般陣列所提供的方法並非全部被型別陣列所支援(如push以及pop方法)

緩衝與視圖:型別陣列的架構

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

Typed arrays in an ArrayBuffer

ArrayBuffer

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

型別陣列視圖 (Typed array views)

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

DataView

The DataView 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) 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.

Web APIs using typed arrays

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
Is a Uint8ClampedArray 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。

備註:C 結構的 data structure alignment 是與使用平台有關,須小心這些填充上的差異。

Conversion to normal arrays

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;

規範

Specification Status Comment
Typed Array Specification Obsolete Superseded by ECMAScript 2015.
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'TypedArray Objects' in that specification.
Standard Initial definition in an ECMA standard.
ECMAScript Latest Draft (ECMA-262)
The definition of 'TypedArray Objects' in that specification.
Draft  

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 7.0 4.0 (2) 10 11.6 5.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 (Yes) 4.0 (2) 10 11.6 4.2

參見

文件標籤與貢獻者

標籤: 
此頁面的貢獻者: ballfish, jackblackevo, royxnatw, teoli, Kennyluck
最近更新: ballfish,