1. 程式人生 > >Buffer、ArrayBuffer、型別化陣列、TypedArray

Buffer、ArrayBuffer、型別化陣列、TypedArray

起因

需要在前端對後臺傳來的Base64編碼後的pdf檔案進行解碼並生成TypedArray(unit8Array)型別再傳遞給pdf.js

什麼是Buffer?

Buffer物件是Node.js用來處理二進位制資料的一個介面。JavaScript比較擅長處理Unicode資料,對於處理二進位制格式的資料(比如TCP資料流),就不太擅長。Buffer物件就是為了解決這個問題而提供的。該物件也是一個建構函式,它的例項代表了V8引擎分配的一段記憶體,基本上是一個數組,成員都為整數值。Buffer物件與字串的互相轉換,需要指定編碼格式。

  • 處理二進位制資料(各類檔案)
  • 代表分配一段記憶體
  • 編碼格式encoding:ascii、utf8、utf16le、ucs2(utf16le別名)、base64、latin1、binary(latin1別名)和hex幾種型別。

API

建立

  • Buffer.from(data[, byteOffset[, length]] , [encoding]): data可以為arrayBufferBufferString三種類型;encoding代表編碼格式,在data為String時可選。

  • Buffer.alloc(size[, fill[, encoding]]): 返回一個指定大小的 Buffer 例項,如果沒有設定 fill,則預設填滿 0。

  • Buffer.concat(list[, totalLength]): list是由Buffer物件組成的陣列,返回一個多個成員合併的新 Buffer 物件。

  • Buffer.copy(targetBuffer[, targetStart[, sourceStart[, sourceEnd]]])

var buf1 = Buffer.from('abcdefghijkl');
var buf2 = Buffer.from('RUNOOB');
//將 buf2 插入到 buf1 指定位置上
buf2.copy(buf1, 2);
console.log(buf1.toString());  // abRUNOOBijkl
  • Buffer.slice([start[, end]]): 返回一個新的緩衝區,它和舊緩衝區指向同一塊記憶體,但是從索引 start 到 end 的位置剪下。

讀取

  • Buffer.toString([encoding[, start[, end]]]): 會隱式的呼叫toJSON方法。
  • Buffer.toJSON():

寫入

  • Buffer.write(string[, offset[, length]][, encoding])
  • Buffer.fill(value[, offset][, end])

工具方法

  • Buffer.isEncoding(): 返回一個布林值,表示Buffer例項是否為指定編碼。 Buffer.isEncoding('utf8') // true
  • Buffer.isBuffer() 返回一個布林值,表示該物件是否為Buffer例項

例項屬性

  • Buffer.length:length屬性返回Buffer物件所佔據的記憶體長度。注意,這個值與Buffer物件的內容無關。 TIPS: 如果想知道一個字串所佔據的位元組長度,可以將其傳入Buffer.byteLength方法。

為什麼Buffer能在瀏覽器中使用?

bable-preset-env

什麼是型別化陣列

定義: JavaScript型別化陣列是一種類似陣列的物件,並提供了一種用於訪問原始二進位制資料的機制。 用處: Web應用程式的音訊視訊編輯使用JavaScript程式碼可以快速方便地通過 型別化陣列 來操作原始的二進位制資料將會非常有幫助。 型別化陣列的架構: 為了達到最大的靈活性和效率,JavaScript 型別陣列將實現拆分為緩衝和檢視兩部分。一個緩衝(由 ArrayBuffer 物件實現)描述的是一個數據塊。緩衝沒有格式可言,並且不提供機制訪問其內容。為了訪問在緩衝物件中包含的記憶體,你需要使用檢視。檢視提供了上下文 — 即資料型別、起始偏移量和元素數 — 將資料轉換為實際有型別的陣列。

什麼是ArrayBuffer

定義: ArrayBuffer 物件用來表示通用的、固定長度的原始二進位制資料緩衝區。ArrayBuffer 不能直接操作,而是要通過型別化陣列物件或 DataView 物件來操作,它們會將緩衝區中的資料表示為特定的格式,並通過這些格式來讀寫緩衝區的內容。

TypedArray

定義: 一個TypedArray 物件描述一個底層的二進位制資料快取區的一個類似陣列(array-like)檢視。事實上,沒有名為 TypedArray的全域性物件,也沒有一個名為的 TypedArray建構函式。 包含: Int8Array、Uint8Array、(U)Int16Array、(U)Int32Array、Float32Array、Float64Array共八種。

值得注意的是型別化陣列的檢視包括:Int8Array、Uint8Array、(U)Int16Array、(U)Int32Array、Float32Array、Float64Array、Uint8ClampedArray共九種。 只有其中一種Uint8ClampedArray與TypedArray不包含,而這種型別的陣列只操作0到255之間的數值,非常適合處理Canvas資料。(pdf.js庫使用到了這類檢視陣列)

總結

  • ArrayBuffer與TypedArray組成型別化陣列物件;
  • 型別化陣列物件、TypedArray和DateView可以操作ArrayBuffer;
  • 型別化陣列物件和TypedArray有一定重疊,可MDN將他們分為了兩個詞條,暫不清楚區別所在。

延展

Blob

FileReader