JavaScript Array Iteration

Die Iteration von Arrays ist ein grundlegendes Konzept in JavaScript, das es Entwicklern ermöglicht, Schleifen zu durchlaufen und Elemente in einem Array zu manipulieren. JavaScript bietet eine Vielzahl von Methoden, um über Arrays zu iterieren, von traditionellen Schleifen (while, do...while, for, for...in, for...of) bis 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 es Entwicklern, prägnanten, effizienten und aussagekräftigen Code für den Umgang mit Arrays zu schreiben, der für die Erstellung robuster JavaScript-Anwendungen unerlässlich ist. Das Verständnis dieser Methoden stellt auch die Kompatibilität mit modernen Browsern sicher, was sie für die moderne Webentwicklung praktisch macht.

Wichtige Erkenntnisse: JavaScript bietet verschiedene Methoden zur Iteration von Arrays, darunter traditionelle Schleifen (while, do...while, for, for...in, for...of) und moderne Array-Methoden (forEach, map, filter, reduce, reduceRight). Jede Methode hat einzigartige Eigenschaften, die sich für verschiedene Anwendungsfälle eignen, von einfachen Iterationen bis hin zu komplexen Transformationen. Die Beherrschung dieser Techniken ermöglicht es Entwicklern, effizienten, ausdrucksstarken Code für die Manipulation von Arrays zu schreiben, der für die Entwicklung leistungsstarker JavaScript-Anwendungen unerlässlich ist. Die meisten Methoden werden von modernen Browsern unterstützt, sodass eine breite Kompatibilität gewährleistet ist.

Was sind Schleifen in JavaScript?

Schleifen in JavaScript sind Kontrollstrukturen, die es Entwicklern ermöglichen, einen Codeblock wiederholt auszuführen, bis eine bestimmte Bedingung erfüllt ist. Sie bieten eine Möglichkeit, sich wiederholende Aufgaben zu automatisieren und Arrays oder Datensammlungen effizient zu verarbeiten. In JavaScript gibt es verschiedene Arten von Schleifen, darunter while, do...while, for, for...in und for...of, jede mit ihrer eigenen Syntax und Anwendungsfällen.

Wie man mit einer While-Schleife in JavaScript durch ein Array schleift

Die while-Schleife durch ein Array von Objekten in Javascript führt einen Codeblock aus, solange eine bestimmte Bedingung erfüllt ist. Sie ist eine vielseitige Schleife, mit der du durch Arrays iterieren kannst, indem du die Indexvariable manuell verwaltest. Hier ist ein Beispiel für die Verwendung einer while-Schleife, um über ein Array zu iterieren:

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 so lange ausgeführt, wie der Index i kleiner ist als die Länge des Zahlenfeldes. Die Schleife gibt jedes Element auf der Konsole aus und erhöht die Indexvariable.

Wie man mit einer do...while-Schleife in JavaScript durch ein Array läuft

Die do...while-Schleife ähnelt der while-Schleife, aber sie garantiert, dass der Codeblock mindestens einmal ausgeführt wird, bevor die Bedingung überprüft wird. Hier ist ein Beispiel für die Verwendung einer do...while-Schleife in Javascript:

const fruits = ['apple', 'banana', 'orange'];
let i = 0;

do {
  console.log(fruits[i]);
  i++;
} while (i < fruits.length);

In this case, the loop prints each fruit to the console and increments the index variable. The loop continues until the condition i < fruits.length evaluates to false.

Wie man mit einer for-Schleife in JavaScript durch ein Array schleift

Die for-Schleife ist eine kompakte und weit verbreitete Schleifenstruktur in JavaScript. Sie kombiniert die Initialisierung, die Bedingung und die Inkrement-/Dekrement-Ausdrücke in einer einzigen Zeile. Hier 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]);
}

The for loop initializes the index variable i to 0, checks the condition i < colors.length, and increments i after each iteration. The loop prints each color to the console.

Wie man mit einer for...in-Schleife in JavaScript durch ein Array schleift

Die for...in-Schleife wird verwendet, um über die Eigenschaften eines Objekts zu iterieren. Wenn sie mit Arrays verwendet wird, 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 Personen-Arrays. Sie gibt jeden Index und den entsprechenden Wert auf der Konsole aus.

Wie man mit einer for...of-Schleife in JavaScript durch ein Array schleift

Die for...of-Schleife, die in ECMAScript 2015 (ES6) eingeführt wurde, bietet eine prägnantere und lesbarere Möglichkeit, über iterierbare Objekte, einschließlich Arrays, zu iterieren. Sie greift direkt auf die Werte des Arrays zu, ohne dass eine Indexvariable benötigt wird. 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 Zahlen-Arrays und ordnet es der Variablen number zu. Die Schleife gibt jede Zahl auf der Konsole aus.

Wie man mit einer forEach-Schleife in JavaScript durch ein Array läuft

Die forEach()-Methode ist eine eingebaute Array-Methode, die eine bereitgestellte Funktion für jedes Array-Element einmal ausführt. Sie bietet einen ausdrucksstarken und funktionalen Ansatz für die Iteration von Arrays. 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 nimmt eine Pfeilfunktion als Argument, die jede Frucht als Parameter erhält und sie auf der Konsole ausgibt.

