PJCHENder 未整理筆記

[JS] TypedArray, ArrayBuffer 和 DataView

2019-05-24

[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 才能讀寫二進位資料到記憶體

1
2
3
4
5
6
7
8
9
// 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

1
2
3
4
5
6
7
8
9
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)問題。

1
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)的數字(即,0x000xff),因此為了要能保存更多的數字,必須要超過 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

參考

掃描二維條碼,分享此文章