跳至主要内容

[JS] TypedArray, ArrayBuffer 和 DataView

@(Javascript)[ES7, JavaScript]

待了解：UintArray8, TypedArray, Blob, ArrayBuffer​

關聯文章：

  • [TypedArray, ArrayBuffer, DataView](/Users/pjchen/Projects/Notes/source/_posts/JavaScript/[JS] TypedArray, ArrayBuffer 和 DataView.md)
  • [檔案上傳（Input File） and File Upload](/Users/pjchen/Projects/Notes/source/_posts/WebAPIs/[WEB] 檔案上傳 Input File and File Upload.md)
  • [Blob and File API](/Users/pjchen/Projects/Notes/source/_posts/WebAPIs/[WEB] Blob and File API.md)
  • ArrayBuffer 是一種資料型態，用於表示通用的固定長度二進制資料緩衝區。 我們不能直接操作 ArrayBuffer 的內容。但可以建立一個「型別陣列視圖 (typed array view) 」或一個 DataView，它以特定格式代表緩衝區，並使用它讀取和寫入緩衝區的內容，根據你存取 ArrayBuffer 的方式不同，在同一台機器上可以得到不同的 endianness (byte order)。
  • 透過 Typed Array 來操作 ArrayBuffer，每一項都是相同的大小和類型。
  • 透過 Data View 來操作 Array Buffer，可以不用去考慮到不同作業平台的位元組順序（endianness）問題，每一項可以有自己的大小和類型。

ArrayBuffer​

keywords: ArrayBuffer.prototype.byteLength, ArrayBuffer.prototype.slice()​

ArrayBuffer 用來模擬記憶體裡片的資料，透過 ArrayBuffer，JavaScript 才能讀寫二進位資料到記憶體：

// new ArrayBuffer(<length>)
// 建立一個 ArrayBuffer，參數表示該 ArrayBuffer 需要幾個位元組（bytes）
var buffer = new ArrayBuffer(8); // 佔用 8 個位元組（bytes）的 Buffer
buffer.byteLength; // 8，指該 buffer 佔用記憶體的長度（位元組）

// 透過 slice 來複製 ArrayBuffer
// slice(startIndex, endIndex) 結束時不包含 end
var buf1 = new ArrayBuffer(8);
var buf2 = buf1.slice(0); // 從頭複製到尾

Typed Array​

要使用 Typed Array 最簡單的方式建立一個 ArrayBuffer 和其對應的 view：

var buffer = new ArrayBuffer(2);
var bytes = new Uint8Array(buffer);

bytes[0] = 65;
bytes[1] = 66;

var blob = new Blob([buffer], { type: 'text/plain' });
var dataUri = window.URL.createObjectURL(blob);
window.open(dataUri);

Data View​

Data View @ MDN

透過 Data View 來操作 Array Buffer，可以不用去考慮到不同作業平台的位元組順序（endianness）問題。

new DataView(buffer [, byteOffset [, byteLength]])

Blob​

參考筆記 [Blob and File API](/Users/pjchen/Projects/Notes/source/_posts/WebAPIs/[WEB] Blob and File API.md)

位元組順序 - Endianness(byte-order)​

Endianness @ MDN

Endianness (Endian) 或 byte order 是用來表示多個位元組會以什麼樣的順序儲存在電腦的記憶體中。

Little Endian​

在記憶體的每個儲存空間都有索引（index）或位址（address），而每一個位元組（byte）都可以儲存 8 個位元（bit）的數字（即，0x00 到 0xff），因此為了要能保存更多的數字，必須要超過 1 byte 以上的數字。目前最長使用的排序方式是 little-endian，通常用在所有 intel 的處理器，這種儲存方式會把最不重要的儲存內容放在最前面，也就是把最不重要的 bytes 放在第一個（first）或最低的（lowest）的位址，這種儲存方式和歐洲的日期格式相匹配（例如，31 December 2050）。

Big Endian (network byte order)​

相對地，big-endian 則是反過來的儲存方式，這和 ISO 的日期格式相搭（2050-12-31），同時這種方式也被稱作 network byte order，因為網際網路的標準通常要求以 big-endian 的方式來儲存資料，從標準的 UNIX socket level 一直到標準的 Web binary data structures。

舉例​

舉例來說，以數字 0x12345678（即，十進位的 305 419 896）：

  • little-endian: 0x78 0x56 0x34 0x12
  • big-endian: 0x12 0x34 0x56 0x78
  • mixed-endian (historic and very rare): 0x34 0x12 0x78 0x56

參考​