Lern-Fabrik

Einführung in Arrays

Arrays sind in JavaScript eine grundlegende Datenstruktur, die dazu verwendet wird, eine geordnete Sammlung von Elementen zu speichern. Diese Elemente können unterschiedliche Datentypen sein, einschließlich Zahlen, Zeichenketten, Objekte und sogar andere Arrays. Arrays werden häufig verwendet, um eine Gruppe von Werten oder Objekten zusammenzufassen und sie effizient zu organisieren, zu durchsuchen und zu verarbeiten.

Deklaration und Initialisierung

Arrays werden in JavaScript deklariert und initialisiert, indem Sie eckige Klammern verwenden. Zum Beispiel: 

var meinArray = [1, 2, 3, 4, 5];



Zugriff auf Elemente

Man kann auf die Elemente eines Arrays mithilfe ihres Index zugreifen. JavaScript verwendet eine nullbasierte Indexierung, d.h. das erste Element hat den Index 0. 

var erstesElement = meinArray[0]; // Gibt 1 zurück

Länge eines Arrays

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

var anzahlElemente = meinArray.length; // Gibt 5 zurück

Durchlaufen eines Arrays

Lösung: Nutze eine Schleife!

Hinzufügen und Entfernen von Elementen

Elemente können am Ende eines Arrays hinzugefügt oder entfernt werden, dazu werden die Methoden push() und pop() verwendet. Auch können Elemente am Anfang eines Arrays hinzugefügt oder entfernt werden, dazu nutzt man die die Methoden unshift() und shift() verwenden. 

meinArray.push(6); // Fügt 6 am Ende hinzu
meinArray.pop(); // Entfernt das letzte Element (hier: 6)

Zusammenfassung

// Deklaration und Initialisierung eines Arrays
var meineZahlen = [1, 2, 3, 4, 5];

// Zugriff auf ein Element
var erstesElement = meineZahlen[0]; // Gibt 1 zurück
var zweitesElement = meineZahlen[1]; // Gibt 2 zurück

// Ändern eines Elements
meineZahlen[2] = 10; // Das dritte Element wird auf 10 geändert

// Hinzufügen eines Elements
meineZahlen.push(6); // Fügt die Zahl 6 am Ende hinzu

// Länge eines Arrays
var anzahlElemente = meineZahlen.length; // Gibt 6 zurück

Schleifen ermöglichen es, die Elemente eines Arrays nacheinander zu durchlaufen und Operationen auf jedem Element auszuführen. Dies ist besonders nützlich, wenn eine Sammlung von Daten vorhanden ist und diese verarbeitet oder angezeigt werden sollte. Angenommen, wir haben ein Array von Zahlen und möchten die Summe aller Zahlen in diesem Array berechnen. Hierzu kann nun eine Schleife verwendet werden, um alle Elemente des Arrays zu durchlaufen und die Summe schrittweise zu erhöhen. 


// Ein Array von Zahlen
var zahlenArray = [1, 2, 3, 4, 5];

// Eine Variable, um die Summe zu speichern
var summe = 0;

// Verwenden Sie eine for-Schleife, um die Elemente des Arrays zu durchlaufen
for (var i = 0; i < zahlenArray.length; i++) {
  // Fügen Sie jedes Element zur Summe hinzu
  summe += zahlenArray[i];
}

// Die Summe ausgeben
console.log("Die Summe der Zahlen ist: " + summe);
// oder im div
var ausgabe =""
ausgabe = ausgabe + summe;
document.getElementById("idausgabe").innerHTML=ausgabe;

In diesem Beispiel wird eine for-Schleife verwendet, um durch das Array zahlenArray zu iterieren. Bei jeder Iteration wird das aktuelle Element des Arrays (zahlenArray[i]) zur Summe hinzugefügt. Am Ende der Schleife wird die Gesamtsumme ausgegeben. Durch die Kombination von Arrays und Schleifen können Daten effizient verarbeitet werden. Dies macht Arrays und Schleifen zu grundlegenden Bausteinen in der Programmierung.

