JavaScript中各種二進制對象關系的深入講解

Posted on by

前言

現代 JavaScript 要面臨更加復雜的場景，對於各種類型的數據傳輸也多瞭起來，其中涉及二進制傳輸，為瞭方便處理數據提高效率於是創造瞭ArrayBuffer對象。

但是使用中會發現不僅僅有ArrayBuffer，還有TypedArray、DataView、Blob、FileReader等一系列對象，讓人迷惑它們之間關系是什麼？為什麼有這麼多的對象？帶著問題查詢瞭資料，試著梳理其中的關系。

各種對象的關系

ArrayBuffer

ArrayBuffer是 JavaScript 最基本的處理二進制的對象，描述的是一段連續的內存空間，其單位是字節(byte)。

const buffer = new ArrayBuffer(32);

這樣我們就創建瞭一塊 32 字節的內存區域，可以使用buffer.byteLength來查看其長度。

ArrayBuffer對象能做的操作不多，並且是不可編輯的。如果需要編輯數據，要利用另外兩個對象TypedArray與

DataView。

TypedArray

TypedArray類型化數組，TypedArray本身不存儲任何數據，隻是專門用來查看ArrayBuffer數據，所以稱之為，TypedArray不是某一個構造函數名，而是一組構造函數的統稱。

  • Int8Array：1 比特，8 位有符號整數
  • Uint8Array：1 比特，8 位無符號整數
  • Uint8ClampedArray：1 比特，8 位無符號整數
  • Int16Array：2 比特，16 位無符號整數
  • Uint16Array：2 比特，16 位無符號整數
  • Int32Array：4 比特，32 位無符號整數
  • Uint32Array：4 比特，32 位無符號整數
  • Float32Array：4 比特，32 位無 IEEE 浮點數
  • Float64Array：8 比特，64 位無 IEEE 浮點數
  • BigInt64Array：8 比特，64 為二進制有符號整數
  • BigUint64Array：8 比特，64 位無符號整數

創建的時候可以傳入長度、typedArray、ArrayBuffer、數組。當然也可以什麼都不傳入。

const uint1 = new Uint8Array(8);
const uint2 = new Uint16Array(new Uint8Array(8));
const uint3 = new Uint8Array(new ArrayBuffer(8));
const uint4 = new Uint8Array([1, 2, 3]);
const uint5 = new Uint8Array();

以上typedArray中，除瞭創建時傳入ArrayBuffer不會新創建ArrayBuffer，其他在new過程中底層都會創建新的ArrayBuffer。可以使用arr.buffer來訪問其引用的ArrayBuffer。

操作上普通數組的操作都能在TypedArray 中使用。但因為ArrayBuffer描述的是連續的內存區間，所以我們無法刪除某一個值，隻能分配為0，也沒辦法使用concat方法。

Uint8ClampedArray

Uint8ClampedArray相對特殊一點，在正負溢出的情況下處理不同。

其他對於存入越界數據僅保留最右邊（低位）部分，拋棄溢出數據，而Uint8ClampedArray對越界數據都保存為255，對於傳入的負數保存為0。

字符的相互轉換

TypedArray不支出直接傳字符串，所以需要先轉碼一下。

String → Unit8Array

 const string = "Hello";
Uint8Array.from(string.split(""), (e) => e.charCodeAt(0));

Unit8Array → String

 // 使用TextDecoder對象
const u8 = Uint8Array.of(72, 101, 108, 108, 111);
new TextDecoder().decode(u8);
// 使用fromCharCode轉換
const u8 = Uint8Array.of(72, 101, 108, 108, 111);
Array.from(u8, (e) => String.fromCharCode(e)).join("");

DataView

以上數據除瞭uint2變量，其他都是單一的數據類型，uint2對象這種一段內存中存放瞭兩種類型數據，稱之為復合視圖。JavaScript 中數據類型往往不那麼單一，僅用TypedArray操作會更加麻煩，所以又有瞭DataView對象。DataView相對於TypedArray有著更加多種的操作方法。

const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);

提供瞭getInt8、getUint8、getInt16、getUint16、getInt32、getUint32、getFloat32、getFloat64方法。

參數有兩個，第一位是節序位置，第二位是字節序，非必填。返回值是相應位置的字節數據。

const d1 = dataView.getUint8(1);
const d2 = dataView.getUint8(1, true);

