Erfahren Sie in einem Artikel mehr über typisierte Arrays in JavaScript

Dieser Artikel führt Sie durch das typisierte Array in JavaScript, um seine Zusammensetzung, seine Unterschiede zu gewöhnlichen Arrays und seine Verwendung in der Webentwicklung zu sehen.

In der Sprache von JavaScript müssen wir alle mit Arrays vertraut genug sein, um zu wissen, dass Arrays dynamischer Natur sind und jedes JavaScript-Objekt enthalten können. Wenn Sie jedoch jemals eine andere Sprache wie C verwendet haben, sollten Sie wissen, dass Arrays nicht dynamischer Natur sind. Und Sie können in diesem Array nur bestimmte Datentypen speichern, da dies schließlich dafür sorgt, dass das Array aus Performance-Sicht effizienter ist. Allerdings machen die Dynamik von Arrays und die Diversifizierung der gespeicherten Informationstypen JavaScript-Arrays nicht wirklich ineffizient. Mithilfe der JavaScript-Engine-Optimierung ist die Ausführungsgeschwindigkeit von Arrays in JavaScript tatsächlich sehr hoch.

Da Webanwendungen immer leistungsfähiger werden, müssen wir Webanwendungen die Verarbeitung und Bearbeitung roher Binärdaten ermöglichen. JavaScript-Arrays können diese rohen Binärdaten nicht verarbeiten, daher haben wir die typisierten Arrays von JavaScript eingeführt.

Typisierte Arrays

Ein typisiertes Array ist ein Objekt, das einem Array sehr ähnlich ist, aber einen Mechanismus zum Schreiben roher Binärdaten in einen Speicherpuffer bietet. Diese Funktion wird von allen gängigen Browsern gut unterstützt und ES6 hat sie in das JavaScript-Kernframework integriert, das auch Zugriff auf Funktionen wie map(), filter() bietet usw. Array-Methode. Ich empfehle Ihnen dringend, die am Ende dieses Artikels genannten Ressourcen zu erkunden, um mehr über typisierte Arrays zu erfahren. map()、filter() 等 Array 方法。我强烈建议你浏览本文结尾处提到的资源，以更深入了解类型化数组。

组成

类型化数组由两个主要部分组成，Buffer 和 View。

缓冲区

Buffer 是 ArrayBuffer 类型的对象，表示一个数据块。此原始二进制数据块无法被单独访问或修改。你可能好奇，无法访问或修改的数据对象的能有什么用途。实际上视图是缓冲区的读写接口。

视图

View 是一个对象，允许你访问和修改存储在 ArrayBuffer 中的原始二进制内容。一般来说有两种视图。

TypedArray 对象的实例

这些类型的对象与普通数组非常相似，但是仅存储单一类型的数值数据。诸如 Int8、Uint8、Int16、Float32 就是类型化数组的数据类型。类型中的数字表示为数据类型分配的位数。例如，Int8 表示 8 位的整数。

你可以阅读 参考文档 来详细了解类型化数组的数据类型。

DataView 对象的实例

DataView 是一个低级接口，提供了一个 getter / setter API 来读取和写入任意数据到缓冲区。这很大程度上方便了我们的开发，尤其是需要在单个类型化数组中处理多种数据类型时。

使用 DataView 的另一个好处是，它可以让你控制数据的字节序 —— 类型化数组使用平台的字节序。当然如果你的程序运行在本地，这将不是问题，因为你的设备将使用与输入数组相同的字节序。在大多数情况下，你的类型化数组将为低端字节序，因为英特尔采取的是小端字节序。由于英特尔在计算机处理器中非常普遍，因此大多数时候不会出现问题。但是，如果将小端字节序编码的数据传输到使用大端字节序编码的设备，则会导致读取时候的错误，最终可能导致数据的丢失。由于 DataView

Zusammensetzung

Ein typisiertes Array besteht aus zwei Hauptteilen, Puffer und Ansicht.

Buffer

🎜🎜Buffer ist ein Objekt vom Typ ArrayBuffer, das einen Datenblock darstellt. Auf diesen rohen Binärdatenblock kann nicht einzeln zugegriffen oder dieser geändert werden. Sie fragen sich vielleicht, welchen Nutzen Datenobjekte haben können, auf die nicht zugegriffen werden kann oder die nicht geändert werden können. Tatsächlich ist die Ansicht die Lese- und Schreibschnittstelle des Puffers. 🎜🎜🎜View🎜🎜🎜View ist ein Objekt, mit dem Sie auf den in ArrayBuffer gespeicherten rohen Binärinhalt zugreifen und ihn ändern können. Im Allgemeinen gibt es zwei Ansichten. 🎜🎜🎜Instanzen von TypedArray-Objekten 🎜🎜🎜Diese Objekttypen sind gewöhnlichen Arrays sehr ähnlich, speichern jedoch nur einen einzigen Typ numerischer Daten. Beispielsweise sind Int8, Uint8, Int16, Float32 die Datentypen typisierter Arrays. Die Zahl im Typ stellt die Anzahl der für den Datentyp zugewiesenen Bits dar. Beispielsweise stellt Int8 eine 8-Bit-Ganzzahl dar. 🎜

