Arrays und Objekte

Arrays und Objekte sind zwei fundamentale Datenstrukturen in JavaScript, mit denen Sie komplexe Daten speichern und verwalten können. In diesem Kapitel lernen Sie, wie Sie mit diesen Strukturen arbeiten, um Ihre Programme effizienter und leistungsfähiger zu gestalten.

Arrays

Ein Array ist eine geordnete Liste von Werten, die über einen Index zugänglich sind. Arrays können beliebige Datentypen enthalten, sogar eine Mischung verschiedener Typen.

Array erstellen

// Leeres Array
let leeresArray = [];

// Array mit Werten
let zahlen = [1, 2, 3, 4, 5];
let früchte = ["Apfel", "Banane", "Orange"];
let gemischt = [1, "Hallo", true, null, { name: "Max" }];

Auf Array-Elemente zugreifen

Arrays in JavaScript sind nullbasiert - der erste Index ist 0:

let früchte = ["Apfel", "Banane", "Orange", "Mango"];

console.log(früchte[0]); // Ausgabe: Apfel
console.log(früchte[2]); // Ausgabe: Orange

Arrays ändern

Sie können Elemente eines Arrays ändern, indem Sie neue Werte zuweisen:

let früchte = ["Apfel", "Banane", "Orange"];

früchte[1] = "Kiwi";
console.log(früchte); // Ausgabe: ["Apfel", "Kiwi", "Orange"]

Array-Länge

Die Eigenschaft length gibt die Anzahl der Elemente im Array zurück:

let früchte = ["Apfel", "Banane", "Orange"];
console.log(früchte.length); // Ausgabe: 3

Grundlegende Array-Methoden

JavaScript bietet viele nützliche Methoden für die Arbeit mit Arrays:

Elemente hinzufügen

let früchte = ["Apfel", "Banane"];

// Am Ende hinzufügen
früchte.push("Orange");
console.log(früchte); // ["Apfel", "Banane", "Orange"]

// Am Anfang hinzufügen
früchte.unshift("Erdbeere");
console.log(früchte); // ["Erdbeere", "Apfel", "Banane", "Orange"]

Elemente entfernen

let früchte = ["Apfel", "Banane", "Orange", "Mango"];

// Letztes Element entfernen
let letztesFrucht = früchte.pop();
console.log(letztesFrucht); // Mango
console.log(früchte); // ["Apfel", "Banane", "Orange"]

// Erstes Element entfernen
let erstesFrucht = früchte.shift();
console.log(erstesFrucht); // Apfel
console.log(früchte); // ["Banane", "Orange"]

Arrays kombinieren

let früchte1 = ["Apfel", "Banane"];
let früchte2 = ["Orange", "Mango"];

// Arrays verbinden
let alleFrüchte = früchte1.concat(früchte2);
console.log(alleFrüchte); // ["Apfel", "Banane", "Orange", "Mango"]

Teile eines Arrays extrahieren

Die slice()-Methode erstellt eine Kopie eines Teils des Arrays:

let früchte = ["Apfel", "Banane", "Orange", "Mango", "Kiwi"];

// Extrahiere von Index 1 bis Index 3 (exklusive)
let ausschnitt = früchte.slice(1, 3);
console.log(ausschnitt); // ["Banane", "Orange"]

Elemente einfügen oder entfernen an beliebiger Position

Die splice()-Methode kann Elemente entfernen und/oder neue Elemente einfügen:

let früchte = ["Apfel", "Banane", "Orange", "Mango"];

// Entferne 2 Elemente ab Index 1 und füge neue Elemente ein
let entfernteFrüchte = früchte.splice(1, 2, "Kiwi", "Erdbeere");
console.log(entfernteFrüchte); // ["Banane", "Orange"]
console.log(früchte); // ["Apfel", "Kiwi", "Erdbeere", "Mango"]

Arrays durchlaufen

Es gibt verschiedene Möglichkeiten, durch ein Array zu iterieren:

Mit einer for-Schleife

let früchte = ["Apfel", "Banane", "Orange", "Mango"];

for (let i = 0; i < früchte.length; i++) {
  console.log(früchte[i]);
}

Mit einer for…of-Schleife

let früchte = ["Apfel", "Banane", "Orange", "Mango"];

for (let frucht of früchte) {
  console.log(frucht);
}

Mit der forEach-Methode

let früchte = ["Apfel", "Banane", "Orange", "Mango"];

früchte.forEach(function (frucht, index) {
  console.log(`Frucht ${index + 1}: ${frucht}`);
});

// Mit Pfeilfunktion
früchte.forEach((frucht, index) =>
  console.log(`Frucht ${index + 1}: ${frucht}`)
);

Weitere nützliche Array-Methoden

map()

Erstellt ein neues Array mit den Ergebnissen einer Funktion für jedes Element:

