JavaScript - Das TypedArray-Objekt

Hallo da draußen, zukünftige Codingsuperstars! ? Heute machen wir uns auf eine aufregende Reise in die Welt der TypedArrays in JavaScript. Keine Sorge, wenn du neu im Programmieren bist - ich werde dein freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Also hole dir dein Lieblingsgetränk, setze dich bequem hin, und Tauchen wir ein!

Was ist ein TypedArray?

Stell dir vor, du organisierst eine große Party (wer liebt keine gute Party, oder?). Du musst tracken, wie viele Tassen, Teller und Bestecke du hast. Das ist so, was ein TypedArray in JavaScript macht - es hilft uns, bestimmte Arten von Daten effizient zu organisieren und zu speichern.

Ein TypedArray ist eine besondere Art von Array in JavaScript, das nur Zahlen eines bestimmten Typs enthalten kann. Es ist wie separate Kästen für deine Gabeln, Löffel und Messer anstatt sie alle in einen großen Schrank zu werfen.

// Erstellen eines TypedArray von 8-Bit-Integer
const myArray = new Int8Array(5);
console.log(myArray); // Ausgabe: Int8Array(5) [0, 0, 0, 0, 0]

In diesem Beispiel haben wir ein TypedArray erstellt, das fünf 8-Bit-Integer enthalten kann. Es ist wie fünf kleine Kästen aufstellen, die jeweils eine Zahl zwischen -128 und 127 aufnehmen können.

Warum TypedArray?

Du könntest dich fragen, "Warum sollte man sich mit TypedArrays beschäftigen, wenn wir reguläre Arrays haben?" Tolle Frage! TypedArrays haben einige Superkräfte, die sie für bestimmte Situationen perfekt machen:

1. Geschwindigkeit: Sie sind schneller bei numerischen Operationen.
2. Speichereffizienz: Sie nutzen einen festen Speicherplatz.
3. Kompatibilität: Sie harmonieren gut mit binären Daten und anderen Sprachen.

Es ist wie das Benutzen eines spezialisierten Werkzeugs anstatt eines Schweizer Army Messers - manchmal braucht man einfach den perfekten Sitz!

TypedArray-Objekte

JavaScript bietet verschiedene Arten von TypedArrays an, die für unterschiedliche Zahlentypen und Größen konzipiert sind. Sehen wir uns sie in einer schönen, organisierten Tabelle an:

TypedArray	Beschreibung	Wertebereich
Int8Array	8-Bit Vorzeichen-Integer	-128 bis 127
Uint8Array	8-Bit Unzeichen-Integer	0 bis 255
Int16Array	16-Bit Vorzeichen-Integer	-32.768 bis 32.767
Uint16Array	16-Bit Unzeichen-Integer	0 bis 65.535
Int32Array	32-Bit Vorzeichen-Integer	-2.147.483.648 bis 2.147.483.647
Uint32Array	32-Bit Unzeichen-Integer	0 bis 4.294.967.295
Float32Array	32-Bit Fließkommazahl	~1.2E-38 bis ~3.4E+38
Float64Array	64-Bit Fließkommazahl	~5.0E-324 bis ~1.8E+308

Wow, das ist eine beachtliche Liste! Keine Sorge, wenn es überwältigend erscheint - wir werden mit Beispielen alles klar machen.

TypedArray-Eigenschaften

TypedArrays verfügen über einige nützliche Eigenschaften. Lassen Sie uns einen Blick darauf werfen:

1. length

Diese Eigenschaft tells uns, wie viele Elemente in unserem TypedArray sind.

const myArray = new Int16Array(3);
console.log(myArray.length); // Ausgabe: 3

2. BYTES_PER_ELEMENT

Diese Eigenschaft tells uns, wie viele Bytes jedes Element im Array belegt.

console.log(Int8Array.BYTES_PER_ELEMENT); // Ausgabe: 1
console.log(Int16Array.BYTES_PER_ELEMENT); // Ausgabe: 2

Es ist, als ob man weiß, wie groß jede Schachtel in unserem Laggersystem ist!

TypedArray-Statische Methoden

