JavaScript-Array-Iteration

Array-Iteration ist ein grundlegendes Konzept in JavaScript, das es Entwicklern ermöglicht, Elemente innerhalb eines Arrays zu durchlaufen und 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 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 es Entwicklern, prägnanten, effizienten und ausdrucksstarken Code für die Handhabung von Arrays zu schreiben, was für die Erstellung robuster JavaScript-Anwendungen unerlässlich ist. Das Verständnis dieser Methoden gewährleistet auch die Kompatibilität mit modernen Browsern und macht sie für die moderne Webentwicklung praktisch.

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

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. JavaScript bietet mehrere Schleifentypen, darunter while, do...while, for, for...in und for...of, jeweils mit eigener Syntax und eigenen Anwendungsfällen.

So durchlaufen Sie ein Array mit einer While-Schleife in JavaScript

Die While-Schleife durch ein Array von Objekten in JavaScript führt einen Codeblock aus, solange eine angegebene Bedingung als wahr ausgewertet wird. Es handelt sich um eine vielseitige Schleife, mit der man durch Arrays iterieren kann, indem man die Indexvariable manuell verwaltet. Hier ist ein Beispiel für die Verwendung einer While-Schleife zum Iterieren durch 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 so lange ausgeführt, wie der Index i kleiner als die Länge des Zahlen-Arrays ist. Die Schleife gibt jedes Element auf der Konsole aus und erhöht die Indexvariable.

So durchlaufen Sie ein Array mit einer do...while-Schleife in JavaScript

Die do...while-Schleife ist der while-Schleife ähnlich, garantiert aber, 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-Array-Schleife 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 auf der Konsole aus und erhöht die Indexvariable. Die Schleife wird fortgesetzt, bis die Bedingung i < fruits.length als falsch 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 Initialisierung, Bedingung und Inkrement/Dekrement in einer einzigen Zeile. Hier ist ein Beispiel für die Verwendung einer For-Schleife zum Durchlaufen eines Arrays:

const colors = ['red', 'green', 'blue'];

for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

Die for-Schleife initialisiert die Indexvariable i auf 0, überprüft die Bedingung i < colors.length und erhöht i nach jeder Iteration. Die Schleife gibt jede Farbe auf 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 Verwendung mit Arrays iteriert sie über 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 entsprechenden Wert auf der Konsole aus.

So durchlaufen Sie ein Array mit einer for...of-Schleife in JavaScript

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 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 Zahlen-Arrays und weist es der Variablen Zahl zu. Die Schleife gibt jede Zahl auf der Konsole aus.

So durchlaufen Sie ein Array mit einer forEach-Schleife in JavaScript

Die forEach()-Methode 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 „Früchte“ aufgerufen. Sie verwendet als Argument eine Pfeilfunktion, die jede Frucht als Parameter empfängt und auf der Konsole ausgibt.

Andere Array-Iterationsmethoden

JavaScript bietet mehrere andere Array-Iterationsmethoden, die leistungsstarke Funktionen zum Bearbeiten und Transformieren von Arrays bieten. Zu diesen Methoden gehören:

• map(): Erstellt ein neues Array, indem für jedes Element im Array eine bereitgestellte Funktion aufgerufen wird.
• filter(): Erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.
• reduce(): Führt für jedes Element des Arrays eine Reduzierungsfunktion aus, was zu einem einzelnen Ausgabewert führt.
• every(): Testet, ob alle Elemente im Array den von der bereitgestellten Funktion implementierten Test bestehen.
• some(): Testet, ob mindestens ein Element im Array den von der bereitgestellten Funktion implementierten Test besteht.

Wir werden diese Methoden in den folgenden Abschnitten genauer untersuchen.

JavaScript-Array fürJeden()

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 aber, für jedes Element eine Aktion auszuführen. Hier sind einige 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 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 Früchte-Array in Großbuchstaben umzuwandeln und in ein neues Array „upperCaseFruits“ zu verschieben.

JavaScript Array map()

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

JavaScript Array filter()

Die Methode filter() erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen. Sie gibt ein neues Array zurück, das die Elemente enthält, die die Bedingung erfüllen. Hier sind einige 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 mit geraden Zahlen zu erstellen, indem das Zahlen-Array so gefiltert wird, dass nur gerade Zahlen enthalten sind.

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 Personen-Array so gefiltert wird, dass nur Personen eingeschlossen werden, die 18 Jahre oder älter sind.

JavaScript-Array reduzieren ()

Die Methode „reduce()“ führt eine Reducer-Funktion für jedes Element des Arrays aus, was zu einem einzelnen Ausgabewert führt. Sie verwendet 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 einzigen Satz zusammenzufassen. Der Akkumulator wird mit einer leeren Zeichenfolge 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 auf 0 initialisiert.

JavaScript-Array reduceRight()

Die Methode „reduceRight()“ ähnelt der Methode „reduce()“, führt die Reducer-Funktion jedoch von rechts nach links aus (vom letzten zum ersten Element). Hier sind einige 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 Wörter-Array zu einem einzigen Satz zu verketten, beginnend mit dem letzten Wort und in Richtung des ersten Worts.