Andere Array Iterationsmethoden

JavaScript bietet mehrere andere Methoden zur Iteration von Arrays, die leistungsstarke Möglichkeiten zur Manipulation und Umwandlung von Arrays bieten. Zu diesen Methoden gehören:

• map(): Erzeugt ein neues Array, indem es eine angegebene Funktion für jedes Element im Array aufruft.
• filter(): Erzeugt ein neues Array mit allen Elementen, die den von der angegebenen Funktion implementierten Test bestehen.
• reduce(): Führt für jedes Element des Arrays eine Reduzierfunktion aus, die einen einzigen Ausgabewert ergibt.
• every(): Prüft, ob alle Elemente im Array den von der angegebenen Funktion implementierten Test bestehen.
• some(): Prüft, ob mindestens ein Element im Array den von der angegebenen Funktion implementierten Test besteht.

Wir werden diese Methoden in den folgenden Abschnitten genauer untersuchen.

JavaScript Array forEach()

Die Methode forEach() führt eine angegebene Funktion für jedes Array-Element einmal aus. Sie gibt kein neues Array zurück, sondern ermöglicht es dir, für jedes Element eine Aktion auszuführen. Hier sind ein paar Beispiele:

Beispiel 1

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
  console.log(number);
});

In diesem Beispiel wird die forEach()-Methode verwendet, um jede Zahl im Zahlen-Array auf 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 in ein neues Array upperCaseFruits zu verschieben.

JavaScript Array map()

Die Methode map() erstellt ein neues Array, indem sie eine angegebene Funktion für jedes Element des Arrays aufruft. Sie gibt ein neues Array mit den Ergebnissen des Funktionsaufrufs für jedes Element zurück. Hier sind ein paar 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 map()-Methode verwendet, um die Eigenschaft name aus jedem Objekt im Personen-Array zu extrahieren und ein neues Array names zu erstellen, das nur die Namen enthält.

JavaScript Array filter()

Die filter()-Methode erstellt ein neues Array mit allen Elementen, die den von der angegebenen Funktion implementierten Test bestehen. Sie gibt ein neues Array mit den Elementen zurück, die die Bedingung erfüllen. Hier sind ein paar 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 filter()-Methode verwendet, um ein neues Array evenNumbers zu erstellen, indem das Zahlen-Array 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 filter()-Methode verwendet, um ein neues Array adultPersons zu erstellen, indem das Array persons so gefiltert wird, dass es nur Personen enthält, die 18 Jahre alt oder älter sind.

JavaScript Array reduzieren()

Die Methode reduce() führt für jedes Element des Arrays eine Reduzierfunktion aus, die einen einzigen Ausgabewert liefert. Sie nimmt einen Akkumulator und das aktuelle Element als Argumente und gibt den Akkumulator für die nächste Iteration zurück. Hier sind ein paar 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 einzigen Satz zu verketten. Der Akkumulator wird mit einer leeren Zeichenkette 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 Personen-Array zu berechnen. Der Akkumulator wird auf 0 initialisiert.

JavaScript Array reduceRight()

Die Methode reduceRight() ähnelt der Methode reduce(), aber sie führt die Reduzierfunktion von rechts nach links aus (vom letzten Element zum ersten Element). Hier sind ein paar 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 Zahlen-Array zu berechnen, beginnend mit dem letzten Element und in Richtung des ersten Elements.

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 einzigen Satz zu verketten, beginnend mit dem letzten Wort und in Richtung des ersten Worts.

JavaScript Array alle()

Die Methode every() prüft, ob alle Elemente im Array den von der angegebenen Funktion implementierten Test bestehen. Sie gibt true zurück, wenn die Funktion für alle Elemente true liefert, und false, wenn nicht. Hier sind ein paar 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 Zahlenfeld 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 Personen-Array erwachsen sind (Alter größer oder gleich 18). Sie gibt true zurück, da alle Personen die Bedingung erfüllen.

JavaScript Array some()

Die Methode some() prüft, ob mindestens ein Element des Arrays den von der angegebenen Funktion implementierten Test besteht. Sie gibt true zurück, wenn die Funktion für mindestens ein Element true liefert, und false, wenn nicht. 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 mindestens eine gerade Zahl im Zahlenfeld gibt. Sie gibt true zurück, da das Array gerade Zahlen enthält.

Fortgeschrittene Array Iterationsmethoden

JavaScript bietet zusätzliche Methoden zur Iteration von Arrays, die erweiterte Funktionen bieten. Zu diesen Methoden gehören:

• flatMap(): Erzeugt ein neues Array, indem es eine Funktion auf jedes Element anwendet und das Ergebnis dann platt macht.
• from(): Erzeugt 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.
• Einträge(): Gibt ein neues Array-Iterator-Objekt zurück, das Schlüssel-Wert-Paare für jeden Index im Array enthält.
• mit(): Gibt ein neues Array zurück, in dem ein angegebenes Element durch ein neues Element ersetzt wurde. (Eingeführt in ES2023)

