JavaScript中的類型化數(shù)組的用法

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

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

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

類型化數(shù)組

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

組成

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

緩沖區(qū)

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

視圖

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

TypedArray 對象的實例

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

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

DataView 對象的實例

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

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

是什么使它們與普通數(shù)組不同

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

• 讓你能夠處理原始二進制數(shù)據(jù)

• 由于它們處理的數(shù)據(jù)類型是有限的，因此與普通數(shù)組相比，你的引擎更易優(yōu)化類型化數(shù)組，因為普通數(shù)組的優(yōu)化其實是一個非常復雜的過程。

• 不能保證普通數(shù)組永遠都能得到優(yōu)化，因為你的引擎可能因各種原因決定不進行優(yōu)化。

在 Web 開發(fā)中的用途

XMLHttpRequest API

你可以根據(jù)你的響應類型以 ArrayBuffer 形式接收數(shù)據(jù)響應。

const xhr = new XMLHttpRequest();
xhr.open('GET', exampleUrl);
xhr.responseType = 'arraybuffer';

xhr.onload = function () {
    const arrayBuffer = xhr.response;
    // 處理數(shù)據(jù)
};

xhr.send();

Fetch API

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

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

HTML Canvas

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

canvas 的 2D Context 使你可以將位圖數(shù)據(jù)作為 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 圖形。它在很大程度上依賴于類型化數(shù)組，因為它會處理原始像素數(shù)據(jù)以在畫布上輸出必要的圖形。

你可以在 這篇文章 中閱讀有關 WebGL 基礎的更多信息。

Web Socket

Web Socket 允許你以 Blob 或數(shù)組緩沖區(qū)的形式發(fā)送和接收原始二進制數(shù)據(jù)。

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

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

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

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

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