Veröffentlicht: 1. Mai 2025
Wenn Sie JavaScript schreiben, werden Sie häufig iterieren. Sie schreiben entweder Schleifen, um mit Arrays zu arbeiten, oder verwenden Methoden der funktionalen Programmierung wie map, filter und ähnliche Methoden, um alle Arten von Daten zu verarbeiten.
Ein Nachteil dieser Methoden ist jedoch, dass sie nur für Arrays verfügbar sind. Wenn Sie sie auf einem iterierbaren Objekt verwenden möchten, müssen Sie es in ein Array konvertieren und dann die gewünschte Methode aufrufen. Das kann ineffizient sein. In Fällen, in denen das Interable einen unendlichen Datensatz mithilfe von Generatorfunktionen enthält, ist dies nicht möglich. Jetzt, da Iterator-Hilfsfunktionen als Baseline Newly verfügbar sind, ist diese Funktion endlich in allen Browsern verfügbar.
Wie funktionieren Iterator-Hilfsfunktionen?
Iterator-Hilfsfunktionen werden durch Definieren neuer Methoden für das prototype des Iterator-Objekts freigegeben. Diese Methoden stimmen mit vielen Methoden der funktionalen Programmierung überein, die Sie bereits kennen, z. B. map, filter, reduce und ähnliche Methoden.
Sie können beispielsweise einen Iterator-Hilfsmechanismus für die filter-Methode verwenden, um Listenelemente für eine Sammlung von DOM-Knoten nach dem Inhalt ihrer innerText-Eigenschaft zu filtern, die Sie dann später in einer for-Schleife verwenden können:
const posts = document.querySelectorAll("ul#specific-list > li")
.values()
.filter(item => item.textContent.includes("kiwi"));
// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
console.log(post.textContent);
}
Im vorherigen Code-Snippet wird die Iterator-Hilfsmethode für filter verwendet, um alle <li>-Elemente in einem bestimmten <ul>-Element zu durchlaufen. Das Filterkriterium besteht darin, dass der Textinhalt jedes Elements einen Teilstring von "kiwi" enthalten muss.
Iterator-Hilfsfunktionen können auch mit Generatorfunktionen verwendet werden. In diesem Beispiel wird eine Generatorfunktion verwendet, die Fakultätswerte berechnet, aber mit dem Iterator-Hilfsprogramm Werte herausfiltert, die durch 8 teilbar sind, und die ersten fünf gefilterten Werte in der Konsole protokolliert:
function* factorials (n) {
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
yield result;
}
}
const filteredFactorials = factorials(128).filter(x => x % 8 === 0);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
Insbesondere ist das vorherige Code-Snippet ein Beispiel für etwas, das mit Iterator-Hilfsfunktionen nicht möglich wäre, da die Anzahl der Fakultäten unendlich ist und nicht in ein Array umgewandelt werden kann.
Je nach Situation haben Iterator-Hilfsfunktionen großes Potenzial. Sie sind für jede der folgenden iterierbaren Methoden verfügbar:
Die Möglichkeiten für Anwendungsfälle von Iterator-Hilfsfunktionen sind vielfältig und können die Ergonomie für Entwickler erheblich verbessern. Da sie jetzt als Baseline Newly verfügbar sind, können Sie sie mit der Zeit immer sicherer verwenden, ohne Angst vor Kompatibilitätsproblemen zu haben. Weitere Informationen finden Sie in den folgenden Ressourcen: