Kapitel 10: Arrays (Mehrere Werte speichern)

Arrays sind Datenstrukturen, die mehrere Werte in einer einzigen Variablen speichern. In diesem Kapitel lernen Sie alles über Arrays.

10.1 Array-Definition und Erstellung

Ein Array ist wie eine Liste oder ein Regal mit Fächern.

Array erstellen

// Methode 1: Array-Literal (empfohlen)
let fruechte = ["Apfel", "Banane", "Kirsche"];

// Methode 2: Array-Konstruktor
let zahlen = new Array(1, 2, 3);

// Leeres Array
let leer1 = [];
let leer2 = new Array();

Auf Array-Elemente zugreifen

let tiere = ["Hund", "Katze", "Maus"];

console.log(tiere[0]);  // "Hund" (Index 0!)
console.log(tiere[1]);  // "Katze"
console.log(tiere[2]);  // "Maus"
console.log(tiere[3]);  // undefined (nicht vorhanden)

Wichtig: Der Index beginnt immer bei 0 (nicht bei 1)!

Array-Länge

let arr = [10, 20, 30, 40, 50];
console.log(arr.length);  // 5 (Anzahl der Elemente)

10.2 Array-Elemente abrufen und ändern

Elemente abrufen (Access)

let stadt = ["Berlin", "München", "Hamburg"];

// Einzelne Elemente
console.log(stadt[0]);  // "Berlin"
console.log(stadt[1]);  // "München"

// Letztes Element
console.log(stadt[stadt.length - 1]);  // "Hamburg"

// Erstes Element
console.log(stadt[0]);  // "Berlin"

Elemente ändern (Mutate)

let farben = ["Rot", "Grün", "Blau"];

// Element ändern
farben[1] = "Gelb";
console.log(farben);  // ["Rot", "Gelb", "Blau"]

// Neues Element hinzufügen (durch Index)
farben[5] = "Lila";  // Achtung: erstellt leere Elemente!
console.log(farben);  // ["Rot", "Gelb", "Blau", empty, empty, "Lila"]

Über Array iterieren (Schleife)

let zahlen = [10, 20, 30, 40, 50];

// Methode 1: for-Schleife (klassisch)
for (let i = 0; i < zahlen.length; i++) {
    console.log(zahlen[i]);
}

// Methode 2: for...of Schleife (modern, ES6)
for (let zahl of zahlen) {
    console.log(zahl);
}

// Methode 3: forEach-Methode
zahlen.forEach(function(zahl) {
    console.log(zahl);
});

10.3 Array-Methoden (Anfänger muss lernen)

Hinzufügen und Entfernen

push() - Am Ende hinzufügen

let tiere = ["Hund", "Katze"];

tiere.push("Maus");
console.log(tiere);  // ["Hund", "Katze", "Maus"]

// Mehrere auf einmal
tiere.push("Vogel", "Fisch");
console.log(tiere);  // ["Hund", "Katze", "Maus", "Vogel", "Fisch"]

pop() - Letztes Element entfernen

let zahlen = [1, 2, 3, 4, 5];

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

unshift() - Am Anfang hinzufügen

let namen = ["Moritz", "Lisa"];

namen.unshift("Max");
console.log(namen);  // ["Max", "Moritz", "Lisa"]

shift() - Erstes Element entfernen

let namen = ["Max", "Moritz", "Lisa"];

let erster = namen.shift();
console.log(erster);  // "Max"
console.log(namen);    // ["Moritz", "Lisa"]

splice() - Elemente an beliebiger Stelle entfernen/hinzufügen

let zahlen = [1, 2, 3, 4, 5];

// Syntax: splice(startIndex, anzahlZuEntfernen, ...neueElemente)

// 2 Elemente ab Index 1 entfernen
zahlen.splice(1, 2);
console.log(zahlen);  // [1, 4, 5]

// Elemente hinzufügen (ohne etwas zu entfernen)
let buchstaben = ["a", "b", "e", "f"];
buchstaben.splice(2, 0, "c", "d");  // Bei Index 2: 0 entfernen, "c" und "d" hinzufügen
console.log(buchstaben);  // ["a", "b", "c", "d", "e", "f"]

Suchen und Prüfen

indexOf() - Index eines Elements finden

let fruechte = ["Apfel", "Banane", "Kirsche"];

console.log(fruechte.indexOf("Banane"));  // 1
console.log(fruechte.indexOf("Durian"));  // -1 (nicht gefunden)

