Array-Elemente in JavaScript ausgeben

Um Array-Elemente in JavaScript auszugeben, können Sie jeden Wert in einer eigenen Zeile ausgeben, das Array als Ganzes anzeigen oder eine formatierte Zeichenfolge erstellen. Eine indizierte Schleife oder forEach eignet sich für die zeilenweise Ausgabe, console.log() zeigt das gesamte Array an und mit map() und join() lassen sich Werte nummerieren oder mit einem eigenen Trennzeichen verbinden. Für eine Auswahl von Werten verwenden Sie slice(), zum Kombinieren von Arrays concat(). Die Endelement-Methoden pop() und shift() geben ebenfalls Werte zurück, entfernen sie aber aus dem ursprünglichen Array.

Mit Schleifen und forEach jedes Element in einer eigenen Zeile ausgeben

Eine indizierte for-Schleife ermöglicht den direkten Zugriff auf jeden Wert und seine Position. Eine while-Schleife kann dasselbe leisten, wenn Sie vor der Schleife einen Index initialisieren und ihn bei jedem Durchlauf erhöhen. Für eine einfache Aktion auf jeden Wert nimmt forEach eine Callback-Funktion entgegen, die das aktuelle Element und optional dessen Index erhält. Mit diesen Ansätzen wird für jeden Wert ein eigener Aufruf von console.log() ausgeführt:

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
names.forEach((name) => console.log(name));

mehvish
tahir
aftab
martell

Verwenden Sie eine indizierte Schleife, wenn die nachfolgende Logik den Index benötigt oder Sie die Iteration steuern müssen. forEach ist knapp, wenn Sie lediglich jedes Array-Element verarbeiten möchten. Die Methode gibt undefined zurück und erzeugt kein umgewandeltes Array.

Das gesamte Array mit console.log() ausgeben

Übergeben Sie das Array selbst an console.log(), um alle Elemente mit einem Aufruf anzuzeigen. Das ist beim Debuggen nützlich, doch die Darstellung hängt von der Laufzeitumgebung ab: Browser und Node.js können Arrays unterschiedlich formatieren. Benötigt ein anderer Programmteil eine vorhersagbare Zeichenfolge, wandeln Sie die Werte stattdessen mit join() um.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names);

[ 'mehvish', 'tahir', 'aftab', 'martell' ]

console.log() ist eine Methode von console, während forEach, map und die folgenden Umwandlungsmethoden Array-Methoden sind. Die Konsolendarstellung ist kein serialisiertes Format für Dateien oder Netzwerkdaten.

Elemente als Zeichenfolge formatieren oder nummerieren

Verwenden Sie map(), um ein neues Array mit Beschriftungen zu erstellen, und verbinden Sie diese anschließend mit join() zu einer Zeichenfolge. Die Callback-Funktion erhält das Element und seinen nullbasierten Index. Wenn Sie zum Index eins addieren, erhalten Sie eine für Menschen lesbare Nummerierung. map() verändert das ursprüngliche Array nicht, und join() gibt eine Zeichenfolge zurück.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const numberedNames = names.map((name, index) => `${index + 1}. ${name}`);
console.log(numberedNames.join(' | '));

1. mehvish | 2. tahir | 3. aftab | 4. martell

Für einfachen, durch Kommas getrennten Text wandelt die Methode toString() ein Array in eine Zeichenfolge um. Sie setzt Kommas zwischen die Elemente, lässt Sie aber kein anderes Trennzeichen festlegen. Mit der Methode join() können Sie ein Trennzeichen auswählen, etwa ein Leerzeichen oder einen senkrechten Strich. Beide Methoden erzeugen eine Zeichenfolge, geben sie aber nicht selbst aus. Übergeben Sie das Ergebnis an console.log(), um es anzuzeigen. Die verlinkten Referenzseiten sind auf Englisch verfügbar.

Ausgewählte Elemente mit slice() ausgeben

Rufen Sie slice(start, end) auf, um eine flache Kopie eines Array-Abschnitts zu erstellen, und geben Sie anschließend das zurückgegebene Array aus. Der Startindex ist eingeschlossen, der Endindex ausgeschlossen. slice(0, 2) wählt daher die ersten beiden Elemente aus. slice() entfernt keine Werte aus dem ursprünglichen Array.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.slice(0, 2));

[ 'mehvish', 'tahir' ]

Die ausgewählten Werte behalten ihre ursprüngliche Reihenfolge. Informationen zur Zeichenfolgenmethode mit ähnlichen Indexargumenten finden Sie in der Referenz zu slice(); hier ist das Objekt, auf dem die Methode aufgerufen wird, ein Array. Die verlinkte Referenzseite ist auf Englisch verfügbar.

Arrays mit concat() kombinieren

Verwenden Sie concat(), um ein neues Array zu erstellen, das zuerst die Elemente des Ausgangsarrays und danach die Elemente des übergebenen Arrays enthält. Geben Sie das Ergebnis direkt aus, um es anzuzeigen, oder rufen Sie join() auf, wenn die Ausgabe eine Zeichenfolge mit einem bestimmten Trennzeichen sein soll. Keines der Eingabearrays wird verändert.

const fruitsArrayOne = ['apple', 'banana', 'grapes'];
const fruitsArrayTwo = ['mango', 'water-melon'];
const combined = fruitsArrayOne.concat(fruitsArrayTwo);
console.log(combined.join(', '));

apple, banana, grapes, mango, water-melon

Die Reihenfolge ist wichtig: Das Array vor .concat() steht im Ergebnis zuerst. Die Methode kann außerdem einzelne Werte oder weitere Arrays als Argumente entgegennehmen.

Ein Endelement ausgeben und entfernen

Mit pop() erhalten und entfernen Sie das letzte Element, mit shift() das erste. Beide Methoden verändern das ursprüngliche Array und geben den entfernten Wert zurück, den Sie an console.log() übergeben können. Verwenden Sie sie nur, wenn diese Änderung beabsichtigt ist. Soll das ursprüngliche Array unverändert bleiben, verwenden Sie slice() oder lesen Sie einen Array-Index aus.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const lastName = names.pop();
console.log(lastName);
console.log(names.join(', '));

martell
mehvish, tahir, aftab

pop() und shift() sind Array-Methoden und keine Operationen für Zeichenfolgen. Der erste Aufruf gibt den Wert aus, der sich am Ende des Arrays befand; die nächste Zeile zeigt das verbleibende Array. Um das erste Element beim Entfernen anzuzeigen, ersetzen Sie pop() durch shift().