Hinzufügen und entfernen

Eine Liste, die sich nie ändert, ist selten. Einträge kommen dazu, fallen weg oder werden ersetzt, und dafür gibt es eine überschaubare Zahl von Methoden.

Achte beim Lesen auf zwei Dinge: wo eine Methode arbeitet und was sie zurückgibt. Das zweite ist selten dasselbe wie das erste, und genau daran verhaspeln sich die meisten.

01 / 04Hinten anbauen und abbauen

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const liste = ["a", "b"];

// push hängt an und gibt die neue Länge zurück, nicht die Liste.
const neueLaenge = liste.push("c");
console.log("Nach push:", liste, "Rückgabe:", neueLaenge);

// push nimmt auch mehrere Werte auf einmal.
liste.push("d", "e");
console.log("Nach push mit zwei:", liste);

// pop nimmt den letzten weg und gibt genau diesen zurück.
const letzter = liste.pop();
console.log("Nach pop:", liste, "Rückgabe:", letzter);

// Bei einer leeren Liste liefert pop undefined und wirft nicht.
const leer = [];
console.log("pop auf leer:", leer.pop());

push hängt hinten an, pop nimmt hinten weg. Das sind die beiden, die du am häufigsten brauchen wirst.

Was sie zurückgeben, ist verschieden. push gibt die neue Länge zurück, nicht die Liste. pop gibt den entfernten Eintrag zurück. Das ist logisch, sobald man es weiß: Bei pop will man in der Regel wissen, was man da gerade weggenommen hat.

push nimmt auch mehrere Werte auf einmal. Und pop auf einer leeren Liste wirft keinen Fehler, sondern liefert undefined.

02 / 04Vorn ist teurer

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const liste = ["b", "c"];

// unshift setzt vorn ein und gibt die neue Länge zurück.
console.log("Rückgabe von unshift:", liste.unshift("a"));
console.log("Nach unshift:", liste);

// shift nimmt den ersten weg und gibt ihn zurück.
const erster = liste.shift();
console.log("Nach shift:", liste, "Rückgabe:", erster);

// Der Preis: alle übrigen müssen eine Stelle rutschen. Bei drei
// Einträgen egal, bei hunderttausend nicht mehr.
console.log("Merksatz: hinten ist billig, vorn ist teuer.");

Dieselben zwei Vorgänge am anderen Ende: unshift setzt vorn ein, shift nimmt vorn weg. Die Rückgaben folgen derselben Logik wie oben.

Ein Unterschied, der nicht am Ergebnis sichtbar ist: Am Anfang zu arbeiten kostet mehr. Kommt vorn etwas dazu, muss jeder andere Eintrag eine Stelle weiterrutschen, damit die Positionen wieder stimmen. Am Ende passiert das nicht.

Bei zehn Einträgen merkst du davon nichts. Bei hunderttausend in einer Schleife merkst du es deutlich. Der Merksatz lautet: hinten ist billig, vorn ist teuer. Wenn beide Wege in Frage kommen, nimm den hinteren.

03 / 04splice für die Mitte

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// splice(ab welcher Stelle, wie viele weg, was stattdessen rein)
const a = ["Montag", "Dienstag", "Mittwoch", "Donnerstag"];

// Zwei entfernen, ab Stelle 1. Zurück kommt das Entfernte.
console.log("Entfernt:", a.splice(1, 2));
console.log("Übrig:", a);

// Nichts entfernen, etwas einsetzen: die dritte Angabe allein.
const b = ["rot", "blau"];
b.splice(1, 0, "grün");
console.log("Eingesetzt:", b);

// Ersetzen ist beides auf einmal.
const c = ["rot", "blau"];
c.splice(1, 1, "grün", "gelb");
console.log("Ersetzt:", c);

splice ist der Alleskönner und die Methode, deren Argumente sich niemand merkt. Sie sind:

Erstens ab welcher Stelle, zweitens wie viele Einträge weg sollen, und ab dem dritten Argument, was stattdessen hinein soll.

Damit erledigt splice drei Aufgaben. Nur entfernen: die ersten beiden Angaben. Nur einsetzen: die zweite Angabe auf 0. Ersetzen: beides zusammen.

Zurück gibt es eine Liste mit dem, was entfernt wurde, auch wenn das nichts war. Und die Liste selbst wird dabei verändert.

04 / 04Verändern oder neu bauen

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const original = ["a", "b", "c", "d", "e"];

// slice(von, bis) schneidet heraus. Das Ende ist nicht dabei.
console.log("slice(1, 3):", original.slice(1, 3));
console.log("Original danach:", original);

// Ohne Argumente ist es eine vollständige Kopie.
const kopie = original.slice();
kopie.push("f");
console.log("Kopie:", kopie);
console.log("Original:", original);

// Negative Zahlen zählen von hinten.
console.log("Die letzten zwei:", original.slice(-2));

// Zum Vergleich dasselbe mit splice, das verändert wirklich.
const zweitesOriginal = ["a", "b", "c", "d", "e"];
console.log("splice(1, 3):", zweitesOriginal.splice(1, 3));
console.log("Original danach:", zweitesOriginal);

Hier ist das Muster, das den Rest dieses Abschnitts trägt.

splice verändert die Liste selbst. Danach ist die alte weg. Wer sie noch braucht, hat ein Problem.

slice lässt die Liste in Ruhe und gibt ein neues Stück zurück. Zwei Zahlen sagen von wo bis wohin, wobei das Ende nicht mehr dabei ist. Ohne Argumente ist es eine vollständige Kopie, und genau das ist der übliche Weg, wenn man mit einer Liste arbeiten will, ohne das Original anzufassen.

Die beiden Namen unterscheiden sich um zwei Buchstaben und tun etwas völlig Verschiedenes. Das ist unglücklich und lässt sich nicht mehr ändern. Merk dir das p in splice als das für „verändert”.

Ab Lektion 6.5 werden fast alle Methoden zur zweiten Sorte gehören: Sie geben eine neue Liste zurück und lassen das Original stehen. Das ist der angenehmere Weg, weil man dann nie nachdenken muss, wer eine Liste hinter dem eigenen Rücken verändert hat.