includes() - Prüfen, ob Element vorhanden ist

let zahlen = [1, 2, 3, 4, 5];

console.log(zahlen.includes(3));   // true
console.log(zahlen.includes(10));  // false

Array durchlaufen

for Schleife (klassisch)

let tiere = ["Hund", "Katze", "Maus"];

for (let i = 0; i < tiere.length; i++) {
    console.log(i + ":", tiere[i]);
}
// Ausgabe:
// 0: Hund
// 1: Katze
// 2: Maus

for...of Schleife (ES6, empfohlen)

let stadt = ["Berlin", "München", "Hamburg"];

for (let stadt of stadt) {
    console.log(stadt);
}
// Ausgabe:
// Berlin
// München
// Hamburg

forEach() Methode

let zahlen = [10, 20, 30];

zahlen.forEach(function(zahl, index) {
    console.log(index + ":", zahl);
});
// Ausgabe:
// 0: 10
// 1: 20
// 2: 30

10.4 Praxis: Array sortieren / Daten filtern / Elemente zählen

Projekt 1: Array sortieren

// Einfaches Sortieren (Strings)
let namen = ["Zack", "Alice", "Moritz", "Bob"];
namen.sort();
console.log(namen);  // ["Alice", "Bob", "Moritz", "Zack"]

// Zahlen sortieren (Vorsicht!)
let zahlen = [10, 2, 100, 25];
zahlen.sort();  // Funktioniert nicht wie erwartet! (Sortiert als Strings)
console.log(zahlen);  // [10, 100, 2, 25] ❌

// Richtiges Zahlen-Sortieren
zahlen.sort(function(a, b) {
    return a - b;  // Aufsteigend
});
console.log(zahlen);  // [2, 10, 25, 100] ✅

// Absteigend sortieren
zahlen.sort(function(a, b) {
    return b - a;
});
console.log(zahlen);  // [100, 25, 10, 2]

Projekt 2: Daten filtern

// Filter: Nur gerade Zahlen
let zahlen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let gerade = zahlen.filter(function(zahl) {
    return zahl % 2 === 0;
});

console.log(gerade);  // [2, 4, 6, 8, 10]

// Filter: Nur passende Namen
let namen = ["Max", "Moritz", "Lisa", "Lara", "Tim"];

let namenMitL = namen.filter(function(name) {
    return name.startsWith("L");
});

console.log(namenMitL);  // ["Lisa", "Lara"]

Projekt 3: Elemente zählen

// Zählen, wie oft ein Element vorkommt
function zaehleElement(arr, gesuchtesElement) {
    let count = 0;
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === gesuchtesElement) {
            count++;
        }
    }
    return count;
}

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

// Alternative mit filter
function zaehleElement2(arr, gesuchtesElement) {
    return arr.filter(function(element) {
        return element === gesuchtesElement;
    }).length;
}

console.log(zaehleElement2(zahlen, 2));  // 3

Projekt 4: Summe und Durchschnitt berechnen

let punkte = [85, 90, 78, 92, 88];

// Summe
let summe = 0;
for (let i = 0; i < punkte.length; i++) {
    summe += punkte[i];
}
console.log("Summe:", summe);  // 433

// Durchschnitt
let durchschnitt = summe / punkte.length;
console.log("Durchschnitt:", durchschnitt);  // 86.6

// Mit forEach
let summe2 = 0;
punkte.forEach(function(punkt) {
    summe2 += punkt;
});
console.log("Summe (forEach):", summe2);  // 433

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Arrays erstellen: let arr = [1, 2, 3];
• ✅ Auf Elemente zugreifen: arr[0]
• ✅ Elemente ändern: arr[1] = "neu";
• ✅ push() / pop() - Am Ende hinzufügen/entfernen
• ✅ unshift() / shift() - Am Anfang hinzufügen/entfernen
• ✅ splice() - An beliebiger Stelle ändern
• ✅ indexOf() / includes() - Suchen
• ✅ Array durchlaufen: for, for...of, forEach()
• ✅ Sortieren, Filtern, Zählen

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir Objekte - Datenstrukturen, die Eigenschaften und Methoden haben!

---

Übung:

1. Erstellen Sie ein Array mit Ihren Lieblingsfilmen
2. Fügen Sie einen neuen Film am Ende hinzu (push)
3. Entfernen Sie den ersten Film (shift)
4. Durchlaufen Sie das Array und geben Sie alle Filme aus
5. Zählen Sie, wie oft ein bestimmter Film im Array vorkommt