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

十年的呼蘭網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整呼蘭建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“呼蘭網(wǎng)站設(shè)計(jì)”,“呼蘭網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

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

類型化數(shù)組

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

組成

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

緩沖區(qū)

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

視圖

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

TypedArray 對(duì)象的實(shí)例

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

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

DataView 對(duì)象的實(shí)例

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

使用 DataView 的另一個(gè)好處是，它可以讓你控制數(shù)據(jù)的字節(jié)序 —— 類型化數(shù)組使用平臺(tái)的字節(jié)序。當(dāng)然如果你的程序運(yùn)行在本地，這將不是問題，因?yàn)槟愕脑O(shè)備將使用與輸入數(shù)組相同的字節(jié)序。在大多數(shù)情況下，你的類型化數(shù)組將為低端字節(jié)序，因?yàn)橛⑻貭柌扇〉氖切《俗止?jié)序。由于英特爾在計(jì)算機(jī)處理器中非常普遍，因此大多數(shù)時(shí)候不會(huì)出現(xiàn)問題。但是，如果將小端字節(jié)序編碼的數(shù)據(jù)傳輸?shù)绞褂么蠖俗止?jié)序編碼的設(shè)備，則會(huì)導(dǎo)致讀取時(shí)候的錯(cuò)誤，最終可能導(dǎo)致數(shù)據(jù)的丟失。由于 DataView 使你可以控制字節(jié)序的方向，因此你可以在必要時(shí)使用它。

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

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

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

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

• 不能保證普通數(shù)組永遠(yuǎn)都能得到優(yōu)化，因?yàn)槟愕囊婵赡芤蚋鞣N原因決定不進(jìn)行優(yōu)化。

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

XMLHttpRequest API

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

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 中接收響應(yīng)。你只需在 fetch API 響應(yīng)中使用 arrayBuffer() 方法，你就能夠收到一個(gè)使用 ArrayBuffer 解析的 Promise。

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

HTML Canvas

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

canvas 的 2D Context 使你可以將位圖數(shù)據(jù)作為 Uint8ClampedArray 的實(shí)例進(jìn)行檢索。讓我們看一下 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ù)組，因?yàn)樗鼤?huì)處理原始像素?cái)?shù)據(jù)以在畫布上輸出必要的圖形。

你可以在 這篇文章 中閱讀有關(guān) WebGL 基礎(chǔ)的更多信息。

Web Socket

Web Socket 允許你以 Blob 或數(shù)組緩沖區(qū)的形式發(fā)送和接收原始二進(jìn)制數(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ā)送二進(jìn)制數(shù)據(jù)
socket.addEventListener('open', function (event) {
    const typedArray = new Uint16Array(7);
    socket.send(typedArray.buffer);
});

盡管初學(xué)者可能不需要詳細(xì)了解類型化數(shù)組，但是當(dāng)你進(jìn)入中高級(jí) JavaScript 開發(fā)的時(shí)候，它們是必不可少的。這主要是因?yàn)槟憧赡芤_發(fā)需要使用類型化數(shù)組的更復(fù)雜的應(yīng)用程序。

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

本文題目：JavaScript中的類型化數(shù)組的用法
文章源于：http://www.chinadenli.net/article16/pejsgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、企業(yè)網(wǎng)站制作、Google、網(wǎng)站改版、ChatGPT、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)