Beispiel


<!DOCTYPE html>
<html>
<head>
    <title>Obstsorten</title>
</head>
<body>
    <h1>Obstsorten</h1>
    <div id="idAusgabe"></div>

    <script>
        function arrayObst(){
        var ausgabe = "<ul>"; // Starte eine ungeordnete Liste

        // Erstelle ein Array mit Obstsorten
        var obstsorten = ['Bananen', 'Äpfel', 'Melonen', 'Zitronen'];

        for (var i = 0; i < obstsorten.length; i++) {
            ausgabe += "<li>" + obstsorten[i] + "</li>"; // Füge jedes Element der Liste hinzu
        }

        ausgabe += "</ul>"; // Schließe die ungeordnete Liste

        // Füge die Liste in das "idAusgabe"-Element ein
        document.getElementById("idAusgabe").innerHTML = ausgabe;
      }
    </script>

    <button onClick="arrayObst();"/>ObstArray</button>
    <div id="idAusgabe"></div>

</body>
</html>

Ausgabe

  • Bananen
  • Äpfel
  • Melonen
  • Zitronen

Übungsaufgaben zu LE05

Hinweis: Alle Ergebnisse und Zwischenergebnisse müssen in Moodle abgegeben werden.

Übungen

Aufgabe 1

    Zahlen addieren - Erstelle einen Array mit sechs beliebigen Zahlen.
    (a) Programmiere dann eine Funktion, die die Summe aller im Array enthaltenen Zahlen ausgibt.
    (b) Erweitere anschließend das Programm um eine weitere Funktion, die den Mittelwert aller im Array enthaltenen Zahlen ausgibt.
    Hinweis: Nutze den Editor der Lern-Fabrik.
Übungen

Aufgabe 2

    Zahlen sortieren - Gegeben sei folgendes Array: vMyUmsatz = ["71", "42", "52" , "11 ", "23"];
    Programmiere eine Funktion, die die Zahlen im Array vMyUmsatz aufsteigend sortiert, gehe dabei Schrittweise vor.
    (a) Erstelle eine Beschreibung wie ein möglicher Algorithmus aussehen muss, der Zahlen aufsteigend sortiert. Nutze hierfür auch ein Struktogramm.
    (b) Erstelle eine Funktion die die größte Zahl im Array vMyUmsatz an letzter Stelle "schiebt". Dabei sollen die Anzahl der Tausche/Vergleiche mit ausgegeben werden.
    (c) Erweitere Schrittweise die Funktion so, dass die Zahlen immer an der "richtigen" Stelle im Array positioniert werden.
Übungen

Aufgabe 3

    Erstelle ein leeres Array "obstsorten". Programmiere eine Funktion die den Benutzer auffordert beliebige Obstsorten einzugeben und im Array hinzuzufügen. Die hinzugefügten Obstsorten werden nacheinander im Browser ausgegeben. Neben den Obstsorten, soll auch die Anzahl der Artikel im Warenkorb ausgegeben werden.
    Für die Bearbeitung dieser Aufgabe nutzt du bitte folgende HTML-Vorlage: obstArray
Übungen

Aufgabe 4

    Gegeben ist folgender Array: var vMyUmsatz= ["71", "42", "52" , "11 ", "23"];
    Programmiere eine Funktion tauscheZahl() die die beiden ersten Zahlen im Array miteinander tauscht!

Übungen

Aufgabe 5

    Gegeben ist folgender Array: var vArrayObst = ["Zitronen", "Bananen", "Papaya", "Ananas"];
    Programmiere eine Funktion tauscheElement() die die Position der Zitronen mit den Bananen tauscht.

Übungen

Aufgabe 6

    Gegeben ist folgendes Array:

    var artikel = [["Kiwi", 16], ["Melone", 13], ["Papaya", 42], ["Zitronen", 9]];


    Programmiere jeweils die Funktionen zum Sortieren (nach Gewicht, nach Obstsorte).