Arrays erstellen und nutzen
Was sind Arrays?
Ein Array ist eine geordnete Liste von Werten. Es eignet sich immer dann, wenn du mehrere zusammengehörige Informationen speichern möchtest.
Statt für jede Lieblingsfarbe eine eigene Variable anzulegen:
const farbe1 = "Rot";
const farbe2 = "Blau";
const farbe3 = "Grün";
kannst du alle Farben in einem Array zusammenfassen:
const farben = ["Rot", "Blau", "Grün"];
Ein Array speichert seine Werte zwischen eckigen Klammern []. Die einzelnen Einträge werden durch Kommas getrennt.
const tiere = ["Hund", "Katze", "Kaninchen"];
const punkte = [12, 8, 20, 15];
const antworten = [true, false, true];
In einem Array können unterschiedliche Datentypen stehen:
const gemischteWerte = ["Hallo", 42, true];
Für übersichtlichen Code ist es aber meistens sinnvoll, ähnliche Werte gemeinsam zu speichern: also zum Beispiel nur Namen, nur Zahlen oder nur Wahrheitswerte.
Einträge über ihren Index auswählen
Jeder Eintrag in einem Array besitzt eine feste Position. Diese Position heißt Index.
Wichtig: Der erste Eintrag hat immer den Index 0, nicht 1.
const staedte = ["Berlin", "Hamburg", "Köln"];
| Index | Wert |
|---|---|
| 0 | "Berlin" |
| 1 | "Hamburg" |
| 2 | "Köln" |
Du greifst mit eckigen Klammern auf einen bestimmten Eintrag zu:
const staedte = ["Berlin", "Hamburg", "Köln"];
console.log(staedte[0]); // Berlin
console.log(staedte[1]); // Hamburg
console.log(staedte[2]); // Köln
Wenn du einen Index verwendest, der nicht existiert, erhältst du undefined.
console.log(staedte[5]); // undefined
💡 Merke: Bei Arrays beginnt das Zählen bei
0. Das ist anfangs ungewohnt, aber in JavaScript und vielen anderen Programmiersprachen üblich.
Die Anzahl der Einträge ermitteln
Mit der Eigenschaft .length findest du heraus, wie viele Werte ein Array enthält.
const einkaufsliste = ["Brot", "Milch", "Äpfel"];
console.log(einkaufsliste.length); // 3
.length ist keine Funktion. Deshalb stehen hier keine runden Klammern dahinter.
const zahlen = [4, 8, 15, 16];
console.log(zahlen.length); // 4
Die Länge eines Arrays ist besonders praktisch, wenn du mit Schleifen arbeitest.
Einträge verändern
Ein Array, das mit const erstellt wurde, darf verändert werden. Du kannst also einzelne Werte ersetzen.
const tage = ["Montag", "Dienstag", "Mittwoch"];
tage[1] = "Dienstagabend";
console.log(tage);
Ausgabe:
["Montag", "Dienstagabend", "Mittwoch"]
const bedeutet hier: Die Variable tage darf nicht auf ein komplett neues Array zeigen. Der Inhalt des vorhandenen Arrays kann jedoch geändert werden.
const tage = ["Montag", "Dienstag"];
// Das ist erlaubt:
tage[0] = "Sonntag";
// Das führt zu einem Fehler:
tage = ["Mittwoch", "Donnerstag"];
Wenn du das Array später vollständig ersetzen möchtest, verwendest du let.
let aufgaben = ["Lernen", "Aufräumen"];
aufgaben = ["Einkaufen", "Kochen"];
console.log(aufgaben);
Werte am Ende hinzufügen: push()
Mit der Methode .push() fügst du einen oder mehrere Werte am Ende eines Arrays hinzu.
const musikrichtungen = ["Rock", "Pop"];
musikrichtungen.push("Jazz");
console.log(musikrichtungen);
Ausgabe:
["Rock", "Pop", "Jazz"]
Du kannst auch mehrere Werte gleichzeitig hinzufügen:
const zahlen = [1, 2, 3];
zahlen.push(4, 5);
console.log(zahlen);
Ausgabe:
[1, 2, 3, 4, 5]
.push() verändert das vorhandene Array direkt.
Den letzten Wert entfernen: pop()
Mit .pop() entfernst du den letzten Eintrag eines Arrays.
const warteschlange = ["Mia", "Noah", "Emma"];
warteschlange.pop();
console.log(warteschlange);
Ausgabe:
["Mia", "Noah"]
Außerdem gibt .pop() den entfernten Wert zurück. Das ist nützlich, wenn du ihn noch weiterverwenden möchtest.
const warteschlange = ["Mia", "Noah", "Emma"];
const entferntePerson = warteschlange.pop();
console.log(entferntePerson); // Emma
console.log(warteschlange); // ["Mia", "Noah"]
Werte am Anfang hinzufügen und entfernen
Manchmal soll ein Wert nicht am Ende, sondern am Anfang eines Arrays stehen.
Mit unshift() vorne hinzufügen
const plaetze = ["Mitte", "Hinten"];
plaetze.unshift("Vorne");
console.log(plaetze);
Ausgabe:
["Vorne", "Mitte", "Hinten"]
Mit shift() den ersten Wert entfernen
const plaetze = ["Vorne", "Mitte", "Hinten"];
const ersterPlatz = plaetze.shift();
console.log(ersterPlatz); // Vorne
console.log(plaetze); // ["Mitte", "Hinten"]
| Methode | Aufgabe |
|---|---|
.push() |
Wert am Ende hinzufügen |
.pop() |
Letzten Wert entfernen |
.unshift() |
Wert am Anfang hinzufügen |
.shift() |
Ersten Wert entfernen |
Arrays mit einer for-Schleife durchlaufen
Arrays werden sehr häufig mit einer for-Schleife verarbeitet. So kannst du jeden Eintrag nacheinander ausgeben.
const obst = ["Apfel", "Banane", "Birne"];
for (let index = 0; index < obst.length; index++) {
console.log(obst[index]);
}
Ausgabe:
Apfel
Banane
Birne
Schauen wir uns die Schleife genauer an:
for (let index = 0; index < obst.length; index++) {
console.log(obst[index]);
}
let index = 0: Die Schleife beginnt beim ersten Index.index < obst.length: Sie läuft nur, solange ein Eintrag vorhanden ist.index++: Nach jedem Durchlauf wird der Index um1erhöht.obst[index]: Der aktuelle Wert wird aus dem Array gelesen.
Die Bedingung index < obst.length ist wichtig. Bei drei Werten sind die gültigen Indizes 0, 1 und 2. Der Wert 3 wäre bereits außerhalb des Arrays.
Ein praktisches Beispiel: Punkteliste auswerten
Stell dir vor, du speicherst die Punkte einer Person in mehreren Runden.
const punkte = [12, 8, 15, 10];
let gesamtPunkte = 0;
for (let index = 0; index < punkte.length; index++) {
gesamtPunkte = gesamtPunkte + punkte[index];
}
console.log("Gesamtpunkte: " + gesamtPunkte);
Ausgabe:
Gesamtpunkte: 45
Die Variable gesamtPunkte startet mit 0. Dann wird in jedem Schleifendurchlauf der aktuelle Wert aus dem Array addiert.
Du kannst auch prüfen, ob ein bestimmter Punktwert erreicht wurde:
const punkte = [12, 8, 15, 10];
for (let index = 0; index < punkte.length; index++) {
if (punkte[index] >= 15) {
console.log("Sehr gutes Ergebnis: " + punkte[index]);
}
}
Ausgabe:
Sehr gutes Ergebnis: 15
Mehrdimensionale Arrays kurz kennengelernt
Ein Array kann selbst weitere Arrays enthalten. Das nennt man ein mehrdimensionales Array.
const sitzplan = [
["Anna", "Ben"],
["Clara", "David"]
];
Der erste Wert enthält ein Array:
console.log(sitzplan[0]);
Ausgabe:
["Anna", "Ben"]
Um auf einen einzelnen Namen zuzugreifen, verwendest du zwei Indizes:
console.log(sitzplan[0][1]); // Ben
console.log(sitzplan[1][0]); // Clara
Für den Einstieg reichen einfache Arrays meistens aus. Mehrdimensionale Arrays begegnen dir später zum Beispiel bei Spielbrettern, Tabellen oder Stundenplänen.
Häufige Fehler
Beim Index bei 1 beginnen
const farben = ["Rot", "Blau", "Grün"];
console.log(farben[1]); // Blau
Wer den ersten Wert erwartet, wird überrascht sein: farben[1] ist bereits der zweite Eintrag. Der erste Eintrag ist farben[0].
.length mit Klammern schreiben
const namen = ["Lea", "Tom"];
console.log(namen.length());
Das führt zu einem Fehler. Richtig ist:
console.log(namen.length);
Einen nicht vorhandenen Index verwenden
const monate = ["Januar", "Februar"];
console.log(monate[2]); // undefined
Das Array hat nur die Indizes 0 und 1.
Bei Schleifen <= verwenden
const namen = ["Lea", "Tom"];
for (let index = 0; index <= namen.length; index++) {
console.log(namen[index]);
}
Diese Schleife gibt am Ende zusätzlich undefined aus. Verwende stattdessen <:
for (let index = 0; index < namen.length; index++) {
console.log(namen[index]);
}
Übung: Eine einfache To-do-Liste
Erstelle ein Array mit drei Aufgaben. Gib zunächst alle Aufgaben aus. Füge dann eine weitere Aufgabe hinzu und entferne anschließend die erste Aufgabe.
Aufgabe:
- Erstelle ein Array namens
aufgaben. - Speichere mindestens drei Texte darin.
- Füge mit
.push()eine Aufgabe hinzu. - Entferne mit
.shift()die erste Aufgabe. - Gib das fertige Array in der Konsole aus.
Eine mögliche Lösung:
const aufgaben = ["Hausaufgaben machen", "Zimmer aufräumen", "Einkaufen"];
aufgaben.push("E-Mail schreiben");
aufgaben.shift();
console.log(aufgaben);
Ausgabe:
["Zimmer aufräumen", "Einkaufen", "E-Mail schreiben"]
Übung: Namen begrüßen
Erstelle ein Array mit mehreren Namen. Schreibe eine for-Schleife, die jede Person einzeln begrüßt.
Eine mögliche Lösung:
const namen = ["Aylin", "Jonas", "Mara"];
for (let index = 0; index < namen.length; index++) {
console.log("Hallo, " + namen[index] + "!");
}
Ausgabe:
Hallo, Aylin!
Hallo, Jonas!
Hallo, Mara!
Das Wichtigste auf einen Blick
- Arrays speichern mehrere Werte in einer geordneten Liste.
- Arrays werden mit eckigen Klammern erstellt:
["Wert 1", "Wert 2"]. - Der erste Eintrag hat den Index
0. - Mit
.lengtherhältst du die Anzahl der Einträge. - Mit
.push()und.pop()bearbeitest du das Ende eines Arrays. - Mit
.unshift()und.shift()bearbeitest du den Anfang. - Eine
for-Schleife hilft dir, alle Werte eines Arrays nacheinander zu verarbeiten.
Im nächsten Abschnitt lernst du Objekte kennen. Während Arrays mehrere Werte in einer Reihenfolge speichern, helfen Objekte dabei, Informationen mit klaren Eigenschaften wie Name, Alter oder Farbe zu ordnen.