JavaScript ArrayBuffer

JavaScript是一種應用於網路程式設計的指令碼語言。

設計的初衷是為了實現使用者與頁面更加人性化的互動，為頁面增加簡單動態效果。

隨著時間的推移和軟硬體的進步，JavaScript用途用途越來越廣泛，是設計之初夢想之所不到。

可以肯定，最初JavaScript就沒有考慮過要直接處理二進位制資料，在ES2015之前沒有此方面明確規定。

HTML5規範的制定，對二進位制資料的操作有了現實的需求：

（1）.XHR2可以上傳和下載二進位制資料。

（2）.canvas和WebGL等繪圖功能需要和顯示卡之間進行大量的二進位制資料通訊。

於是，ES2015新增ArrayBuffer物件和Typed Array（型別化陣列）實現操作二進位制資料。

關於檢視可以參閱以下兩篇文章:

（1）.TypedArray檢視參閱JavaScript TypedArray 檢視一章節。

（2）.DataView檢視參閱JavaScript DataView 檢視一章節。

一.基本概念：

ArrayBuffer物件表示內中一段二進位制儲存區域，具有如下特點：

（1）.是一段長度固定且連續的儲存區域，所以讀寫速度快。

（2）.只是一段儲存區域，自身無法讀寫資料，需要藉助於型別化陣列。

通過建構函式可以建立一個ArrayBuffer物件，語法結構如下：

[JavaScript] 純文字檢視 複製程式碼
let buffer = new ArrayBuffer(length);

引數解析：

（1）.length：必需，規定開闢這段二進位制儲存空間的位元組長度。

看一個程式碼片段：

[JavaScript] 純文字檢視 複製程式碼
let buffer = new ArrayBuffer(16);

上述程式碼通過建構函式建立一個ArrayBuffer物件，表示記憶體中一塊連續且長度為16個位元組的記憶體空間。

特別說明：預設狀態下，每一個位元組的資料為0。

二.屬性：

（1）.byteLength：此屬性返回所分配連續記憶體空間的長度。

三.方法：

（1）.ArrayBuffer.isView()：靜態方法，檢測引數是否為ArrayBuffer的檢視例項。

（2）.slice() :例項方法，在原有記憶體空間基礎上拷貝生成一個新記憶體空間，也就是一個新ArrayBuffer例項。

四.程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let buf = new ArrayBuffer(32);
console.log(buf.byteLength);

程式碼執行效果截圖如下：

byteLength屬性返回的就是ArrayBuffer物件開闢記憶體空間的長度，也就是位元組的數目。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let buffer = new ArrayBuffer(8);
let v = new Int32Array(buffer);
console.log(ArrayBuffer.isView(v));

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.ArrayBuffer.isView()是一個靜態方法，直接使用類呼叫。

（2）.它可以判斷引數是否是一個檢視例項（實質就是型別化陣列例項）。

（3）.前面已經介紹過ArrayBuffer只負責開闢記憶體空間，並不能直接運算元據，所以需要藉助於型別化陣列。

更多用法可以參閱ArrayBuffer.isView() 方法一章節。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let buf1 = new ArrayBuffer(8);
let buf2 = buf1.slice(3);
console.log(buf2.byteLength);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.此方法可以從原來ArrayBuffer記憶體區域拷貝指定長度的內容，生成一個新的ArrayBuffer物件。

（2）.如果方法只規定一個引數，表示從此處開始拷貝一直到結尾，所以列印結果是5。

關於此方法更多內容參閱ArrayBuffer slice() 方法一章節。