JavaScript 中的 `TypedArray`

本文將解釋 JavaScript 中的 TypedArray。

我們將詳細解釋 TypedArray 的基本概念、各類型、如何使用它們以及具體的使用案例。

YouTube Video

JavaScript 中的 TypedArray

JavaScript 中的 TypedArray 是一種用於高效處理緩衝二進制數據的對象。TypedArray 根據特定的數據類型分配和操作記憶體。與普通數組不同，TypedArray 只能存儲固定大小的二進制數據，而非任意的數據類型。

TypedArray 的基本結構

TypedArray 的主要組成部分是 ArrayBuffer 和 TypedArray 本身。

• ArrayBuffer：固定大小的緩衝區，用於在記憶體中分配二進制數據。該緩衝區僅為數據區域，不能直接讀取或寫入。
• TypedArray：一個包裝對象，將特定的數據類型應用於緩衝區，從而實現數據的訪問和操作。

基本用法範例

以下是一個創建 ArrayBuffer 並基於該緩衝區創建 TypedArray 的示例。

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• 在此示例中，創建了一個 ArrayBuffer，然後基於該緩衝區創建了一個 Uint8Array。每個元素被視為 8 位無符號整數，只能存儲在指定範圍內的值。

TypedArray 的類型

每種數據類型都有不同的 TypedArray 類型。主要類型如下。

這些 TypedArray 都具有高效的記憶體使用率，適合處理大量數據。

操作 TypedArrays

您可以像普通陣列一樣通過索引訪問 TypedArray 中的數據，但它還提供了幾項特殊的方法。

設置值

在 TypedArray 中，您可以使用 set 方法一次設置多個值。

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• 此程式碼使用 set 方法一次為 Int16Array 賦值多個元素，並在主控台顯示每個元素。

獲取子陣列

要將 TypedArray 的某部分作為子陣列獲取，請使用 subarray 方法。這會引用與原始 TypedArray 相同的緩衝區。

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• 此程式碼使用 subarray 方法從 Int16Array 取得指定範圍的元素，並在主控台顯示該子陣列。

複製緩衝區

TypedArray 的緩衝區也可以被複製到另一個 TypedArray。使用 set 方法，您可以從指定位置開始複製。

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• 此程式碼使用 set 方法將一個 Uint8Array 的內容複製到另一個陣列，並在主控台顯示複製後的陣列。

使用 DataView

雖然 TypedArray 處理的是具有固定數據類型的緩衝區，但 DataView 是一個能靈活操作二進制數據的介面，支持任意偏移量和數據類型。這使得在同一個緩衝區中可以混合使用不同的數據類型。

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• 此程式碼使用 DataView 在同一個緩衝區上寫入不同類型的數據——32位元整數和32位元浮點數，並檢查結果。

• DataView 比 TypedArray 提供更大的數據訪問靈活性，特別是在處理二進制格式文件或網路協議時更加實用。

TypedArray 的使用案例

TypedArray 主要用於高效處理大量二進制數據。具體使用案例包括以下內容。

圖像處理

在操作圖像數據的像素信息時會使用 TypedArray。使用 Uint8Array，您可以保存每個像素的 RGBA 值並進行圖像編輯與處理。

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• 此程式碼使用 Uint8Array 以 RGBA 格式建立寬度100、高度100的影像資料，並將所有像素設為紅色。

與 WebAssembly 的互通

JavaScript 和 WebAssembly 之間交換二進位數據時會使用 TypedArray。透過 ArrayBuffer 共享 JavaScript 和 WebAssembly 的記憶體空間，可以實現快速數據交換。

處理音訊和視訊數據

TypedArray 在處理音訊和視訊方面扮演著重要角色。您可以將音訊數據的波形儲存在 Float32Array 中以進行播放和處理。

結論

TypedArray 是一個有效處理大量二進位數據的強大工具。在圖像處理、WebAssembly 和音訊/視訊數據處理等對性能要求高的應用中，它尤其有用。TypedArray 的 API 與普通陣列相似，但在記憶體使用和數據類型方面有一些限制，因此需要正確區分使用場景。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video