Die Array-Iteration ist ein grundlegendes Konzept in JavaScript, mit dem Entwickler Elemente innerhalb eines Arrays durchlaufen und bearbeiten können. JavaScript bietet verschiedene Methoden zur Iteration über Arrays – von klassischen Schleifen (while, do...while, for, for...in, for...of) bis hin zu modernen Array-Methoden (forEach, map, filter, reduce, reduceRight). Jede Methode eignet sich für unterschiedliche Aufgaben wie das Filtern, Transformieren oder Reduzieren von Daten. Erweiterte Methoden wie flatMap, Array.from, keys, entries und der Spread-Operator bieten zusätzliche Flexibilität und Funktionalität. Die Beherrschung dieser Techniken ermöglicht Entwicklern, prägnanten, effizienten und ausdrucksstarken Code für die Verarbeitung von Arrays zu schreiben – eine wesentliche Voraussetzung für robuste JavaScript-Anwendungen. Das Verständnis dieser Methoden gewährleistet zudem Kompatibilität mit modernen Browsern und macht sie für die zeitgemäße Webentwicklung praktisch einsetzbar.
Wichtigste Erkenntnisse: JavaScript bietet verschiedene Methoden für die Array-Iteration, darunter klassische Schleifen (while, do...while, for, for...in, for...of) und moderne Array-Methoden (forEach, map, filter, reduce, reduceRight). Jede Methode verfügt über spezifische Eigenschaften für unterschiedliche Anwendungsfälle – von einfachen Iterationen bis zu komplexen Transformationen. Wenn Sie diese Techniken beherrschen, können Sie effizienten und ausdrucksstarken Code zur Bearbeitung von Arrays schreiben, der für leistungsfähige JavaScript-Anwendungen unverzichtbar ist. Die meisten Methoden werden von modernen Browsern unterstützt und gewährleisten eine breite Kompatibilität.
Schreiben Sie Code, auch wenn Sie Anfänger sind – mit Latenodes AI Assistent
Was sind Schleifen in JavaScript?
Schleifen in JavaScript sind Kontrollstrukturen, mit denen Entwickler einen Codeblock wiederholt ausführen können, bis eine bestimmte Bedingung erfüllt ist. Sie ermöglichen die Automatisierung wiederkehrender Aufgaben und die effiziente Verarbeitung von Arrays oder Datensammlungen. JavaScript bietet mehrere Arten von Schleifen, darunter while, do...while, for, for...in und for...of, jeweils mit eigener Syntax und spezifischen Anwendungsfällen.
So durchlaufen Sie ein Array mit einer while-Schleife in JavaScript
Die while-Schleife führt einen Codeblock aus, solange eine festgelegte Bedingung als true ausgewertet wird. Sie ist eine vielseitige Schleife, mit der Sie Arrays durch manuelle Verwaltung der Indexvariable durchlaufen können. Hier ist ein Beispiel für die Verwendung einer while-Schleife zur Iteration über ein Array:
const numbers = [1, 2, 3, 4, 5];
let i = 0;
while (i < numbers.length) {
console.log(numbers[i]);
i++;
}
In diesem Beispiel wird die while-Schleife weiterhin ausgeführt, solange der Index i kleiner als die Länge des Arrays numbers ist. Die Schleife gibt jedes Element in der Konsole aus und erhöht die Indexvariable.
So durchlaufen Sie ein Array mit einer do...while-Schleife in JavaScript
Die do...while-Schleife ähnelt der while-Schleife, garantiert jedoch, dass der Codeblock mindestens einmal ausgeführt wird, bevor die Bedingung geprüft wird. Hier ist ein Beispiel für die Verwendung einer do...while-Schleife für ein Array in JavaScript:
const fruits = ['apple', 'banana', 'orange'];
let i = 0;
do {
console.log(fruits[i]);
i++;
} while (i < fruits.length);
In diesem Fall gibt die Schleife jede Frucht in der Konsole aus und erhöht die Indexvariable. Die Schleife wird fortgesetzt, bis die Bedingung i < fruits.length als false ausgewertet wird.
So durchlaufen Sie ein Array mit einer for-Schleife in JavaScript
Die for-Schleife ist eine kompakte und häufig verwendete Schleifenstruktur in JavaScript. Sie kombiniert die Ausdrücke für Initialisierung, Bedingung und Inkrement/Dekrement in einer einzigen Zeile. Hier ist ein Beispiel für die Verwendung einer for-Schleife zur Iteration über ein Array:
const colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
Die for-Schleife initialisiert die Indexvariable i mit 0, prüft die Bedingung i < colors.length und erhöht i nach jeder Iteration. Die Schleife gibt jede Farbe in der Konsole aus.
So durchlaufen Sie ein Array mit einer for...in-Schleife in JavaScript
Die for...in-Schleife wird verwendet, um über die Eigenschaften eines Objekts zu iterieren. Bei der Verwendung mit Arrays durchläuft sie die Array-Indizes. Hier ist ein Beispiel:
const persons = ['Alice', 'Bob', 'Charlie'];
for (let index in persons) {
console.log(index + ': ' + persons[index]);
}
In diesem Beispiel durchläuft die for...in-Schleife die Indizes des Arrays persons. Sie gibt jeden Index und den zugehörigen Wert in der Konsole aus.
So durchlaufen Sie ein Array mit einer for...of-Schleife in JavaScript
Die mit ECMAScript 2015 (ES6) eingeführte for...of-Schleife bietet eine prägnantere und besser lesbare Möglichkeit, über iterierbare Objekte einschließlich Arrays zu iterieren. Sie greift direkt auf die Werte des Arrays zu, ohne dass eine Indexvariable erforderlich ist. Hier ist ein Beispiel:
JavaScript
const numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
console.log(number);
}
In diesem Fall durchläuft die for...of-Schleife jedes Element des Arrays numbers und weist es der Variablen number zu. Die Schleife gibt jede Zahl in der Konsole aus.
So durchlaufen Sie ein Array mit einer forEach-Schleife in JavaScript
Die Methode forEach() ist eine integrierte Array-Methode, die eine bereitgestellte Funktion einmal für jedes Array-Element ausführt. Sie bietet einen ausdrucksstärkeren und funktionaleren Ansatz für die Array-Iteration. Hier ist ein Beispiel:
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach((fruit) => {
console.log(fruit);
});
In diesem Beispiel wird die Methode forEach() für das Array fruits aufgerufen. Sie erhält eine Arrow Function als Argument, die jede Frucht als Parameter empfängt und sie in der Konsole ausgibt.
Weitere Methoden zur Array-Iteration
JavaScript bietet mehrere weitere Methoden zur Array-Iteration, die leistungsstarke Möglichkeiten zur Bearbeitung und Transformation von Arrays bereitstellen. Dazu gehören:
- map(): Erstellt ein neues Array, indem eine bereitgestellte Funktion für jedes Element im Array aufgerufen wird.
- filter(): Erstellt ein neues Array mit allen Elementen, die den durch die bereitgestellte Funktion definierten Test bestehen.
- reduce(): Führt für jedes Element des Arrays eine Reducer-Funktion aus und erzeugt dadurch einen einzelnen Ausgabewert.
- every(): Prüft, ob alle Elemente im Array den durch die bereitgestellte Funktion definierten Test bestehen.
- some(): Prüft, ob mindestens ein Element im Array den durch die bereitgestellte Funktion definierten Test besteht.
In den folgenden Abschnitten betrachten wir diese Methoden genauer.
JavaScript-Array forEach()
Die Methode forEach() führt eine bereitgestellte Funktion einmal für jedes Array-Element aus. Sie gibt kein neues Array zurück, ermöglicht Ihnen jedoch, eine Aktion für jedes Element auszuführen. Hier sind zwei Beispiele:
Beispiel 1
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number);
});
In diesem Beispiel wird die Methode forEach() verwendet, um jede Zahl im Array numbers in der Konsole auszugeben.
Beispiel 2
const fruits = ['apple', 'banana', 'orange'];
const upperCaseFruits = [];
fruits.forEach((fruit) => {
upperCaseFruits.push(fruit.toUpperCase());
});
console.log(upperCaseFruits);
In diesem Beispiel wird die Methode forEach() verwendet, um jede Frucht im Array fruits in Großbuchstaben umzuwandeln und sie in ein neues Array upperCaseFruits einzufügen.
JavaScript-Array map()
Die Methode map() erstellt ein neues Array, indem eine bereitgestellte Funktion für jedes Element im Array aufgerufen wird. Sie gibt ein neues Array mit den Ergebnissen des Funktionsaufrufs für jedes Element zurück. Hier sind zwei Beispiele:
Beispiel 1
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => {
return number ** 2;
});
console.log(squaredNumbers);
In diesem Beispiel wird die Methode map() verwendet, um ein neues Array squaredNumbers zu erstellen, indem jede Zahl im Array numbers quadriert wird.
Beispiel 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const names = persons.map((person) => {
return person.name;
});
console.log(names);
In diesem Beispiel wird die Methode map() verwendet, um die Eigenschaft name aus jedem Objekt im Array persons zu extrahieren und ein neues Array names zu erstellen, das nur die Namen enthält.
JavaScript-Array filter()
Die Methode filter() erstellt ein neues Array mit allen Elementen, die den durch die bereitgestellte Funktion definierten Test bestehen. Sie gibt ein neues Array zurück, das die Elemente enthält, welche die Bedingung erfüllen. Hier sind zwei Beispiele:
Beispiel 1
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
return number % 2 === 0;
});
console.log(evenNumbers);
In diesem Beispiel wird die Methode filter() verwendet, um ein neues Array evenNumbers zu erstellen, indem das Array numbers so gefiltert wird, dass es nur gerade Zahlen enthält.
Beispiel 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const adultPersons = persons.filter((person) => {
return person.age >= 18;
});
console.log(adultPersons);
In diesem Beispiel wird die Methode filter() verwendet, um ein neues Array adultPersons zu erstellen, indem das Array persons so gefiltert wird, dass es nur Personen enthält, die mindestens 18 Jahre alt sind.
JavaScript-Array reduce()
Die Methode reduce() führt eine Reducer-Funktion für jedes Element des Arrays aus und erzeugt dadurch einen einzelnen Ausgabewert. Sie übernimmt einen Akkumulator und das aktuelle Element als Argumente und gibt den Akkumulator für die nächste Iteration zurück. Hier sind einige Beispiele:
Beispiel 1
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum);
In diesem Beispiel wird die Methode reduce() verwendet, um die Summe aller Zahlen im Array numbers zu berechnen. Der Anfangswert des Akkumulators wird auf 0 gesetzt.
Beispiel 2
const words = ['Hello', 'World', 'JavaScript'];
const sentence = words.reduce((accumulator, currentValue) => {
return accumulator + ' ' + currentValue;
});
console.log(sentence);
In diesem Beispiel wird die Methode reduce() verwendet, um alle Wörter im Array words zu einem einzelnen Satz zu verketten. Der Akkumulator wird mit einem leeren String initialisiert.
Beispiel 3
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const totalAge = persons.reduce((accumulator, person) => {
return accumulator + person.age;
}, 0);
console.log(totalAge);
In diesem Beispiel wird die Methode reduce() verwendet, um das Gesamtalter aller Personen im Array persons zu berechnen. Der Akkumulator wird mit 0 initialisiert.
JavaScript-Array reduceRight()
Die Methode reduceRight() ähnelt der Methode reduce(), führt die Reducer-Funktion jedoch von rechts nach links aus, also vom letzten zum ersten Element. Hier sind zwei Beispiele:
Beispiel 1
const numbers = [1, 2, 3, 4, 5];
const reversedSum = numbers.reduceRight((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(reversedSum);
In diesem Beispiel wird die Methode reduceRight() verwendet, um die Summe aller Zahlen im Array numbers zu berechnen. Dabei beginnt sie beim letzten Element und arbeitet sich zum ersten Element vor.
Beispiel 2
const words = ['Hello', 'World', 'JavaScript'];
const reversedSentence = words.reduceRight((accumulator, currentValue) => {
return accumulator + ' ' + currentValue;
});
console.log(reversedSentence);
In diesem Beispiel wird die Methode reduceRight() verwendet, um alle Wörter im Array words zu einem einzelnen Satz zu verketten. Dabei beginnt sie beim letzten Wort und arbeitet sich zum ersten Wort vor.
JavaScript-Array every()
Die Methode every() prüft, ob alle Elemente im Array den durch die bereitgestellte Funktion definierten Test bestehen. Sie gibt true zurück, wenn die Funktion für alle Elemente true zurückgibt, andernfalls false. Hier sind zwei Beispiele:
Beispiel 1
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every((number) => {
return number % 2 === 0;
});
console.log(allEven);
In diesem Beispiel wird die Methode every() verwendet, um zu prüfen, ob alle Zahlen im Array numbers gerade sind. Sie gibt true zurück, da alle Zahlen die Bedingung erfüllen.
Beispiel 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const allAdults = persons.every((person) => {
return person.age >= 18;
});
console.log(allAdults);
In diesem Beispiel wird die Methode every() verwendet, um zu prüfen, ob alle Personen im Array persons volljährig sind, also mindestens 18 Jahre alt. Sie gibt true zurück, da alle Personen die Bedingung erfüllen.
JavaScript-Array some()
Die Methode some() prüft, ob mindestens ein Element im Array den durch die bereitgestellte Funktion definierten Test besteht. Sie gibt true zurück, wenn die Funktion für mindestens ein Element true zurückgibt, andernfalls false. Hier ist ein Beispiel:
Beispiel
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => {
return number % 2 === 0;
});
console.log(hasEvenNumber);
In diesem Beispiel wird die Methode some() verwendet, um zu prüfen, ob es im Array numbers mindestens eine gerade Zahl gibt. Sie gibt true zurück, da das Array gerade Zahlen enthält.
Erweiterte Methoden zur Array-Iteration
JavaScript bietet zusätzliche Methoden zur Array-Iteration mit erweiterten Funktionen. Dazu gehören:
- flatMap(): Erstellt ein neues Array, indem auf jedes Element eine Funktion angewendet und das Ergebnis anschließend abgeflacht wird.
- from(): Erstellt ein neues Array aus einem array-ähnlichen oder iterierbaren Objekt.
- keys(): Gibt ein neues Array-Iterator-Objekt zurück, das die Schlüssel für jeden Index im Array enthält.
- entries(): Gibt ein neues Array-Iterator-Objekt zurück, das Schlüssel-Wert-Paare für jeden Index im Array enthält.
- with(): Gibt ein neues Array zurück, in dem ein angegebenes Element durch ein neues Element ersetzt wurde. (Eingeführt in ES2023)
Sehen wir uns diese Methoden genauer an.
JavaScript-Array flatMap()
Die Methode flatMap() bildet zunächst jedes Element eines Arrays mithilfe einer Mapping-Funktion ab und flacht das Ergebnis anschließend in einem neuen Array ab. Sie kombiniert die Funktionalität von map() und flat() in einer einzigen Methode. Hier ist ein Beispiel:
Beispiel
const numbers = [1, 2, 3, 4, 5];
const mappedAndFlattened = numbers.flatMap((number) => {
return [number, number * 2];
});
console.log(mappedAndFlattened);
In diesem Beispiel wird die Methode flatMap() verwendet, um jede Zahl im Array numbers auf ein Array abzubilden, das die Zahl und ihren doppelten Wert enthält. Anschließend werden die resultierenden Arrays zu einem einzelnen Array abgeflacht.
Browserunterstützung
Die Methode flatMap() wird von modernen Browsern unterstützt, darunter Chrome 69+, Edge 79+, Firefox 62+, Safari 12+ und Opera 56+.
JavaScript-Array from()
Die Methode Array.from() erstellt ein neues Array aus einem array-ähnlichen oder iterierbaren Objekt. Sie ermöglicht Ihnen, Objekte mit einer length-Eigenschaft und indexierten Elementen in ein Array umzuwandeln. Hier ist ein Beispiel:
Beispiel
Array in JavaScript – Beispiel:
const arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
const array = Array.from(arrayLike);
console.log(array);
In diesem Beispiel wird die Methode Array.from() verwendet, um ein array-ähnliches Objekt in ein tatsächliches Array umzuwandeln.
Browserunterstützung
Die Methode Array.from() wird von modernen Browsern unterstützt, darunter Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ und Opera 38+. Internet Explorer unterstützt sie nicht.
JavaScript-Array keys()
Die Methode keys() gibt ein neues Array-Iterator-Objekt zurück, das die Schlüssel für jeden Index im Array enthält. Damit können Sie über die Array-Indizes iterieren. Hier ist ein Beispiel:
Beispiel
const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits.keys();
for (const key of iterator) {
console.log(key);
}
In diesem Beispiel wird die Methode keys() verwendet, um einen Iterator zu erhalten, der die Schlüssel beziehungsweise Indizes des Arrays fruits enthält. Die for...of-Schleife wird anschließend verwendet, um die Schlüssel zu durchlaufen und auszugeben.
Browserunterstützung
Die Methode keys() wird von modernen Browsern unterstützt, darunter Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ und Opera 38+. Internet Explorer unterstützt sie nicht.
JavaScript-Array entries()
Die Methode entries() gibt ein neues Array-Iterator-Objekt zurück, das Schlüssel-Wert-Paare für jeden Index im Array enthält. Jeder Eintrag ist ein Array in der Form [index, element]. Hier ist ein Beispiel:
Beispiel
Array in JavaScript – Beispiel:
const fruits = ['apple ', 'banana', 'orange']; const iterator = fruits.entries();
for (const [index, element] of iterator) { console.log(${index}: ${element}); }
In diesem Beispiel wird die Methode entries() verwendet, um einen Iterator zu erhalten, der Schlüssel-Wert-Paare für jeden Index im Array fruits enthält. Die for...of-Schleife wird anschließend verwendet, um jeden Eintrag in die Variablen index und element zu destrukturieren und auszugeben.
JavaScript-Array with()-Methode
Die Methode with() ist eine neue Ergänzung, die mit ECMAScript 2023 (ES2023) eingeführt wurde. Sie ermöglicht Ihnen, ein neues Array zu erstellen, in dem ein angegebenes Element durch ein neues Element ersetzt wird. Damit können Sie ein Element in einem Array aktualisieren, ohne das ursprüngliche Array zu verändern. Hier ist ein Beispiel:
Beispiel
const numbers = [1, 2, 3, 4, 5];
const updatedNumbers = numbers.with(2, 10);
console.log(numbers);
console.log(updatedNumbers);
In diesem Beispiel wird die Methode with() verwendet, um ein neues Array updatedNumbers zu erstellen, bei dem das Element am Index 2 durch den Wert 10 ersetzt wird. Das ursprüngliche Array numbers bleibt unverändert.
JavaScript-Array Spread (...)
Der Spread-Operator (...) ermöglicht Ihnen, ein Array in einzelne Elemente aufzufächern. Er kann verwendet werden, um Arrays zu verketten, Arrays als Argumente an Funktionen zu übergeben oder neue Arrays mit vorhandenen Elementen zu erstellen. Hier ist ein Beispiel:
Beispiel
const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'grape'];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits);
In diesem Beispiel wird der Spread-Operator verwendet, um die Arrays fruits und moreFruits zu einem neuen Array allFruits zu verketten.
Browserunterstützung
Der Spread-Operator wird von modernen Browsern unterstützt, darunter Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ und Opera 38+. Internet Explorer unterstützt ihn nicht.
Fazit
JavaScript bietet eine breite Palette an Methoden zur Array-Iteration, mit denen Entwickler Arrays durchlaufen, Elemente bearbeiten und auf Basis bestimmter Bedingungen neue Arrays erstellen können. In diesem Artikel haben wir verschiedene Methoden behandelt, darunter klassische Schleifen wie while, do...while, for, for...in und for...of sowie moderne Array-Methoden wie forEach(), map(), filter(), reduce(), every(), some() und weitere.
Das Verständnis und der gezielte Einsatz dieser Techniken zur Array-Iteration ermöglichen Entwicklern, beim Arbeiten mit Arrays prägnanten, effizienten und ausdrucksstarken Code zu schreiben. Wenn Sie diese Methoden beherrschen, können Sie komplexe Operationen auf Arrays problemlos ausführen und leistungsfähige JavaScript-Anwendungen mit Array-Schleifen entwickeln.
Schreiben Sie Code, auch wenn Sie Anfänger sind – mit Latenodes AI Assistent
