Typed Arrays 是JavaScript 中用於操作原始二進制數(shù)據(jù)的數(shù)組類型，常見類型包括Int8Array、Uint8Array、Uint8ClampedArray、Int16Array、Uint16Array、Float32Array 和Float64Array；它們配合ArrayBuffer 使用，在處理圖像、音頻、網(wǎng)絡(luò)通信和WebGL 等高性能場景中非常有用。 1. 圖像處理中使用Uint8ClampedArray 操作像素數(shù)據(jù)，適合實時圖像處理；2. 音頻處理中使用Float32Array 表示音頻樣本，適合音效合成與分析；3. 網(wǎng)絡(luò)通信中通過WebSocket 接收ArrayBuffer 數(shù)據(jù)並用Typed Array 解析，提高結(jié)構(gòu)化數(shù)據(jù)傳輸效率；4. WebGL 數(shù)據(jù)傳輸中使用Float32Array 組織頂點數(shù)據(jù)上傳至GPU 進行渲染；選擇合適類型時需根據(jù)應(yīng)用場景考慮數(shù)值範(fàn)圍、精度及性能需求。

JavaScript 的Typed Arrays 並不像普通的數(shù)組那樣靈活，但它們在處理二進制數(shù)據(jù)和高性能場景中非常有用。如果你曾經(jīng)處理過圖像、音頻或者網(wǎng)絡(luò)協(xié)議相關(guān)的數(shù)據(jù)，可能已經(jīng)用到了它們。

什麼是Typed Array？

Typed Array 是一種專門用來操作原始二進制數(shù)據(jù)的數(shù)組類型。與普通數(shù)組不同，它們只能存儲特定類型的數(shù)值（比如8 位整數(shù)、32 位浮點數(shù)等），並且有固定的大小。

常見的類型包括：

• Int8Array ：8 位有符號整數(shù)
• Uint8Array ：8 位無符號整數(shù)
• Uint8ClampedArray ：用於Canvas 像素操作，值範(fàn)圍固定在0~255
• Int16Array 、 Uint16Array ：16 位整數(shù)
• Float32Array 、 Float64Array ：浮點數(shù)

它們通常配合ArrayBuffer使用， ArrayBuffer表示一塊原始內(nèi)存區(qū)域，而Typed Array 則是這塊內(nèi)存的“視圖”。

Typed Arrays 的典型用途

1. 處理圖像和像素數(shù)據(jù)（如Canvas）

當(dāng)你使用HTML5 Canvas 操作圖像像素時，瀏覽器返回的是一個ImageData對象，其中包含一個Uint8ClampedArray類型的data屬性。這個數(shù)組每個元素代表一個顏色通道（紅、綠、藍、透明度），四個一組構(gòu)成一個像素。

例如：

 const imageData = context.getImageData(0, 0, width, height);
const pixels = imageData.data; // Uint8ClampedArray

for (let i = 0; i < pixels.length; i = 4) {
  pixels[i] = 255; // 紅色增強pixels[i 1] = 0; // 綠色關(guān)閉pixels[i 2] = 0; // 藍色關(guān)閉}

這種操作方式效率高，適合實時圖像處理。

2. 音頻處理（Web Audio API）

Web Audio API 中經(jīng)常使用Float32Array來表示音頻樣本。你可以直接讀取或?qū)懭胍纛l緩衝區(qū)，進行音效合成、濾波或分析。

比如從麥克風(fēng)獲取音頻流後，可以使用AudioWorkletProcessor來訪問原始音頻數(shù)據(jù)並做處理。

3. 網(wǎng)絡(luò)通信（WebSocket 或Fetch API）

當(dāng)通過WebSocket 接收二進制數(shù)據(jù)（如游戲協(xié)議、自定義格式）時，通常會收到ArrayBuffer 。這時候需要用合適的Typed Array 視圖來解析。

舉個例子：

 socket.onmessage = function(event) {
  const buffer = event.data; // ArrayBuffer
  const view = new Uint16Array(buffer); // 把它當(dāng)作16 位整數(shù)數(shù)組來讀取console.log(view[0]); // 讀取第一個數(shù)字};

這種方式比字符串解析更高效，也更適合結(jié)構(gòu)化數(shù)據(jù)傳輸。

4. WebGL 數(shù)據(jù)傳輸

WebGL 渲染需要將頂點坐標(biāo)、顏色等數(shù)據(jù)上傳到GPU。這些數(shù)據(jù)通常以Float32Array形式組織，因為GPU 更擅長處理這類連續(xù)的原始數(shù)值。

例如創(chuàng)建一個三角形頂點數(shù)組：

 const vertices = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0, 0.5
]);

然後通過WebGL 緩衝區(qū)傳給著色器。

如何選擇合適的Typed Array 類型？

• 如果你只需要處理字節(jié)級別數(shù)據(jù)（如文件頭、網(wǎng)絡(luò)包），首選Uint8Array 。
• 圖像處理建議用Uint8ClampedArray ，避免超出範(fàn)圍的數(shù)值被錯誤處理。
• 音頻數(shù)據(jù)通常用Float32Array ，因為它支持小數(shù)且精度足夠。
• 數(shù)值計算優(yōu)先考慮Float64Array ，如果對性能要求高則改用Float32Array 。

基本上就這些。 Typed Arrays 看起來有點底層，但在處理大量數(shù)值數(shù)據(jù)時非常實用，尤其適合需要精細控制內(nèi)存和性能的場景。

以上是JavaScript中的鍵入數(shù)組是什麼？它們在哪裡使用？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！