Wie man ein Element zu einem Array in JavaScript hinzufügt: 5 Methoden mit Beispielen

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Wie fügt man ein Element zu einem Array in JavaScript hinzu? Vollständige Analyse mit Beispielen

\n\n

Sie schreiben Code in JavaScript und plötzlich stellt sich die Frage: „Wie füge ich ein neues Element am Ende eines Arrays hinzu? Und am Anfang? Oder vielleicht in der Mitte?“. Wenn Sie jemals gegoogelt haben „How to append something to an array?“ – sind Sie nicht allein. Diese Frage auf Stack Overflow hat tausende Aufrufe gesammelt, und heute werden wir sie ein für alle Mal klären.

\n\n

Arrays sind die Grundlage der Datenverarbeitung in JS. Die Fähigkeit, schnell und korrekt Elemente hinzuzufügen, spart Ihnen Stunden beim Debuggen und macht den Code sauberer. In diesem Tutorial zeige ich Ihnen 5 Möglichkeiten, ein Element zu einem Array hinzuzufügen, von der klassischen push()-Methode bis zum modernen Spread-Operator. Los geht's!

\n\n

1. Die Methode push(): Element am Ende des Arrays hinzufügen

\n\n

Die beliebteste Methode. push() fügt ein oder mehrere Elemente am Ende des Arrays hinzu und gibt die neue Länge zurück.

\n\n

const fruits = ['Apfel', 'Banane'];\nconst newLength = fruits.push('Orange');\n\nconsole.log(fruits);    // ['Apfel', 'Banane', 'Orange']\nconsole.log(newLength); // 3\n

\n\n

Man kann auch mehrere Elemente auf einmal hinzufügen:

\n\n

fruits.push('Birne', 'Traube');\nconsole.log(fruits);\n// ['Apfel', 'Banane', 'Orange', 'Birne', 'Traube']\n

\n\n

Wann verwenden: wenn Sie Daten am Ende einer Liste hinzufügen müssen – z. B. ein neues Produkt in den Warenkorb, eine Nachricht im Chat, einen Log-Eintrag. Die Methode arbeitet schnell (O(1)) und mutiert das ursprüngliche Array.

\n\n

2. Die Methode unshift(): Element am Anfang des Arrays hinzufügen

\n\n

Wenn Sie ein Element am Anfang einfügen müssen, verwenden Sie unshift(). Es verschiebt alle vorhandenen Elemente nach rechts.

\n\n

const numbers = [2, 3, 4];\nnumbers.unshift(1);\n\nconsole.log(numbers); // [1, 2, 3, 4]\n

\n\n

Funktioniert auch mit mehreren Elementen:

\n\n

numbers.unshift(-1, 0);\nconsole.log(numbers); // [-1, 0, 1, 2, 3, 4]\n

\n\n

Wichtig: unshift() ist bei großen Arrays langsamer als push(), weil alle Elemente verschoben werden müssen. Wenn das Array 100.000 Elemente enthält, sollten Sie über eine andere Datenstruktur nachdenken (z. B. eine Deque-Warteschlange).

\n\n

3. Die Methode splice(): Einfügen an einer beliebigen Position

\n\n

Der Alleskönner. splice() kann Elemente löschen, ersetzen und natürlich an jeder beliebigen Position im Array hinzufügen.

\n\n

Syntax: array.splice(start, deleteCount, item1, item2, ...)

\n\n

start – der Index, ab dem begonnen wird
deleteCount – wie viele Elemente gelöscht werden (auf 0 setzen, wenn nur hinzugefügt wird)
item1, item2, ... – die einzufügenden Elemente

\n\n

Beispiel: „Kirsche“ an der zweiten Position (Index 1) einfügen:

\n\n

const colors = ['rot', 'blau', 'grün'];\ncolors.splice(1, 0, 'Kirsche');\n\nconsole.log(colors);\n// ['rot', 'Kirsche', 'blau', 'grün']\n

\n\n

Man kann auch mehrere Elemente auf einmal einfügen:

\n\n

const letters = ['a', 'd'];\nletters.splice(1, 0, 'b', 'c');\n\nconsole.log(letters); // ['a', 'b', 'c', 'd']\n

\n\n

Wann verwenden: wenn Sie ein Element genau in die Mitte eines Arrays einfügen müssen – z. B. einen neuen Menüpunkt zwischen bestehenden hinzufügen. Denken Sie daran: splice() mutiert das Array.

\n\n

4. Die Methode concat(): Ein neues Array erstellen

\n\n

Im Gegensatz zu den vorherigen Methoden ändert concat() das ursprüngliche Array nicht, sondern gibt ein neues zurück, indem es zwei oder mehr Arrays (oder Elemente) zusammenführt.

\n\n

const arr1 = [1, 2, 3];\nconst arr2 = [4, 5];\nconst result = arr1.concat(arr2);\n\nconsole.log(result); // [1, 2, 3, 4, 5]\nconsole.log(arr1);   // [1, 2, 3] – unverändert\n

\n\n

Man kann nicht nur Arrays, sondern auch einzelne Werte hinzufügen:

\n\n