一文了解JavaScript中的類型化數組-js教程-PHP中文網

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

一文了解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 開發的時候，它們是必不可少的。這主要是因為你可能要開發需要使用類型化數組的更複雜的應用程式。

要深入了解類型化數組，請瀏覽下面附帶的資源連結。

感謝你的閱讀，祝你程式設計愉快！！