字節位置好理解，字節序可以閱讀《理解字節序》，總的說就是：

  • 大端字節序（big endian）：高位字節在前，低位字節在後，這是人類讀寫數值的方法。
  • 小端字節序（little endian）：低位字節在前，高位字節在後，即以 0x1122 形式儲存。

默認情況下使用的是大端字節序，如果要使用小端字節序需要傳入true。

這樣我們就有瞭基礎的二進制的讀寫方案。可實際的應用場景中往往有更加復雜的數據，所以又針對專門的場景又衍生出Blob、FileReader等對象。

Blob

Blob，是Binary Large Object（二進制大型對象）的縮寫。

與ArrayBuffer差異是，ArrayBuffer是單純的二進制數據，而Blob是帶MIME類型的二進制數據。並且可以方便的從String、ArrayBuffer、TypedArray、DataView、Blob生成為Blob對象。

const blob1 = new Blob(["hello"], { type: "text/plain" });
const blob2 = new Blob([new Uint8Array([72, 101, 108, 108, 111]), " ", "world"], { type: "text/plain" });

屬性：

  • size：讀取對象的字節大小。
  • type：讀取寫入的MIME類型

方法：

  • slice：提取Blob片段。

URL

在開發中我們獲取到圖片二進制數據，我們可以轉換成base64寫入src中，但如果數據量很大，或者視頻數據，就會超過其允許長度。我們可以使用URL.createObjectURL來方便的創建一個資源的 URL。

const url = URL.createObjectURL(blob1);

會生成類似blob:https://example.com/a6728d20-2e78-4497-9d6c-0ed61b93f11e的資源 URL，可以直接寫入src中使用。

在不用時使用URL.revokeObjectURL(url)銷毀其引用，釋放其內存占用。

數據讀取

如果我們要查看其中數據的話，有兩種方式。

第一種，使用Response對象，可以直接讀取字符串數據或是arrayBuffer數據。

const responseText = await new Response(blob2).text();
const responseBuf = await new Response(blob2).arrayBuffer();

第二種，使用FileReader對象。

const reader = new FileReader();
reader.onload = function (e) {
    console.log(reader.result);
};
reader.readAsText(blob2);

File

File繼承自Blob，並增加瞭文件相關的屬性信息。

  • name：文件名
  • lastModified：最後修改時間的時間戳
  • lastModifiedDate：最後修改時間的Date對象
  • webkitRelativePath：文件的路徑。在 input 中選擇目錄時，會設置這個屬性，非標準特性。

FileList

FileList對象是File對象的集合。一般出現在:

  • <input type=”file”>控件，其中files屬性是一個FileList
  • 拖拽事件中產生的DataTransfer對象，其中files屬性會是一個FileList

屬性：

  • length：可以獲取當前FileList包含多少個File

方法：

  • item(index)：可獲取指定索引位置的File數據，一般情況下直接使用FileList[index]替代瞭。

FileReader

FileReader在談Blob一節有提到過，實際上FileReader對象就是專門用來讀取Blob對象的，當然也包括擴展的File對象。

屬性：

  • result：文件的內容。
  • readyState：狀態。0：未加載；1：正在加載；2：加載完成。
  • error：加載數據時的錯誤信息。

事件：

  • onload：加載成功後觸發。
  • onerror：加載錯誤時觸發。
  • onabort：加載中斷時觸發。
  • onloadend：加載結束後觸發。
  • onloadstart：加載開始時觸發。
  • onprogress：加載中觸發。

方法：

  • readAsText(blob, “utf-8”)：以文本形式返回數據，第二個參數可設置文本編碼。
  • readAsDataURL(blob)：以Data URL的形式返回數據。
  • readAsArrayBuffer(blob)：以ArrayBuffer形式返回數據。
  • abort：中止操作。

如上面的示例，就是以文本形式返回數據：

const reader = new FileReader();
reader.onload = function (e) {
    console.log(reader.result);
};
reader.readAsText(blob2);

相關資料

  • MDN 相關的關鍵字
  • 現代 JavaScript 教程 第三部分 二進制數據，文件
  • 阮一峰 JavaScript 教程 瀏覽器模型相關章節

總結

到此這篇關於JavaScript中各種二進制對象關系的文章就介紹到這瞭,更多相關JS二進制對象關系內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：