let zahlen = [1, 2, 3, 4];
let quadrierte = zahlen.map((zahl) => zahl * zahl);
console.log(quadrierte); // [1, 4, 9, 16]

filter()

Erstellt ein neues Array mit allen Elementen, die eine Bedingung erfüllen:

let zahlen = [1, 2, 3, 4, 5, 6];
let geradeZahlen = zahlen.filter((zahl) => zahl % 2 === 0);
console.log(geradeZahlen); // [2, 4, 6]

find()

Gibt das erste Element zurück, das eine Bedingung erfüllt:

let früchte = ["Apfel", "Banane", "Orange", "Mango"];
let gefunden = früchte.find((frucht) => frucht.startsWith("O"));
console.log(gefunden); // Orange

some() und every()

Prüfen, ob einige/alle Elemente eine Bedingung erfüllen:

let zahlen = [1, 2, 3, 4, 5];
let hatGerade = zahlen.some((zahl) => zahl % 2 === 0);
console.log(hatGerade); // true

let alleGerade = zahlen.every((zahl) => zahl % 2 === 0);
console.log(alleGerade); // false

sort()

Sortiert die Elemente eines Arrays:

let früchte = ["Orange", "Apfel", "Banane", "Mango"];
früchte.sort();
console.log(früchte); // ["Apfel", "Banane", "Mango", "Orange"]

// Bei Zahlen muss eine Vergleichsfunktion übergeben werden
let zahlen = [10, 5, 40, 25];
zahlen.sort((a, b) => a - b);
console.log(zahlen); // [5, 10, 25, 40]

Objekte

Objekte in JavaScript sind Sammlungen von Schlüssel-Wert-Paaren und ermöglichen das Speichern strukturierter Daten.

Objekt erstellen

// Leeres Objekt
let leeresObjekt = {};

// Objekt mit Eigenschaften
let person = {
  name: "Max Mustermann",
  alter: 30,
  beruf: "Softwareentwickler",
  istStudent: false,
};

Auf Objekteigenschaften zugreifen

Es gibt zwei Möglichkeiten, auf Eigenschaften zuzugreifen:

let person = {
  name: "Max Mustermann",
  alter: 30,
};

// Punktnotation
console.log(person.name); // Max Mustermann

// Klammernotation (nützlich für dynamische Eigenschaftsnamen)
console.log(person["alter"]); // 30

let eigenschaft = "name";
console.log(person[eigenschaft]); // Max Mustermann

Eigenschaften ändern und hinzufügen

let person = {
  name: "Max Mustermann",
  alter: 30,
};

// Eigenschaft ändern
person.name = "Maria Musterfrau";
console.log(person.name); // Maria Musterfrau

// Neue Eigenschaft hinzufügen
person.beruf = "Lehrerin";
console.log(person); // {name: "Maria Musterfrau", alter: 30, beruf: "Lehrerin"}

Eigenschaften entfernen

let person = {
  name: "Max Mustermann",
  alter: 30,
  beruf: "Softwareentwickler",
};

delete person.beruf;
console.log(person); // {name: "Max Mustermann", alter: 30}

Verschachtelte Objekte

Objekte können andere Objekte als Werte enthalten:

let person = {
  name: "Max Mustermann",
  alter: 30,
  adresse: {
    strasse: "Musterstrasse 123",
    plz: "12345",
    stadt: "Musterstadt",
  },
  hobbys: ["Lesen", "Programmieren", "Wandern"],
};

console.log(person.adresse.stadt); // Musterstadt
console.log(person.hobbys[1]); // Programmieren

Methoden in Objekten

Objekte können auch Funktionen als Eigenschaften haben, die dann Methoden genannt werden:

let person = {
  name: "Max Mustermann",
  alter: 30,
  vorstellen: function () {
    return `Hallo, ich bin ${this.name} und bin ${this.alter} Jahre alt.`;
  },
  // Kurzschreibweise
  grüssen() {
    return `Hallo!`;
  },
};

console.log(person.vorstellen()); // Hallo, ich bin Max Mustermann und bin 30 Jahre alt.
console.log(person.grüssen()); // Hallo!

Objekte durchlaufen

Mit der for...in-Schleife können Sie durch alle Eigenschaften eines Objekts iterieren:

let person = {
  name: "Max Mustermann",
  alter: 30,
  beruf: "Softwareentwickler",
};

for (let eigenschaft in person) {
  console.log(`${eigenschaft}: ${person[eigenschaft]}`);
}
// Ausgabe:
// name: Max Mustermann
// alter: 30
// beruf: Softwareentwickler

Nützliche Objekt-Methoden

Object.keys()

Gibt ein Array mit allen Eigenschaftsnamen eines Objekts zurück:

let person = {
  name: "Max Mustermann",
  alter: 30,
  beruf: "Softwareentwickler",
};

let eigenschaften = Object.keys(person);
console.log(eigenschaften); // ["name", "alter", "beruf"]

Object.values()