🎜Sie können Referenzdokumentation, um mehr über die Datentypen von typed zu erfahren Arrays. 🎜

🎜🎜DataView-Objektinstanz 🎜🎜🎜DataView ist eine Low-Level-Schnittstelle, die einen Getter / Setter bereitstellt API zum Lesen und Schreiben beliebiger Daten in Puffer. Dies erleichtert unsere Entwicklung erheblich, insbesondere wenn wir mehrere Datentypen in einem einzigen typisierten Array verarbeiten müssen. 🎜🎜Ein weiterer Vorteil der Verwendung von DataView besteht darin, dass Sie damit die Endianness Ihrer Daten steuern können – typisierte Arrays nutzen die Endianness der Plattform. Wenn Ihr Programm lokal ausgeführt wird, stellt dies natürlich kein Problem dar, da Ihr Gerät dieselbe Endianness wie das Eingabearray verwendet. In den meisten Fällen handelt es sich bei Ihrem typisierten Array um Little-Endian, da Intel Little-Endian verwendet. Da Intel in Computerprozessoren weit verbreitet ist, stellt dies in den meisten Fällen kein Problem dar. Wenn jedoch Little-Endian-codierte Daten mit Big-Endian-Codierung an ein Gerät übertragen werden, kommt es beim Lesen zu Fehlern, die letztendlich zu Datenverlust führen können. Da Sie mit DataView die Endian-Richtung steuern können, können Sie diese bei Bedarf verwenden. 🎜🎜🎜Was unterscheidet sie von normalen Arrays? 🎜🎜🎜 Wie bereits erwähnt, wurden normale JavaScript-Arrays von der JavaScript-Engine optimiert. Sie müssen keine typisierten Arrays verwenden, um die Leistung zu verbessern, da dies Ihnen nicht zu viele bringt Upgrades. Es gibt jedoch einige Merkmale, die typisierte Arrays von gewöhnlichen Arrays unterscheiden, weshalb Sie sich möglicherweise für sie entscheiden. 🎜

• Ermöglicht die Verarbeitung roher Binärdaten
• Da die von ihnen verarbeiteten Datentypen begrenzt sind, ist es für Ihre Engine einfacher, typisierte Arrays zu optimieren als gewöhnliche Arrays, da die Optimierung gewöhnlicher Arrays tatsächlich ein sehr komplizierter Prozess ist.
• Es gibt keine Garantie dafür, dass gewöhnliche Arrays immer optimiert werden, da Ihre Engine aus verschiedenen Gründen entscheiden kann, nicht zu optimieren.

Verwendung in der Webentwicklung

XMLHttpRequest-API

Sie können Datenantworten in Form von ArrayBuffer basierend auf Ihrem Antworttyp erhalten. 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

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;

Fetch-API

Ähnlich wie die XMLHttpRequest-API ermöglicht Ihnen die Fetch-API auch den Empfang von Antworten in einem ArrayBuffer. Alles, was Sie tun müssen, ist die Methode arrayBuffer() in der Abruf-API-Antwort zu verwenden und Sie erhalten ein Promise, das mit ArrayBuffer aufgelöst wird.

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);
});

HTML Canvas

HTML5 Mit dem Canvas-Element können Sie dynamische 2D-Formen und Bitmap-Bilder rendern. Dieses Element fungiert lediglich als Container für Grafiken, die mit Hilfe von JavaScript gezeichnet werden.

Der 2D-Kontext von Canvas ermöglicht es Ihnen, Bitmap-Daten als Instanz von Uint8ClampedArray abzurufen. Werfen wir einen Blick auf den Beispielcode von Dr. Axel:

rrreeeWebGL

WebGL ermöglicht Ihnen das Rendern leistungsstarker interaktiver 3D- und 2D-Grafiken. Es stützt sich stark auf typisierte Arrays, da es Rohpixeldaten verarbeitet, um die erforderlichen Grafiken auf der Leinwand auszugeben.

Mehr über die Grundlagen von WebGL können Sie in

diesem Artikel

lesen.

Web Socket

Mit Web Socket können Sie rohe Binärdaten in Form von Blobs oder Array-Puffer senden und empfangen.

rrreee
• Auch wenn Anfänger möglicherweise nicht unbedingt über typisierte Arrays im Detail Bescheid wissen müssen, sind sie für den Einstieg in die fortgeschrittene und fortgeschrittene JavaScript-Entwicklung unerlässlich. Dies liegt hauptsächlich daran, dass Sie möglicherweise komplexere Anwendungen entwickeln möchten, die die Verwendung typisierter Arrays erfordern.

  Um mehr über typisierte Arrays zu erfahren, sehen Sie sich die unten angehängten Ressourcenlinks an.

  Vielen Dank fürs Lesen und viel Spaß beim Programmieren! ! Ressourcen – typed-arrays-ccfa5ae8838d
• Originalautor: Mahdhi Rezvi

  Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

  Einführung in die Programmierung
! !

Das obige ist der detaillierte Inhalt vonErfahren Sie in einem Artikel mehr über typisierte Arrays in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!