JavaScript中的類型化數組的用法

本篇內容介紹了“JavaScript中的類型化數組的用法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在 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 基礎的更多信息。

Web Socket

Web Socket 允許你以 Blob 或數組緩沖區的形式發送和接收原始二進制數據。

const socket = new WebSocket("ws://localhost:8080");
socket.binaryType = "arraybuffer";

// 監聽 message
socket.addEventListener("message", function (event) {
    const view = new DataView(event.data);
    // 處理接收數據
});

// 發送二進制數據
socket.addEventListener('open', function (event) {
    const typedArray = new Uint16Array(7);
    socket.send(typedArray.buffer);
});

盡管初學者可能不需要詳細了解類型化數組，但是當你進入中高級 JavaScript 開發的時候，它們是必不可少的。這主要是因為你可能要開發需要使用類型化數組的更復雜的應用程序。

“JavaScript中的類型化數組的用法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！