JavaScript: Arrays

Kurz: Ein Array ist eine geordnete Liste von Werten. Die Elemente sind von 0 an nummeriert (Index). Arrays können beliebige Typen mischen.

Teil des Kurses JavaScript

Kapitel 13 von 40 im Kurs JavaScript (Abschnitt „Datenstrukturen“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Ein Array ist eine geordnete Liste von Werten. Die Elemente sind von 0 an nummeriert (Index). Arrays können beliebige Typen mischen.

const farben = ["rot", "grün", "blau"];
console.log(farben[0], farben[2], farben[5]);
console.log(farben.length);
farben[1] = "gelb";
farben[3] = "lila";
console.log(farben);
console.log(farben.at(-1));     // letztes Element

Ausgabe:

rot blau undefined
3
[ 'rot', 'gelb', 'blau', 'lila' ]
lila

Ein Index außerhalb gibt undefined. Mit at(-1) greifst du vom Ende zu.

Elemente hinzufügen und entfernen

Methode	Wirkung	Rückgabe
push(x)	hinten anhängen	neue Länge
pop()	hinten entfernen	das Element
unshift(x)	vorn einfügen	neue Länge
shift()	vorn entfernen	das Element
splice(i, n, ...neu)	ab i n Elemente entfernen/einfügen	entfernte Elemente
slice(a, b)	Teilkopie (von a bis vor b)	neues Array
concat(...)	verbinden	neues Array

const a = [1, 2, 3];
a.push(4, 5);
console.log(a, a.pop(), a.shift(), a);
a.unshift(0);
a.splice(2, 1, "x", "y");
console.log(a);
console.log([1, 2, 3, 4].slice(1, 3), [1, 2].concat([3], [4, 5]));

Ausgabe:

[ 2, 3, 4 ] 5 1 [ 2, 3, 4 ]
[ 0, 2, 'x', 'y', 4 ]
[ 2, 3 ] [ 1, 2, 3, 4, 5 ]

Achtung

push, pop, splice & Co. verändern das Array. slice, concat und Spread erzeugen neue Arrays.

Suchen

const z = [5, 12, 8, 130, 44];
console.log(z.indexOf(8), z.indexOf(99));
console.log(z.includes(130));
console.log(z.find(x => x > 10), z.findIndex(x => x > 10));
console.log(z.findLast(x => x < 10));
console.log(z.some(x => x > 100), z.every(x => x > 4));

Ausgabe:

2 -1
true
12 1
8
true true

Sortieren und Umkehren

sort() sortiert standardmäßig als Text. Für Zahlen brauchst du eine Vergleichsfunktion:

const z = [10, 9, 1, 100];
console.log([...z].sort());
console.log([...z].sort((a, b) => a - b));
console.log([...z].sort((a, b) => b - a));
console.log([...z].reverse());
console.log(z.toSorted((a, b) => a - b), z);    // ohne das Original zu ändern

Ausgabe:

[ 1, 10, 100, 9 ]
[ 1, 9, 10, 100 ]
[ 100, 10, 9, 1 ]
[ 100, 1, 9, 10 ]
[ 1, 9, 10, 100 ] [ 10, 9, 1, 100 ]

sort() und reverse() ändern das Array selbst. Die neueren toSorted(), toReversed() und with() liefern Kopien.

Kopieren und Spread

Eine Zuweisung kopiert nur den Verweis:

const a = [1, 2, 3];
const b = a;               // dasselbe Array
const c = [...a];          // Kopie
b.push(4);
console.log(a, c);
console.log(structuredClone([[1], [2]]));   // tiefe Kopie

Ausgabe:

[ 1, 2, 3, 4 ] [ 1, 2, 3 ]
[ [ 1 ], [ 2 ] ]

Mehrdimensionale Arrays

const raster = [[1, 2, 3], [4, 5, 6]];
console.log(raster[1][2]);
for (const zeile of raster) console.log(zeile.join(" | "));
console.log(raster.flat(), [[1, [2]], 3].flat(Infinity));

Ausgabe:

6
1 | 2 | 3
4 | 5 | 6
[ 1, 2, 3, 4, 5, 6 ] [ 1, 2, 3 ]

Arrays erzeugen

console.log(Array.from({ length: 5 }, (_, i) => i * i));
console.log(Array.from("abc"), Array.of(7));
console.log(new Array(3).fill(0));
console.log([..."hallo"].reverse().join(""));
console.log(Array.isArray([]), Array.isArray({}));

Ausgabe:

[ 0, 1, 4, 9, 16 ]
[ 'a', 'b', 'c' ] [ 7 ]
[ 0, 0, 0 ]
ollah
true false

Merke

• Index beginnt bei 0; length ist die Anzahl; at(-1) ist das letzte Element
• push/pop arbeiten hinten, unshift/shift vorn, splice in der Mitte
• slice, Spread und structuredClone kopieren
• sort() ohne Vergleichsfunktion sortiert Text, für Zahlen (a, b) => a - b
• includes, find, some, every zum Suchen und Prüfen

Übungsaufgabe

Lege eine Liste von fünf Zahlen an, sortiere sie absteigend (ohne die Originalliste zu ändern) und gib das größte Element sowie die Summe aus.

Quiz zur Selbstkontrolle

Welchen Index hat das erste Element?

• 0 (richtig)
• 1
• -1
• Kommt auf das Array an

.sort()?

• [1, 10, 9] (als Text sortiert) (richtig)
• [1, 9, 10]
• [10, 9, 1]
• [9, 10, 1]

Wie kopierst du ein Array flach?

• […arr] (richtig)
• const b = arr
• arr.copy
• arr.clone

Weiter im Kurs

Zurück: Gültigkeitsbereich und Closures

Weiter: map, filter, reduce und Co.

Alle Kapitel: JavaScript im Überblick