TypedArrays bieten einige eingebettete Methoden, die wir ohne Erstellung einer Instanz verwenden können. Sehen wir uns einige an:

1. TypedArray.from()

Diese Methode erstellt ein neues TypedArray von einem array-ähnlichen Objekt.

const regularArray = [1, 2, 3, 4];
const typedArray = Int8Array.from(regularArray);
console.log(typedArray); // Ausgabe: Int8Array(4) [1, 2, 3, 4]

Es ist, als ob man unseren gemischten Besteckkasten in ordentlich organisierte Kästen umwandelt!

2. TypedArray.of()

Diese Methode erstellt ein neues TypedArray mit einer variablen Anzahl von Argumenten.

const myArray = Int16Array.of(1, 2, 3, 4, 5);
console.log(myArray); // Ausgabe: Int16Array(5) [1, 2, 3, 4, 5]

Es ist, als ob man sagt: "Hier sind die Gegenstände, bitte organisiert sie für mich!"

TypedArray-Instanzmethoden

Nun schauen wir uns einige Methoden an, die wir auf unseren TypedArray-Instanzen verwenden können:

1. set()

Diese Methode ermöglicht es uns, Werte in unser TypedArray zu kopieren.

const myArray = new Int8Array(5);
myArray.set([1, 2, 3]);
console.log(myArray); // Ausgabe: Int8Array(5) [1, 2, 3, 0, 0]

Es ist, als ob man Gegenstände in unsere organisierten Kästen legt.

2. subarray()

Diese Methode gibt ein neues TypedArray zurück, das einen Abschnitt des Originals darstellt.

const originalArray = new Int8Array([1, 2, 3, 4, 5]);
const subArray = originalArray.subarray(1, 4);
console.log(subArray); // Ausgabe: Int8Array(3) [2, 3, 4]

Es ist, als ob man einige Kästen aus unserem Laggersystem für eine spezifische Aufgabe herausnimmt.

Beispiele

Lassen Sie uns all dieses Wissen mit einigen praktischen Beispielen zusammenbringen!

Beispiel 1: Erstellen und Ändern eines TypedArray

// Erstellen eines TypedArray von 8-Bit-Unzeichen-Integer
const pixelData = new Uint8Array(4);

// Setzen der RGB-Werte für einen Pixel (Rot: 255, Grün: 128, Blau: 64, Alpha: 255)
pixelData[0] = 255; // Rot
pixelData[1] = 128; // Grün
pixelData[2] = 64;  // Blau
pixelData[3] = 255; // Alpha (voll deckend)

console.log(pixelData); // Ausgabe: Uint8Array(4) [255, 128, 64, 255]

In diesem Beispiel verwenden wir ein Uint8Array, um die Farbwerte eines Pixels darzustellen. Jeder Wert liegt zwischen 0 und 255, perfekt für 8-Bit-Unzeichen-Integer!

Beispiel 2: Verwendung von TypedArrays für Leistung

const size = 1000000;

// Verwendung eines regulären Arrays
console.time('Reguläres Array');
const regularArray = new Array(size);
for (let i = 0; i < size; i++) {
regularArray[i] = i;
}
console.timeEnd('Reguläres Array');

// Verwendung eines TypedArray
console.time('TypedArray');
const typedArray = new Int32Array(size);
for (let i = 0; i < size; i++) {
typedArray[i] = i;
}
console.timeEnd('TypedArray');

Führe diesen Code aus, und du wirst wahrscheinlich sehen, dass das TypedArray schneller ist! Es ist wie das Besitzen eines gut organisierten Speichersystems im Vergleich zum Hineinwerfen alles in einen großen Haufen.

Und da habt ihr es, Leute! Wir haben die Welt der TypedArrays bereist, von der Verständigung darüber, was sie sind, bis hin zu ihrer praktischen Anwendung. Denkt daran, Übung macht den Meister, also fürchtet euch nicht, mit diesen Konzepten zu experimentieren.

Bald werdet ihr TypedArray-Zauberer sein, die ihren Code optimieren und eure Kollegen beeindrucken. Bis zum nächsten Mal, fröhliches Coden! ??‍??‍?

Credits: Image by storyset