Arrays und Array-Funktionen

Was ist ein Array?

Ein Array ist eine geordnete Liste von Werten. Stell dir ein Array wie eine Reihe von Fächern vor: Jedes Fach hat eine Nummer (den Index) und enthält einen Wert.

Arrays eignen sich perfekt, wenn du mehrere zusammengehörige Daten speichern willst – zum Beispiel eine Einkaufsliste, Noten einer Klasse oder die Farben einer Webseite. In JavaScript sind Arrays ein eigener Datentyp und gehören zu den Objekten.

Du legst ein Array mit eckigen Klammern [] an:

1let farben = ["Rot", "Grün", "Blau"];
2let zahlen = [1, 2, 3, 4, 5];
3let gemischt = ["Anna", 25, true];
4
5console.log(farben);
6console.log(zahlen);
7console.log(gemischt);

Auf einzelne Elemente greifst du mit dem Index zu. Wichtig: Der Index beginnt bei 0, nicht bei 1. Du kannst Werte auch nachträglich ändern:

1let tiere = ["Hund", "Katze", "Maus"];
2
3console.log(tiere[0]); // Hund
4console.log(tiere[2]); // Maus
5
6tiere[1] = "Vogel";
7console.log(tiere);

Wichtige Array-Eigenschaften

Arrays haben einige grundlegende Eigenschaften, die du ständig brauchst. Die wichtigste ist .length – sie gibt an, wie viele Elemente im Array sind.

1let obst = ["Apfel", "Banane", "Kirsche"];
2
3console.log(obst.length);   // 3
4console.log(obst[0]);       // Apfel (erstes Element)
5console.log(obst[obst.length - 1]); // Kirsche (letztes Element)

Wichtige Array-Funktionen

JavaScript bringt viele eingebaute Methoden für Arrays mit. Sie helfen dir, Elemente hinzuzufügen, zu entfernen, zu suchen oder das Array umzuordnen.

Manche Methoden verändern das ursprüngliche Array direkt (mutieren es), andere geben ein neues Ergebnis zurück und lassen das Original unverändert. In den folgenden Abschnitten siehst du beides.

push()

push() fügt ein oder mehrere Elemente am Ende des Arrays hinzu. Das Array wird dabei verändert.

1let liste = ["A", "B"];
2
3liste.push("C");
4liste.push("D", "E");
5
6console.log(liste);

pop()

pop() entfernt das letzte Element und gibt es zurück. Das Array wird verkleinert.

1let liste = ["A", "B", "C"];
2
3let letztes = liste.pop();
4
5console.log(letztes);
6console.log(liste);

shift()

shift() entfernt das erste Element und gibt es zurück. Alle anderen Elemente rutschen einen Index nach vorne.

1let liste = ["A", "B", "C"];
2
3let erstes = liste.shift();
4
5console.log(erstes);
6console.log(liste);

unshift()

unshift() fügt ein oder mehrere Elemente am Anfang des Arrays ein.

1let liste = ["B", "C"];
2
3liste.unshift("A");
4
5console.log(liste);

includes()

includes() prüft, ob ein bestimmter Wert im Array vorkommt. Das Ergebnis ist true oder false. Das Original-Array bleibt unverändert.

1let farben = ["Rot", "Grün", "Blau"];
2
3console.log(farben.includes("Grün"));
4console.log(farben.includes("Gelb"));

indexOf()

indexOf() sucht einen Wert und gibt den Index zurück. Wird der Wert nicht gefunden, erhältst du -1.

1let tiere = ["Hund", "Katze", "Maus"];
2
3console.log(tiere.indexOf("Katze"));
4console.log(tiere.indexOf("Vogel"));

slice()

slice() schneidet einen Teil aus dem Array aus und gibt ein neues Array zurück. Das Original bleibt unverändert. Die Endposition ist optional und wird nicht mit einbezogen.

1let zahlen = [10, 20, 30, 40, 50];
2
3let teil = zahlen.slice(1, 4);
4
5console.log(teil);
6console.log(zahlen);

splice()

