本篇文章帶大家來將一下JavaScript中的類型化數組，看看它的組成、與普通數組不同，以及在Web開發中的用途。

在 JavaScript 這門語言中，我們所有人都必須對數組足夠熟悉，知曉數組本質上是動態的，并且可以容納任何 JavaScript 對象。不過，如果你曾經使用過類似于 C 語言這樣的其他語言，你應該知道其數組本質上不是動態的。而且你只能在該數組中存儲特定的數據類型，畢竟從性能角度來看，這可以確保數組效率更高。但數組的動態化與存儲信息類型的多樣化其實并沒有使 JavaScript 數組效率低下。在 JavaScript 引擎優化的幫助下，JavaScript 中數組的執行速度其實非常快。

隨著 Web 應用程序功能越來越強大，我們開始需要讓 Web 應用程序處理和操縱原始二進制數據。JavaScript 數組無法處理這些原始二進制數據，也因此我們引入了 JavaScript 的類型化數組。

類型化數組

類型化數組是與數組非常相似的對象，但是它提供了一種將原始二進制數據寫入內存緩沖區的機制。所有主要瀏覽器均很好地支持此功能，并且 ES6 已將其集成到 JavaScript 核心框架中，也可以訪問諸如 map()、filter() 等 Array 方法。我強烈建議你瀏覽本文結尾處提到的資源，以更深入了解類型化數組。

組成

類型化數組由兩個主要部分組成，Buffer 和 View。

緩沖區

Buffer 是 ArrayBuffer 類型的對象，表示一個數據塊。此原始二進制數據塊無法被單獨訪問或修改。你可能好奇，無法訪問或修改的數據對象的能有什么用途。實際上視圖是緩沖區的讀寫接口。

視圖

View 是一個對象，允許你訪問和修改存儲在 ArrayBuffer 中的原始二進制內容。一般來說有兩種視圖。

TypedArray 對象的實例

這些類型的對象與普通數組非常相似，但是僅存儲單一類型的數值數據。諸如 Int8、Uint8、Int16、Float32 就是類型化數組的數據類型。類型中的數字表示為數據類型分配的位數。例如，Int8 表示 8 位的整數。

你可以閱讀 參考文檔 來詳細了解類型化數組的數據類型。

DataView 對象的實例

DataView 是一個低級接口，提供了一個 getter / setter API 來讀取和寫入任意數據到緩沖區。這很大程度上方便了我們的開發，尤其是需要在單個類型化數組中處理多種數據類型時。

使用 DataView 的另一個好處是，它可以讓你控制數據的字節序 —— 類型化數組使用平臺的字節序。當然如果你的程序運行在本地，這將不是問題，因為你的設備將使用與輸入數組相同的字節序。在大多數情況下，你的類型化數組將為低端字節序，因為英特爾采取的是小端字節序。由于英特爾在計算機處理器中非常普遍，因此大多數時候不會出現問題。但是，如果將小端字節序編碼的數據傳輸到使用大端字節序編碼的設備，則會導致讀取時候的錯誤，最終可能導致數據的丟失。由于 DataView 使你可以控制字節序的方向，因此你可以在必要時使用它。

是什么使它們與普通數組不同

如前所述，普通的 JavaScript 數組已通過 JavaScript 引擎進行了優化，你沒必要為了提升性能而使用類型化數組，因為這不會給你帶來太多升級。但是有些特性使類型化數組不同于普通數組，這才可能是你選擇它們的原因。

• 讓你能夠處理原始二進制數據
• 由于它們處理的數據類型是有限的，因此與普通數組相比，你的引擎更易優化類型化數組，因為普通數組的優化其實是一個非常復雜的過程。
• 不能保證普通數組永遠都能得到優化，因為你的引擎可能因各種原因決定不進行優化。

在 Web 開發中的用途

XMLHttpRequest API

你可以根據你的響應類型以 ArrayBuffer 形式接收數據響應。

const xhr = new XMLHttpRequest(); xhr.open('GET', exampleUrl); xhr.responseType = 'arraybuffer';  xhr.onload = function () {     const arrayBuffer = xhr.response;     // 處理數據 };  xhr.send();

Fetch API

類似于 XMLHttpRequest API，Fetch API 還允許你在 ArrayBuffer 中接收響應。你只需在 fetch API 響應中使用 arrayBuffer() 方法，你就能夠收到一個使用 ArrayBuffer 解析的 Promise。

fetch(url) .then(response => response.arrayBuffer()) .then(arrayBuffer => {    // 處理數據 });

HTML Canvas

HTML5 Canvas 元素使你可以渲染動態的 2D 形狀和位圖圖像。該元素僅充當圖形的容器，而圖形則是在 JavaScript 的幫助下繪制。

canvas 的 2D Context 使你可以將位圖數據作為 Uint8ClampedArray 的實例進行檢索。讓我們看一下 Axel 博士提供的示例代碼：

const canvas = document.getElementById('my_canvas'); const context = canvas.getContext('2d'); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const uint8ClampedArray = imageData.data;

WebGL

WebGL 允許你渲染高性能的交互式 3D 和 2D 圖形。它在很大程度上依賴于類型化數組，因為它會處理原始像素數據以在畫布上輸出必要的圖形。

你可以在 這篇文章 中閱讀有關 WebGL 基礎的