for-of – Iteration

Javascript for of

for of ist die 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: kurz und bündig, ohne zusätzliche Variablen für den Index und ohne Callback. Obendrein läuft for of über alles, was iterierbar (sequentiell) ist: Array, Map, Set, String, Filelist, Nodelist.

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 von foreach 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);
}

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.