JSArrayBuffer

隨著Web應用程序的普及，更多的開發人員開始傾向於JavaScript作為解決方案。但是，JavaScript是一門高級語言，通常需要處理大量的數據。在這種情況下，JavaScript的效率表現可能會受到限制。為了解決這個問題，JavaScript引入了一個新的特性：JSArrayBuffer。JSArrayBuffer提供一種有效的方法來處理二進位數據。

一、JSArrayBuffer內存益處

JSArrayBuffer是一種特殊類型的數組，用於存儲以二進位格式表示的數據。相比於普通的JavaScript數組，JSArrayBuffer擁有更高的效率和更低的內存佔用。因為它只能存儲二進位數據，所以不必為每個元素分配獨立的內存空間。這使得它在處理大型數據集時表現出更好的性能。

JSArrayBuffer的內存分配非常簡單，只需要指定一個特定的大小即可。它的長度是固定的，一旦分配了，就不能更改。這使得內存佔用變得更加可控，避免了由於動態分配內存而導致的內存泄漏問題。

二、JSArrayBuffer數據操作

1. 創建JSArrayBuffer

let buffer = new ArrayBuffer(bufferSize);

創建一個長度為bufferSize的JSArrayBuffer。如果要從現有數據源創建JSArrayBuffer，則可以通過將原始數據轉換為二進位形式來完成創建。

2. 訪問JSArrayBuffer

let buffer = new ArrayBuffer(8);
let view = new DataView(buffer);

// 設置值
view.setInt32(0, 42, false);
view.setFloat32(4, 0.2, true);

// 獲取值
let a = view.getInt32(0, false);
let b = view.getFloat32(4, true);

console.log(a, b);

使用DataView來訪問JSArrayBuffer中的數據。DataView提供了一個類似於數組的介面，可以讀取和寫入特定的位元組偏移量。例如，以上代碼創建了一個長度為8位元組的JSArrayBuffer，包含了一個Int32和一個Float32值。getInt32()和getFloat32()方法用於從特定偏移量處獲取值。類似地，setInt32()和setFloat32()方法可用於在特定偏移量處設置值。

3. TypedArray：JSArrayBuffer的標準視圖

let buffer = new ArrayBuffer(8);
let view = new Int32Array(buffer);

view[0] = 42;

console.log(view[0]);

TypedArray是JSArrayBuffer的標準視圖。它們提供了一個類似於數組的介面，用於訪問和操作JSArrayBuffer中的數據。不同的視圖類型（如Int8Array、Uint8Array、Int16Array等）提供了不同類型的數據讀取和寫入方法。可以通過創建一個特定類型的視圖，來訪問JSArrayBuffer。

4. JSArrayBuffer的複製和拼接

let buffer1 = new ArrayBuffer(4);
let buffer2 = new ArrayBuffer(4);

let view1 = new DataView(buffer1);
let view2 = new DataView(buffer2);

// 設置值
view1.setInt32(0, 42, false);
view2.setInt32(0, 23, false);

// 複製
let buffer3 = new ArrayBuffer(8);
let view3 = new Uint16Array(buffer3);

view3.set(new Uint16Array(buffer1));
view3.set(new Uint16Array(buffer2), 2);

console.log(new DataView(buffer3).getInt32(0, false));

要複製一個JSArrayBuffer，可以使用TypedArray的set()方法來將一個JSArrayBuffer複製到另一個JSArrayBuffer。要將兩個JSArrayBuffer合併為一個新的JSArrayBuffer，可以創建一個新的JSArrayBuffer，並使用TypedArray的set()方法將原始JSArrayBuffer複製到新的JSArrayBuffer中。

5. JSArrayBuffer的轉換

function arrayBufferToString(buffer) {
  let view = new Uint8Array(buffer);
  let result = "";
  for (let i = 0; i < view.length; i++) {
    result += String.fromCharCode(view[i]);
  }
  return result;
}

function stringToArrayBuffer(str) {
  let buffer = new ArrayBuffer(str.length);
  let view = new Uint8Array(buffer);
  for (let i = 0; i < str.length; i++) {
    view[i] = str.charCodeAt(i);
  }
  return buffer;
}

let str = "Hello, World!";
let buffer = stringToArrayBuffer(str);
let str2 = arrayBufferToString(buffer);

console.log(str, str2);

常規JavaScript對象（如字元串和數組）可以轉換為JSArrayBuffer，反之亦然。使用TypedArray視圖時，可以直接訪問由數組提供的二進位數據。如果要將JSArrayBuffer轉換為字元串或數組，則需要使用視圖類型構造函數和循環遍歷。

三、JSArrayBuffer的應用場景

JSArrayBuffer主要用於處理大量的數據，尤其是二進位數據，例如圖像、聲音和視頻等。瀏覽器API和第三方庫通常使用JSArrayBuffer來傳輸和處理二進位數據。它還適用於處理WebSocket消息、WebRTC流、WebAssembly模塊等。JSArrayBuffer還可以用於改善JavaScript中某些演算法的性能，例如密碼學和哈希函數等。