JavaScript-Arrays: geordnete Daten per Index

Ein JavaScript-Array speichert eine geordnete, ganzzahlig indizierte Sammlung von Werten. Verwende Arrays, wenn die Reihenfolge zählt, etwa für Listen, Warteschlangen oder andere Daten, bei denen die Position Bedeutung hat. Der Zugriff per Index ist unabhängig von der Array-Größe sofort verfügbar (O(1)), und length verfolgt die Größe automatisch.

JavaScript-Array-Beispiel zum Erstellen und Lesen von Daten

Ausgabe:

rot
3
[
  "rot",
  "grün",
  "blau",
  "gelb"
]

So funktioniert dieses Beispiel

1. ["rot", "grün", "blau"] erstellt mit der Literal-Schreibweise in eckigen Klammern ein Array mit drei Elementen, die Standardmethode für ein JavaScript-Array mit Startwerten.
2. farben[0] liest das erste Element. Arrays verwenden nullbasierte Indizes: Index 0 ist das erste Element, 1 das zweite und so weiter.
3. farben.length liefert die Anzahl der Elemente. Dieser Wert aktualisiert sich automatisch, wenn Elemente hinzugefügt oder entfernt werden.
4. farben.push("gelb") hängt ein Element am Ende an. Das ursprüngliche Array wird direkt verändert.

Was ist ein JavaScript-Array?

JavaScript-Arrays sind Objekte, die für numerische Indizes optimiert sind: Die Eigenschaft length aktualisiert sich automatisch beim Hinzufügen oder Entfernen von Elementen, und eingebaute Methoden wie map, filter, reduce und forEach iterieren in Index-Reihenfolge. Mit Array.isArray(value) prüfst du zuverlässig, ob ein Wert ein Array ist, da typeof [] den Wert "object" zurückgibt.

Häufige Fehler mit JavaScript-Arrays

new Array(n) verwenden, um ein Array mit einem Element zu erstellen.

Falsch:

const elemente = new Array(3); // 3 leere Slots, nicht [3]

Richtig:

const elemente = [3]; // Array mit der Zahl 3

Ein einzelnes numerisches Argument setzt length und erzeugt leere Slots, kein Element.

Erwarten, dass sparse Arrays vollständig durchlaufen werden.

Falsch:

const werte = Array(3).map((_, i) => i); // [leer × 3]

Richtig:

const werte = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

map überspringt leere Slots. Array.from erzeugt definierte Elemente, dadurch läuft der Callback für jeden Index.

Verändernde vs. nicht verändernde Array-Methoden

ES2023 hat toReversed(), toSorted(), toSpliced() und with() ergänzt, die nicht verändernden Gegenstücke zu den In-Place-Methoden. Wenn du sowohl das Original als auch die sortierte Reihenfolge brauchst, verwende toSorted() statt sort().

Performance-Hinweise

push und pop arbeiten am Ende des Arrays in O(1). shift und unshift indizieren jedes Element neu und sind deshalb O(n). In Hot Loops solltest du Front-Operationen auf großen Arrays vermeiden.

Weitere Beispiele

Array von Arrays: auf verschachtelte Daten zugreifen:

const matrix = [[1, 2], [3, 4], [5, 6]];
console.log(matrix[1][0]); // 3

Jedes Element ist selbst ein Array. Ein JavaScript-Array aus Arrays ist eine einfache Möglichkeit, ein Raster zu modellieren, und mit doppelter Indizierung [zeile][spalte] erreichst du innere Werte.

Stack mit push und pop:

const stapel = [10, 20, 30];
stapel.push(40);
console.log(stapel.at(-1)); // 40
stapel.pop();
console.log(stapel);        // [ 10, 20, 30 ]

push fügt am Ende hinzu, pop entfernt vom Ende, beide in O(1). at(-1) liest das letzte Element, ohne die Länge zu kennen.

Wann JavaScript-Arrays verwenden

• Geordnete Sammlungen, bei denen positionsbasierter Zugriff wichtig ist (Listen, Warteschlangen, Stacks).
• Jede Sequenz, die wachsen oder schrumpfen muss: push/pop für einen Stack, push/shift für eine Warteschlange.
• Gruppierte Daten als Array von Arrays (Zeilen, Spalten, Matrix).
• Verwende Arrays nicht für Schlüssel-Wert-Lookups, nutze stattdessen Map oder ein normales Objekt.
• Verwende Arrays nicht, wenn jedes Element eindeutig sein muss, nutze Set.

FAQ

Wie erstellt man ein JavaScript-Array mit Startwerten?

Nutze die Klammernotation: const farben = ["rot", "grün", "blau"]. Das ist die bevorzugte Literal-Schreibweise. Array.of(1, 2, 3) funktioniert ebenfalls, wird aber außerhalb von polymorphem Code, in dem new Array(n) mehrdeutig wäre, selten benötigt.

Welche JavaScript-Array-Methoden verändern das Original?

push, pop, shift, unshift, splice, sort, reverse und fill verändern das Array direkt. Moderne Alternativen wie toSorted, toReversed und toSpliced (ES2023) geben neue Arrays zurück, ohne das Original anzufassen.

Wie prüft man in JavaScript, ob ein Wert ein Array ist?

Rufe Array.isArray(value) auf. Das funktioniert auch über iframes und realms hinweg, im Gegensatz zu instanceof Array, das fehlschlägt, wenn das Array in einem anderen Ausführungskontext erstellt wurde.