Lernfabrik

📦 Was ist ein Array?

Ein Array ist eine spezielle Variable, die mehrere Werte gleichzeitig speichern kann – ähnlich wie eine Einkaufsliste oder eine Tabelle mit vielen Einträgen.

🔑 Wozu braucht man Arrays?

💡 Einfache Analogie:

Stell dir ein Array vor wie eine Parkreihe mit nummerierten Parkplätzen (Index 0, 1, 2, ...). Auf jedem Parkplatz kann ein Auto (Wert) stehen. Man kann auf jeden Parkplatz direkt zugreifen, indem man seine Nummer (Index) kennt.

💡 Merke: Arrays sind in der Programmierung unverzichtbar für die Verarbeitung von Datenmengen. Sie sind die Grundlage für viele Anwendungen – von einfachen To-Do-Listen bis zu komplexen Datenbankabfragen.

Einführung in JavaScript Arrays

In diesem Lernsnack lernst du, wie du mit Arrays in JavaScript arbeitest. Arrays sind Container für mehrere Werte und werden in der Praxis ständig verwendet – zum Beispiel für Listen, Tabellen, Produktkataloge oder Messdaten.

📌 Deklaration und Initialisierung

Arrays werden in JavaScript deklariert und initialisiert, indem Sie eckige Klammern [] verwenden: 

// Ein Array mit 5 Zahlen
var meinArray = [1, 2, 3, 4, 5];

// Ein Array mit verschiedenen Datentypen
var gemischtesArray = ["Hallo", 42, true, 3.14];
Deklaration eines Arrays

🔍 Zugriff auf Elemente

Man kann auf die Elemente eines Arrays mithilfe ihres Index zugreifen. JavaScript verwendet eine nullbasierte Indexierung (das erste Element hat den Index 0): 

// Zugriff auf das erste Element (Index 0)
var erstesElement = meinArray[0]; // Gibt 1 zurück

// Zugriff auf das letzte Element
var letztesElement = meinArray[meinArray.length - 1]; // Gibt 5 zurück

📏 Länge eines Arrays

Die Anzahl der Elemente in einem Array kann mithilfe der Eigenschaft length abgerufen werden: 

var anzahlElemente = meinArray.length; // Gibt 5 zurück
console.log("Das Array hat " + anzahlElemente + " Elemente");

🔄 Durchlaufen eines Arrays

Schleifen ermöglichen es, die Elemente eines Arrays nacheinander zu durchlaufen und Operationen auf jedem Element auszuführen: 

// FOR-Schleife: Alle Elemente aufsummieren
var summe = 0;
for (var i = 0; i < meinArray.length; i++) {
    summe += meinArray[i];
}
console.log("Summe: " + summe); // Gibt 15 aus

// WHILE-Schleife: Alle Elemente ausgeben
var j = 0;
while (j < meinArray.length) {
    console.log("Element " + j + ": " + meinArray[j]);
    j++;
}

➕ Hinzufügen und Entfernen von Elementen

Elemente können am Ende eines Arrays hinzugefügt oder entfernt werden: 

// Element am Ende hinzufügen
meinArray.push(6); // Fügt 6 am Ende hinzu

// Letztes Element entfernen
meinArray.pop(); // Entfernt das letzte Element

// Element am Anfang hinzufügen
meinArray.unshift(0); // Fügt 0 am Anfang hinzu

// Erstes Element entfernen
meinArray.shift(); // Entfernt das erste Element

📝 Zusammenfassung der wichtigsten Array-Operationen

// ============================================
// Deklaration und Initialisierung
// ============================================
var meineZahlen = [1, 2, 3, 4, 5];
var obstsorten = ["Apfel", "Banane", "Kirsche"];

// ============================================
// Zugriff auf Elemente
// ============================================
var erstesElement = meineZahlen[0]; // 1
var zweitesElement = meineZahlen[1]; // 2

// ============================================
// Ändern eines Elements
// ============================================
meineZahlen[2] = 10; // Ändert 3 auf 10

// ============================================
// Hinzufügen und Entfernen
// ============================================
meineZahlen.push(6); // Fügt 6 am Ende hinzu
meineZahlen.pop(); // Entfernt letztes Element

// ============================================
// Länge des Arrays
// ============================================
var anzahlElemente = meineZahlen.length;

// ============================================
// Array durchlaufen (FOR-Schleife)
// ============================================
for (var i = 0; i < meineZahlen.length; i++) {
    console.log(meineZahlen[i]);
}

🍎 Beispiel 1: Obstsorten Array

Ein einfaches Beispiel, wie ein Array von Obstsorten mit einer FOR-Schleife angezeigt und in HTML ausgegeben wird: 

function arrayObst() {
    var ausgabe = "<ul>";
    var obstsorten = ['Bananen', 'Äpfel', 'Melonen', 'Zitronen'];
    
    for (var i = 0; i < obstsorten.length; i++) {
        ausgabe += "<li>" + obstsorten[i] + "</li>";
    }
    
    ausgabe += "</ul>";
    document.getElementById("idAusgabe").innerHTML = ausgabe;
}

💰 Beispiel 2: Umsatzzahlen mit FOR-Schleife

Dieses Beispiel zeigt, wie ein Array von Umsatzzahlen mit einer FOR-Schleife durchlaufen wird. Die Funktion gibt das Ergebnis als String zurück (return) und zeigt es im Ausgabefeld an: 

var vUmsatzzahlen = ["51", "79", "11", "13"];

// FOR-Schleife mit return und innerHTML
function zeigeFor() {
    var ergebnis = "<strong>FOR-Schleife:</strong><br>";
    
    for (var i = 0; i < vUmsatzzahlen.length; i++) {
        ergebnis += "Index " + i + ": " + vUmsatzzahlen[i] + "<br>";
    }
    
    // Ausgabe mit innerHTML
    document.getElementById("idAusgabe").innerHTML = ergebnis;
    
    // Rückgabe für eventuelle Weiterverwendung
    return ergebnis;
}

💰 Beispiel 3: Umsatzzahlen mit WHILE-Schleife

Dieses Beispiel zeigt, wie ein Array von Umsatzzahlen mit einer WHILE-Schleife durchlaufen wird. Die Funktion gibt das Ergebnis als String zurück (return) und zeigt es im Ausgabefeld an: 

var vUmsatzzahlen = ["51", "79", "11", "13"];

// WHILE-Schleife mit return und innerHTML
function zeigeWhile() {
    var ergebnis = "<strong>WHILE-Schleife:</strong><br>";
    var i = 0;
    
    while (i < vUmsatzzahlen.length) {
        ergebnis += "Index " + i + ": " + vUmsatzzahlen[i] + "<br>";
        i++;
    }
    
    // Ausgabe mit innerHTML
    document.getElementById("idAusgabe").innerHTML = ergebnis;
    
    // Rückgabe für eventuelle Weiterverwendung
    return ergebnis;
}
📝 Übungsaufgaben
⚡ Klicke auf einen Button, um die Ausgabe zu sehen...