Wir wollen uns diese Methoden genauer ansehen.

JavaScript Array flatMap()

Die Methode flatMap() ordnet zunächst jedes Element eines Arrays mithilfe einer Zuordnungsfunktion zu und flacht dann das Ergebnis in ein neues Array ab. Sie kombiniert die Funktionen 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 Zahlen-Array auf ein Array abzubilden, das die Zahl und ihr Double enthält, und dann die resultierenden Arrays zu einem einzigen Array zu reduzieren.

Browser-Unterstützung

Die flatMap()-Methode wird in 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. Mit ihr kannst du Objekte, die eine Längeneigenschaft und indizierte Elemente haben, in ein Array umwandeln. Hier ist ein Beispiel:

Beispiel

Array in einem 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 echtes Array umzuwandeln.

Browser-Unterstützung

Die Methode Array.from() wird in modernen Browsern unterstützt, darunter Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ und Opera 38+. Im Internet Explorer wird sie nicht unterstützt.

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 kannst du ü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 (Indizes) des Arrays fruits enthält. Die for...of-Schleife wird dann verwendet, um die Schlüssel zu durchlaufen und sie zu drucken.

Browser-Unterstützung

Die keys()-Methode wird in modernen Browsern unterstützt, darunter Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ und Opera 38+. Im Internet Explorer wird sie nicht unterstützt.

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 einem 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. In der Schleife "for...of" wird dann jeder Eintrag in die Variablen "index" und "element" zerlegt und ausgedruckt.

JavaScript Array mit() Methode

Die Methode `with()` ist eine neue Ergänzung, die in ECMAScript 2023 (ES2023) eingeführt wurde. Mit ihr kannst du ein neues Array erstellen, in dem ein bestimmtes Element durch ein neues Element ersetzt wird. Sie bietet eine Möglichkeit, ein Element in einem Array zu 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, in dem das Element bei Index 2 durch den Wert 10 ersetzt wird. Das ursprüngliche Zahlen-Array bleibt unverändert.

JavaScript Array Spread (...)

Der Spreizungsoperator (...) ermöglicht es dir, ein Array in einzelne Elemente zu zerlegen. Er kann verwendet werden, um Arrays zu verketten, Arrays als Argumente an Funktionen zu übergeben oder neue Arrays mit bestehenden Elementen zu erstellen. Hier ist ein Beispiel:

Beispiel

const fruits = ['Apfel', 'Banane'];
const moreFruits = ['Orange', 'Traube'];
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.

Browser-Unterstützung

Der Spread-Operator wird in modernen Browsern unterstützt, darunter Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ und Opera 38+. Im Internet Explorer wird er nicht unterstützt.

Einpacken

JavaScript bietet eine breite Palette von Array-Iterationsmethoden, die es Entwicklern ermöglichen, Javascript-Schleifen durch Arrays zu ziehen, Elemente zu manipulieren und neue Arrays basierend auf bestimmten Bedingungen zu erstellen. In diesem Artikel haben wir uns verschiedene Methoden angesehen, darunter traditionelle Schleifen wie while, do...while, for, for...in und for...of sowie moderne Array-Methoden wie forEach(), map(), filter(), reduce(), every(), some() und mehr.

Wenn du diese Array-Iterationstechniken verstehst und anwendest, kannst du prägnanten, effizienten und aussagekräftigen Code schreiben, wenn du mit Arrays in JavaScript arbeitest. Wenn du diese Methoden beherrschst, kannst du mit Leichtigkeit komplexe Operationen mit Arrays durchführen und leistungsstarke JavaScript-Array-Schleifenanwendungen erstellen.

FAQ

Was ist der Unterschied zwischen for...of und for...in Schleifen?

Die for...of-Schleife wird verwendet, um über die Werte eines iterierbaren Objekts, z. B. eines Arrays, zu iterieren, während die for...in-Schleife verwendet wird, um über die aufzählbaren Eigenschaften eines Objekts, einschließlich Array-Indizes, zu iterieren.

Wann sollte ich map() anstelle von forEach() verwenden?

Verwende map(), wenn du ein neues Array erstellen willst, indem du jedes Element eines bestehenden Arrays umwandelst. Verwende forEach(), wenn du eine Aktion für jedes Element eines Arrays durchführen willst, ohne ein neues Array zu erstellen.

Wie kann ich über ein Array in umgekehrter Reihenfolge iterieren?

Du kannst die Methode reverse() verwenden, um die Reihenfolge der Elemente in einem Array umzukehren und dann mit einer der in diesem Artikel besprochenen Iterationsmethoden über das umgekehrte Array zu iterieren.

Wie kann ich eine Schleife vorzeitig verlassen?

Du kannst die break-Anweisung verwenden, um eine Schleifenanordnung in Javascript vorzeitig zu verlassen. Wenn du innerhalb einer Schleife auf break triffst, wird die Schleife sofort beendet und die Kontrolle an die nächste Anweisung nach der Schleife übergeben.