for-of – Iterationen

for in über Objekte iterieren

for of-Loops sind mit ES6 eingezogen und iterieren über alles, was einen Index hat und Schritt für Schritt durchlaufen werden kann. Dazu gehören neben Arrays, Sets, Maps und String auch nodelists und HTML-Collections, die mit querySelectorAll oder getElementsByName gesammelt wurden.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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 und ohne zusätzliche Variablen für den Index. 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);
}


			

for of mit Index

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

for of vs foreach

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.