for-of – Iteration

Javascript for of

for of ist eine Perle aus ES6 und läuft über alle Datenstrukturen, nur nicht über Javascript Objekte, denn die haben keinen sequentiellen Index wie Arrays.

Das Schöne an der Schleife mit for of: Sie ist kurz und bündig, ohne zusätzliche Variablen für den Index und ohne Callback.

const arr = ["Blaubeeren", "Himbeeren", "", "Holunderbeeren", "Wachholderbeeren"];
for (const elem of arr) {
	console.log (elem);
}

Anstelle von const elem kann let elem verwendet werden, wenn der Variablen in der Iteration ein neuer Wert zugewiesen werden soll.

for of mit Index

Die Methode entries() gibt ein neues Array-Iterator-Objekt mit den Schlüssel/Wert-Paaren für jeden Index des Arrays.

for (const [index, elem] of arr.entries()) {
	console.log (`${index} . ${elem}`);
}

Eine HTML-Tabelle mit for of auswerten, z.B. um ein Chart der Stückzahlen zu erzeugen:

const tr = document.querySelectorAll ("tr"); // Alle Zeilen der Tabelle
let td = [];
for (const [index, row] of tr.entries()) {
	// Erste Zelle jeder Zeile
	td[index] = row.querySelectorAll("td:nth-child(1)");
	
	for (const item of td[index]) {
		console.log (parseInt(item.innerHTML));
	}
}

Mit for-of über mehrere Listen

Wenn über mehr als eine Sammlung, Liste oder ein JSON-Array iteriert werden soll, erledigt das ebenfalls ein Index in der for-of-Iteration.

const n = [
	{"name": "Gams", "location": "Berge"}, 
	{"name": "Kuh", "location": "Weide"}, 
	{"name": "Krokodil", "location": "Fluß"}, 
	{"name": "Schaf", "location": "Wiese"}
];
const m = ["🐃", "🐄", "🐊", "🐑"];

for (const [index, item] of n.entries()) {
	const animal = m[index];
	document.querySelector(".entry").innerHTML += `${animal} ${item.name} ${item.location}<br>`;
}

for of vs forEach

Der Clou der forEach-Schleife ist die Callback-Funktion. Wenn wir die nicht brauchen, ist ein for-of-Loop eleganter und einfacher.

for of unterstützt die ganze Bandbreite der Flußkontrolle: break und continue, return, yield und await.

break unterbricht die Iteration.

for (const elem of arr) {
	if (elem.length === 0) break;
	console.log (elem);
}

forEach() – await wartet nicht

Die for-of-Schleife ist besser für await/async. Bei forEach() wartet await nicht auf vorherige Durchläufe, aber for-of wartet auf jede Anfrage.

const urls = ["url1", "url2", "url3"];

async function fetchData() {
    for (const url of urls) {
        const response = await fetch(url);  // ✅ Wartet auf jede Anfrage
        const data = await response.json();
        console.log(data);
    }
}

fetchData();

for of oder forEach?

Wann sollte for-of anstelle von forEach eingesetzt werden?

Chaining, das Verketten von Funktionen ist ein großes Plus bei forEach().

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

zahlen
    .filter(n => n % 2 === 0)       // 🔹 Nur gerade Zahlen behalten
    .map(n => n * 10)               // 🔹 Jeden Wert mit 10 multiplizieren
    .forEach(n => console.log(n));  // 🔹 Jeden Wert ausgeben

for- und while-Schleifen im Vergleich

for of mit JSON

const json = [
{
  "author": "Austen",
  "firstname": "Jane",
  "books": ["Sanditon", "Stolz und Vorurteil", "Emma"]
},
{
  "author": "Arnim",
  "firstname": "Elizabeth",
  "books": ["Verzauberter April", "Die Reisegesellschaft", "Elisabet auf Rügen"]
},
{
  "author": "Sayers",
  "firstname": "Dorothy",
  "books": ["Murder must adversise", "Der Glocken Schlag", "Hochzeit kommt vor dem Fall", "Figaros Eingebung"]
}];

for (const item of json) {
	console.log (item.author);
	for (const [index, books] of item.books.entries()) {
		console.log (`${index} . ${books}`);
	}
}

for of mit Object

Der Operand der for-Schleife muss iterierbar sein. Eine Hilfsfunktion macht es möglich, schrittweise über einfache Objekte zu laufen.

Wenn ein Wert einem Array ähnelt, wandelt Array.from () den Wert in ein Array um.