Arrays-Grundlagen in JavaScript

Jetzt sammeln wir mehrere Beträge unseres Haushaltsbuchs in einer einzigen Struktur: einem Array. Dieses Kapitel deckt Grundoperationen ab – die mächtigen Transformations-Methoden (map, filter, reduce) folgen in Kapitel 11.

Ein Array erstellen und indizieren

const betraege = [2400, -850, -120, -60, 300];

console.log(betraege[0]);  // 2400 - erster Eintrag, Index beginnt bei 0!
console.log(betraege[4]);  // 300 - letzter Eintrag
console.log(betraege[5]);  // undefined - Index existiert nicht, KEIN Fehler
console.log(betraege.length); // 5

Elemente hinzufügen und entfernen

const betraege = [2400, -850];

betraege.push(-120);     // am ENDE hinzufügen: [2400, -850, -120]
betraege.unshift(100);   // am ANFANG hinzufügen: [100, 2400, -850, -120]

const letzter = betraege.pop();    // letztes Element ENTFERNEN und zurückgeben: -120
const erster = betraege.shift();   // erstes Element ENTFERNEN und zurückgeben: 100

console.log(betraege); // [2400, -850]

Achtung: push, pop, shift, unshift verändern das ORIGINAL-Array ("mutierend"). unshift/shift sind zudem bei GROSSEN Arrays langsam, da JEDES nachfolgende Element neu indiziert werden muss – für unser kleines Haushaltsbuch spielt das keine Rolle, ist aber gut zu wissen.

Ein Array durchsuchen

const betraege = [2400, -850, -120, -60, 300];

console.log(betraege.includes(-850)); // true - ist der Wert enthalten?
console.log(betraege.indexOf(-120));   // 2 - an welchem Index? -1, falls nicht gefunden
console.log(Array.isArray(betraege));  // true - ist das überhaupt ein Array? (typeof liefert nur 'object')

Ausschnitte mit slice()

const betraege = [2400, -850, -120, -60, 300];

console.log(betraege.slice(1, 3)); // [-850, -120] - Index 1 bis EXKLUSIV 3
console.log(betraege.slice(-2));   // [-60, 300] - die letzten zwei Elemente
console.log(betraege);             // unverändert: [2400, -850, -120, -60, 300] - slice() ist NICHT mutierend!

Tipp: slice() (kein Buchstabendreher zu splice()!) gibt immer ein NEUES Array zurück und lässt das Original unangetastet – der Gegensatz zu den mutierenden Methoden oben. Diese Unterscheidung zwischen mutierenden und nicht-mutierenden Methoden zieht sich durch die gesamte Array-API und wird in Kapitel 11 noch wichtiger.

Verschachtelte Arrays

Für unser Haushaltsbuch: eine Liste von Monaten, jeder Monat selbst ein Array von Tagesbeträgen:

const monatsBetraege = [
  [50, -20, 100],   // Januar
  [-30, 200, -15],  // Februar
];

console.log(monatsBetraege[0][1]); // -20 - Januar, zweiter Eintrag

Die erste Transaktionsliste unseres Haushaltsbuchs

Damit haben wir das Werkzeug für eine echte Transaktionsliste – noch als einfache Zahlen-Arrays; in Kapitel 12 werden daraus Objekte mit Beschreibung, Kategorie und Datum:

src/index.js

const transaktionsBetraege = [2400, -850, -120, -60, 300, -45];

let einnahmenSumme = 0;
let ausgabenSumme = 0;

for (const betrag of transaktionsBetraege) {
  if (betrag > 0) {
    einnahmenSumme += betrag;
  } else {
    ausgabenSumme += betrag;
  }
}

console.log(`Einnahmen: ${einnahmenSumme}`); // Einnahmen: 2700
console.log(`Ausgaben: ${ausgabenSumme}`);   // Ausgaben: -1075
console.log(`Saldo: ${einnahmenSumme + ausgabenSumme}`); // Saldo: 1625

In Kapitel 11 ersetzen wir diese manuelle Schleife durch die deutlich elegantere reduce()-Methode.