JavaScript-Array every()

Die Methode every() prüft, ob alle Elemente im Array den von der bereitgestellten Funktion implementierten Test bestehen. Sie gibt true zurück, wenn die Funktion für alle Elemente true zurückgibt, andernfalls false. Hier sind einige 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“ Erwachsene 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 im Array den von der bereitgestellten Funktion implementierten 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 das Array „numbers“ mindestens eine gerade Zahl enthält. Sie gibt „true“ zurück, da das Array gerade Zahlen enthält.

Erweiterte Array-Iterationsmethoden

JavaScript bietet zusätzliche Array-Iterationsmethoden, die erweiterte Funktionen bieten. Zu diesen Methoden gehören:

• flatMap(): Erstellt ein neues Array, indem auf jedes Element eine Funktion angewendet und dann das Ergebnis 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)

Lassen Sie uns diese Methoden genauer untersuchen.

JavaScript Array flatMap()

Die Methode flatMap() ordnet zunächst jedes Element eines Arrays mithilfe einer Zuordnungsfunktion zu und flacht das Ergebnis dann 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 Zahlen-Array einem Array zuzuordnen, das die Zahl und ihren Double enthält, und um die resultierenden Arrays dann zu einem einzigen Array zusammenzufassen.

Browser-Unterstützung

Die Methode flatMap() wird in modernen Browsern unterstützt, darunter Chrome 69+, Edge 79+, Firefox 62+, Safari 12+ und Opera 56+.

JavaScript-Array von ()

Die Methode Array.from() erstellt ein neues Array aus einem arrayähnlichen oder iterierbaren Objekt. Sie ermöglicht es Ihnen, Objekte mit einer Längeneigenschaft und indizierten Elementen in ein Array umzuwandeln. Hier ist ein Beispiel:

Beispiel

Array im 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 zu konvertieren.

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+. Sie wird im Internet Explorer nicht unterstützt.

JavaScript-Array-Schlüssel ()

Die Methode keys() gibt ein neues Array-Iterator-Objekt zurück, das die Schlüssel für jeden Index im Array enthält. Sie können damit ü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 abzurufen, der die Schlüssel (Indizes) des Arrays fruits enthält. Anschließend wird die for...of-Schleife verwendet, um über die Schlüssel zu iterieren und sie auszudrucken.

Browser-Unterstützung

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

JavaScript-Array-Einträge ()

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 im 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 Schleife `for...of` wird dann verwendet, um jeden Eintrag in die Variablen `index` und `element` zu zerlegen und auszudrucken.

JavaScript-Array mit () -Methode

Die Methode `with()` ist eine neue Ergänzung, die in ECMAScript 2023 (ES2023) eingeführt wurde. Sie ermöglicht es Ihnen, ein neues Array zu erstellen, bei dem ein angegebenes 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);

Es gibt einen Teil der ...
In diesem Beispiel wird die Methode with() verwendet, um ein neues Array „updatedNumbers“ zu erstellen, in dem das Element am Index 2 durch den Wert 10 ersetzt wird. Das ursprüngliche Numbers-Array bleibt unverändert.

JavaScript-Array-Verteilung (...)

Mit dem Spread-Operator (...) können Sie ein Array in einzelne Elemente aufteilen. 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.

Browser-Unterstützung

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

Fazit

JavaScript bietet eine breite Palette von Array-Iterationsmethoden, mit denen Entwickler Array-Schleifen durchführen, Elemente bearbeiten und basierend auf bestimmten Bedingungen neue Arrays erstellen können. In diesem Artikel haben wir verschiedene Methoden untersucht, 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.

Das Verstehen und Nutzen dieser Array-Iterationstechniken ermöglicht Entwicklern, prägnanten, effizienten und ausdrucksstarken Code zu schreiben, wenn sie mit Arrays für jedes in JavaScript arbeiten. Durch die Beherrschung dieser Methoden können Sie komplexe Operationen an Arrays mit Leichtigkeit durchführen und leistungsstarke JavaScript-Array-Loop-Anwendungen 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, beispielsweise eines Arrays, zu iterieren, während die for...in-Schleife verwendet wird, um über die aufzählbaren Eigenschaften eines Objekts, einschließlich der Array-Indizes, zu iterieren.

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

Verwenden Sie map(), wenn Sie ein neues Array erstellen möchten, indem Sie jedes Element eines vorhandenen Arrays transformieren. Verwenden Sie forEach(), wenn Sie eine Aktion für jedes Element eines Arrays ausführen möchten, ohne ein neues Array zu erstellen.

Wie kann ich ein Array in umgekehrter Reihenfolge durchlaufen?

Mit der Methode reverse() können Sie die Reihenfolge der Elemente in einem Array umkehren und dann mit einer der in diesem Artikel beschriebenen Iterationsmethoden über das umgekehrte Array iterieren.

Wie kann ich eine Schleife vorzeitig verlassen?

Mit der break-Anweisung können Sie ein Schleifen-Array in JavaScript vorzeitig verlassen. Wenn break innerhalb einer Schleife auftritt, wird die Schleife sofort beendet und die Steuerung an die nächste Anweisung nach der Schleife übertragen.