TypedArray in JavaScript

Dieser Artikel erklärt TypedArray in JavaScript.

Wir werden das grundlegende Konzept von TypedArray, die einzelnen Typen, deren Verwendung und spezifische Anwendungsfälle im Detail erklären.

YouTube Video

TypedArray in JavaScript

TypedArray in JavaScript ist ein Objekt zur effizienten Verarbeitung von gepufferten Binärdaten. TypedArray weist Speicher basierend auf spezifischen Datentypen zu und manipuliert diesen. Im Gegensatz zu regulären Arrays kann TypedArray nur Binärdaten fester Größe enthalten und keine beliebigen Datentypen.

Die Grundstruktur von TypedArray

Die Hauptbestandteile eines TypedArray sind der ArrayBuffer und das TypedArray selbst.

• ArrayBuffer: Ein Puffer mit fester Größe, der Binärdaten im Speicher zuweist. Dieser Puffer ist lediglich ein Datenbereich und kann nicht direkt gelesen oder beschrieben werden.
• TypedArray: Ein Wrapper-Objekt, das einen bestimmten Datentyp auf den Puffer anwendet und den Datenzugriff und die Datenmanipulation ermöglicht.

Grundlegendes Anwendungsbeispiel

Das Folgende ist ein Beispiel für die Erstellung eines ArrayBuffer und die anschließende Erstellung eines TypedArray darauf basierend.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• In diesem Beispiel wird ein ArrayBuffer erstellt und anschließend ein Uint8Array darauf basierend erzeugt. Jedes Element wird als 8-Bit-Integer ohne Vorzeichen behandelt und speichert Werte nur innerhalb des angegebenen Bereichs.

Arten von TypedArray

Es gibt verschiedene Typen von TypedArray für jeden Datentyp. Die wichtigsten sind wie folgt.

Diese TypedArrays sind speichereffizient und eignen sich hervorragend für die Verarbeitung großer Datenmengen.

Manipulation von TypedArrays

Auf Daten in einem TypedArray kann mit Indizes wie bei einem normalen Array zugegriffen werden, jedoch stehen auch mehrere spezielle Methoden zur Verfügung.

Werte setzen

In einem TypedArray können Sie mit der Methode set mehrere Werte gleichzeitig zuweisen.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Dieser Code verwendet die Methode set, um mehreren Werten gleichzeitig einer Int16Array zuzuweisen, und zeigt jedes Element in der Konsole an.

Ein Teilarray abrufen

Um einen Teil eines TypedArray als Subarray zu erhalten, verwenden Sie die Methode subarray. Dies verweist auf denselben Puffer wie das ursprüngliche TypedArray.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Dieser Code ruft einen bestimmten Bereich von Elementen aus einer Int16Array mit der Methode subarray ab und zeigt das Subarray in der Konsole an.

Puffer kopieren

Der Puffer eines TypedArray kann auch in ein anderes TypedArray kopiert werden. Mit der Methode set können Sie ab einer bestimmten Position kopieren.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Dieser Code kopiert den Inhalt eines Uint8Array mit der Methode set in ein anderes Array und zeigt das kopierte Array in der Konsole an.

DataView verwenden

Während ein TypedArray Puffer mit einem festen Datentyp verarbeitet, ist DataView eine Schnittstelle, die eine flexible Bearbeitung binärer Daten mit beliebigen Offsets und Datentypen ermöglicht. Dadurch können verschiedene Typen im selben Puffer gemischt werden.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Dieser Code verwendet ein DataView, um verschiedene Datentypen – 32-Bit-Ganzzahlen und 32-Bit-Gleitkommazahlen – im selben Puffer zu schreiben und überprüft die Ergebnisse.

• DataView bietet mehr Flexibilität beim Datenzugriff als TypedArray und ist besonders nützlich bei der Arbeit mit Dateien im Binärformat oder Netzwerkprotokollen.

Anwendungsfälle von TypedArray

TypedArray wird hauptsächlich für die effiziente Verarbeitung großer Mengen binärer Daten verwendet. Zu den konkreten Anwendungsfällen gehören die folgenden:.

Bildverarbeitung

TypedArray wird bei der Bearbeitung von Pixelinformationen von Bilddaten verwendet. Mit einem Uint8Array können Sie die RGBA-Werte jedes Pixels speichern und Bildbearbeitungs- und Verarbeitungsaufgaben durchführen.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Dieser Code erstellt Bilddaten mit einer Breite von 100 und einer Höhe von 100 im RGBA-Format mithilfe eines Uint8Array und setzt alle Pixel auf Rot.

Schnittstelle zu WebAssembly

TypedArray wird für den Austausch von Binärdaten zwischen JavaScript und WebAssembly verwendet. Durch das Teilen des Speicherbereichs von JavaScript und WebAssembly mittels ArrayBuffer ist ein schneller Datenaustausch möglich.

Bearbeitung von Audio- und Videodaten

TypedArray spielt eine wichtige Rolle bei der Verarbeitung von Audio und Video. Sie können Audiowellenformen in einem Float32Array speichern, um Wiedergabe und Verarbeitung durchzuführen.

Fazit

TypedArray ist ein leistungsstarkes Werkzeug zur effizienten Verarbeitung großer Mengen an Binärdaten. Es ist besonders nützlich in leistungsrelevanten Anwendungen wie der Bildverarbeitung, WebAssembly und der Audio-/Videoverarbeitung. TypedArray hat eine API, die normalen Arrays ähnelt, jedoch gibt es Einschränkungen bezüglich Speicherverbrauch und Datentypen, sodass eine korrekte Differenzierung in der Verwendung erforderlich ist.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video