splice() entfernt Elemente an einer bestimmten Position und kann gleichzeitig neue einfügen. Im Gegensatz zu slice() verändert splice() das Original-Array.

Im Beispiel wird ab Index 1 ein Element entfernt (Grün) und durch Gelb ersetzt.

1let farben = ["Rot", "Grün", "Blau"];
2
3farben.splice(1, 1, "Gelb");
4
5console.log(farben);

join()

join() verbindet alle Elemente zu einem String. Standardmäßig wird mit einem Komma getrennt – du kannst aber ein eigenes Trennzeichen angeben.

1let woerter = ["Hallo", "schöne", "Welt"];
2
3let satz = woerter.join(" ");
4
5console.log(satz);

reverse()

reverse() kehrt die Reihenfolge der Elemente um. Das Array wird dabei direkt verändert.

1let zahlen = [1, 2, 3, 4];
2
3zahlen.reverse();
4
5console.log(zahlen);

sort()

sort() sortiert die Elemente. Bei Strings funktioniert das meist wie erwartet. Bei Zahlen musst du vorsichtig sein: Standardmäßig werden sie als Text sortiert – deshalb ergibt [10, 2, 30, 4] nach sort() nicht die numerische Reihenfolge.

1let namen = ["Zoe", "Anna", "Max"];
2
3namen.sort();
4
5console.log(namen);
6
7let zahlen = [10, 2, 30, 4];
8zahlen.sort();
9
10console.log(zahlen);

Häufig verwendete Array-Methoden

Diese Methoden sind besonders wichtig, wenn du mit Listen arbeitest und jedes Element einzeln bearbeiten oder filtern willst. Sie durchlaufen das Array und führen für jedes Element eine Funktion aus.

Alle folgenden Methoden geben ein neues Ergebnis zurück und lassen das ursprüngliche Array unverändert.

map()

map() erstellt ein neues Array, indem es jedes Element mit einer Funktion umwandelt. Die Länge bleibt gleich – nur die Werte ändern sich.

1let zahlen = [1, 2, 3, 4];
2
3let verdoppelt = zahlen.map(function(zahl) {
4    return zahl * 2;
5});
6
7console.log(verdoppelt);

filter()

filter() erstellt ein neues Array mit allen Elementen, die eine Bedingung erfüllen. Elemente, die die Bedingung nicht erfüllen, werden ausgelassen.

1let zahlen = [1, 2, 3, 4, 5, 6];
2
3let gerade = zahlen.filter(function(zahl) {
4    return zahl % 2 === 0;
5});
6
7console.log(gerade);

reduce()

reduce() fasst alle Elemente zu einem einzigen Wert zusammen – zum Beispiel zu einer Summe, einem Durchschnitt oder einem Text. Der zweite Parameter (0 im Beispiel) ist der Startwert.

1let zahlen = [1, 2, 3, 4];
2
3let summe = zahlen.reduce(function(ergebnis, zahl) {
4    return ergebnis + zahl;
5}, 0);
6
7console.log(summe);

find()

find() sucht das erste Element, das eine Bedingung erfüllt, und gibt es zurück. Wird nichts gefunden, ist das Ergebnis undefined.

1let produkte = [
2    { name: "Apfel", preis: 1.2 },
3    { name: "Banane", preis: 0.8 },
4    { name: "Kirsche", preis: 3.5 }
5];
6
7let guenstig = produkte.find(function(produkt) {
8    return produkt.preis < 1;
9});
10
11console.log(guenstig);

some()

some() prüft, ob mindestens ein Element eine Bedingung erfüllt. Das Ergebnis ist true oder false.

1let noten = [4, 5, 3, 6];
2
3let hatSehrGut = noten.some(function(note) {
4    return note === 1;
5});
6
7console.log(hatSehrGut);

every()

every() prüft, ob alle Elemente eine Bedingung erfüllen. Sobald ein Element die Bedingung nicht erfüllt, ist das Ergebnis false.

1let noten = [2, 3, 4, 5];
2
3let alleBestanden = noten.every(function(note) {
4    return note >= 4;
5});
6
7console.log(alleBestanden);