Gibt ein Array mit allen Werten eines Objekts zurück:

let person = {
  name: "Max Mustermann",
  alter: 30,
  beruf: "Softwareentwickler",
};

let werte = Object.values(person);
console.log(werte); // ["Max Mustermann", 30, "Softwareentwickler"]

Object.entries()

Gibt ein verschachteltes Array mit Schlüssel-Wert-Paaren zurück:

let person = {
  name: "Max Mustermann",
  alter: 30,
};

let einträge = Object.entries(person);
console.log(einträge); // [["name", "Max Mustermann"], ["alter", 30]]

Arrays von Objekten

Eine häufige Datenstruktur in JavaScript sind Arrays von Objekten, besonders bei der Arbeit mit Datenlisten:

let benutzer = [
  {
    id: 1,
    name: "Max Mustermann",
    alter: 30,
    email: "max@beispiel.de",
  },
  {
    id: 2,
    name: "Maria Musterfrau",
    alter: 28,
    email: "maria@beispiel.de",
  },
  {
    id: 3,
    name: "Tom Test",
    alter: 35,
    email: "tom@beispiel.de",
  },
];

// Alle Namen ausgeben
benutzer.forEach((person) => console.log(person.name));

// Nur Personen über 30 filtern
let über30 = benutzer.filter((person) => person.alter > 30);
console.log(über30);

// Person mit id 2 finden
let gesuchte = benutzer.find((person) => person.id === 2);
console.log(gesuchte);

Übung: Arrays und Objekte in der Praxis

Aufgabe: Mit Arrays und Objekten arbeiten

Jetzt ist es Zeit, das Gelernte über Arrays und Objekte in die Praxis umzusetzen. Versuchen Sie, diese Aufgaben zu lösen:

1. Einkaufsliste

   • Erstellen Sie ein Array einkaufsliste mit mindestens 5 Lebensmitteln
   • Fügen Sie am Anfang ein weiteres Lebensmittel hinzu
   • Entfernen Sie das letzte Element der Liste
   • Durchlaufen Sie die Liste mit einer Schleife Ihrer Wahl und geben Sie alle Elemente aus

2. Personenverwaltung

   • Erstellen Sie ein Objekt person mit den Eigenschaften name, alter, hobbys (ein Array mit mindestens 3 Hobbys)
   • Fügen Sie dem Objekt eine Methode steckbrief hinzu, die einen Text zurückgibt mit dem Namen, Alter und den Hobbys
   • Rufen Sie die Methode auf und geben Sie den Steckbrief aus

3. Bücherverwaltung

   • Erstellen Sie ein Array von mindestens 3 Bücher-Objekten mit den Eigenschaften titel, autor, jahr und gelesen (Boolean)
   • Fügen Sie ein weiteres Buch zum Array hinzu
   • Schreiben Sie eine Funktion, die alle ungelesenen Bücher herausfiltert und zurückgibt
   • Schreiben Sie eine Funktion, die das neueste Buch (höchstes Jahr) findet und zurückgibt

4. Produktkatalog mit Preisberechnung

   • Erstellen Sie ein Array produkte mit mindestens 4 Produkt-Objekten, die jeweils name, preis und menge enthalten
   • Berechnen Sie den Gesamtwert jedes Produkts (Preis * Menge)
   • Berechnen Sie den Gesamtwert des gesamten Warenkorbs
   • Fügen Sie eine Versandkostenpauschale von 4,99 € hinzu, wenn der Gesamtwert unter 50 € liegt

5. Kontaktverwaltung mit Suchfunktion

   • Erstellen Sie ein Array kontakte mit mindestens 5 Kontakt-Objekten, die jeweils name, telefon und email enthalten
   • Implementieren Sie eine Funktion sucheKontakt(suchbegriff), die alle Kontakte zurückgibt, die den Suchbegriff im Namen enthalten (Gross-/Kleinschreibung ignorieren)
   • Testen Sie die Funktion mit verschiedenen Suchbegriffen

Zusammenfassung

• Arrays sind geordnete Listen von Werten, auf die über einen Index zugegriffen werden kann
• Objekte sind Sammlungen von Schlüssel-Wert-Paaren für strukturierte Daten
• Arrays und Objekte können verschachtelt werden, um komplexe Datenstrukturen zu erstellen
• JavaScript bietet viele nützliche Methoden für die Arbeit mit Arrays und Objekten
• Arrays von Objekten sind eine häufige Datenstruktur für Listen strukturierter Daten

Arrays und Objekte sind grundlegende Bausteine in JavaScript und werden in fast jedem Projekt verwendet. Mit dem Wissen aus diesem Kapitel können Sie komplexe Datenstrukturen erstellen und effizient mit ihnen arbeiten.

Im nächsten Kapitel werden wir uns mit der Fehlerbehandlung in JavaScript beschäftigen - einem wichtigen Thema, um robuste Programme zu schreiben.