了解TypedArray：如何更高效地處理二進位數據

一、TypedArray是什麼

TypedArray是JavaScript中一系列與ArrayBuffer相關的類型化數組構造函數的集合，支持對二進位數據進行高效處理。主要包括以下幾種類型：

• Int8Array、Uint8Array、Uint8ClampedArray
• Int16Array、Uint16Array
• Int32Array、Uint32Array
• Float32Array、Float64Array

這些構造函數的目的是為了提供快速、可預測的操作二進位數據的方式。與普通的JavaScript數組相比，TypedArray數組是在底層表示和存儲上更加接近底層二進位數據。因此，在數量龐大的數據處理中，使用TypedArray可以獲得更高的性能和更少的內存開銷。

二、與ArrayBuffer的關係

TypedArray是一系列與ArrayBuffer相關的類型化數組構造函數的集合。因此使用TypedArray最好的方式是先了解一下ArrayBuffer。

ArrayBuffer是一個通用的二進位數據容器，用於存儲二進位數據。它可以與TypedArray一起使用，作為數據輸入和輸出的中介。創建一個ArrayBuffer的方法為：

let buffer = new ArrayBuffer(16);

上面的代碼創建了一個長度為16個位元組的ArrayBuffer。可以通過下標對這個ArrayBuffer進行訪問：

let buffer = new ArrayBuffer(16);
let intArray = new Int32Array(buffer);   // 構造一個Int32Array

intArray[0] = 10;
console.log(buffer);    // ArrayBuffer { byteLength: 16 }

上述代碼將ArrayBuffer作為Int32Array的構造函數的參數進行傳遞，並將Int32Array的第一個元素設置為10。最後輸出的buffer的位元組長度為16。

三、TypedArray中的各種類型

1. Int8Array、Uint8Array、Uint8ClampedArray

這三種類型都是用來處理8位二進位數據的。

• Int8Array：用於處理8位有符號整數，在-128到127之間。
• Uint8Array：用於處理8位無符號整數，在0到255之間。
• Uint8ClampedArray：使用Uint8ClampedArray會強制將不在0到255之間的值截斷，因此適合處理圖像數據等需要精確控制的二進位數據。

以下是三種類型的創建方式：

let int8Array = new Int8Array(8);
let uint8Array1 = new Uint8Array(8);
let uint8Array2 = new Uint8ClampedArray(8);

上述代碼分別創建了一個長度為8的Int8Array、Uint8Array和Uint8ClampedArray。

2. Int16Array、Uint16Array

這兩種類型都是用來處理16位二進位數據的。

• Int16Array：用於處理16位有符號整數。
• Uint16Array：用於處理16位無符號整數。

以下是兩種類型的創建方式：

let int16Array = new Int16Array(8);
let uint16Array = new Uint16Array(8);

上述代碼分別創建了一個長度為8的Int16Array和Uint16Array。

3. Int32Array、Uint32Array

這兩種類型都是用來處理32位二進位數據的。

• Int32Array：用於處理32位有符號整數。
• Uint32Array：用於處理32位無符號整數。

以下是兩種類型的創建方式：

let int32Array = new Int32Array(8);
let uint32Array = new Uint32Array(8);

上述代碼分別創建了一個長度為8的Int32Array和Uint32Array。

4. Float32Array、Float64Array

這兩種類型都是用來處理浮點型二進位數據的。

• Float32Array：用於處理32位浮點數字。
• Float64Array：用於處理64位浮點數字。

以下是兩種類型的創建方式：

let float32Array = new Float32Array(8);
let float64Array = new Float64Array(8);

上述代碼分別創建了一個長度為8的Float32Array和Float64Array。

四、TypedArray的基本操作

1. TypedArray的創建

TypedArray可以使用以下方式進行創建：

let array = new TypedArray(length);
let array = new TypedArray(buffer);
let array = new TypedArray(buffer, byteOffset, length);
let subarray = new TypedArray(sourceArray);
let subarray = new TypedArray(sourceArray, begin);
let subarray = new TypedArray(sourceArray, begin, end);

以上代碼分別為不同的創建方式：

• 使用長度創建一個新的TypedArray
• 使用一個已有的ArrayBuffer創建一個新的TypedArray
• 使用一個已有的ArrayBuffer創建指定範圍的TypedArray
• 從一個數組中創建一個子數組
• 從一個數組中創建指定範圍的子數組

2. TypedArray的讀取和設置

TypedArray的讀取和設置方式與普通的JavaScript數組相同：

let array = new Int32Array(8);
array[0] = 123;
let value = array[0];
console.log(value);    // 123

3. TypedArray的迭代

TypedArray的迭代方式有兩種，一種是通過for循環逐一迭代，另一種是使用TypedArray內置的forEach()方法進行迭代。

for循環的迭代方式如下：

let array = new Int32Array(8);
for(let i=0; i<array.length; i++) {
  console.log(array[i]);
}

TypedArray的forEach()方法可以像普通的數組一樣使用：

let array = new Int32Array(8);
array.forEach(function(element) {
  console.log(element);
});

4. TypedArray的切割

與普通的JavaScript數組一樣，TypedArray也支持數組的切割操作。該操作返回一個新的TypedArray。

let array = new Int32Array([1, 2, 3, 4, 5, 6, 7, 8]);
let slice = array.slice(2, 6);
console.log(slice);    // Int32Array [ 3, 4, 5, 6 ]

5. TypedArray的複製和拷貝

TypedArray也支持複製和拷貝操作。複製操作是直接賦值一個TypedArray，拷貝操作是創建一個新的TypedArray，並將舊的TypedArray中的數據拷貝到新的TypedArray中。

以下是TypedArray的複製和拷貝代碼示例：

let array1 = new Int32Array(8);
let array2 = array1;    // 複製
let array3 = new Int32Array(8);
array3.set(array1);     // 拷貝

五、應用方面

TypedArray在許多應用中得到了廣泛的應用。以下是一些示例。

1. 圖像處理

Web應用中的圖像處理通常需要解碼和處理大量的二進位圖片數據。使用TypedArray可以快速、高效地處理二進位圖像數據，以便進行圖像處理、增強和壓縮等操作。

2. 網路通信

在Web應用中，客戶端與服務端之間通常需要進行大量的網路通信。使用TypedArray可以幫助實現高效、可靠的網路通信並提高數據處理的速度。

3. 流媒體數據

流媒體數據通常是大量的數據流，使用TypedArray可以快速處理、解碼和壓縮這些數據，以便在Web應用中實現高質量的媒體體驗。

六、總結

TypedArray是JavaScript中一個強大的二進位數據處理工具，它提供了以底層二進位數據為中心的高效、可預測的數據處理方式。在Web應用的許多方面，TypedArray都有大量的應用，如圖像處理、網路通信和流媒體數據等。學習使用TypedArray可以使我們更有效地處理大量的二進位數據，提高Web應用的性能和用戶體驗。