Javascript Objekte mit for in durchlaufen

Javascript for in

Javascript Objekte haben keinen sequentiellen Index wie Arrays. for in ist ein Sonderfall der for-Anweisung und dient allein der Iteration durch Objekte. In jeder Iteration wird einem Element des Objekts der Variablenname key zugewiesen. Wenn alle Eigenschaften bearbeitet sind, endet der Loop.

for (key in myObject) {
   key ist der Key des aktuellen Elements
   myObject[key] ist der aktuelle Wert
   Anweisungen;
}

Bei Objekten durchläuft for in alle Eigenschaften eines Objekts.

<ul class="links">
</ul>

const info = {
	"tutorials" : "HTML, CSS und Javascript",
	"website" : "mediaevent.de",
	"links" : {
		"HTML"      : "https://www.mediaevent.de/html/",
		"CSS"       : "https://www.mediaevent.de/css/",
		"JavaScript": "https://www.mediaevent.de/javascript/",
		"Tutorial"  : "https://www.mediaevent.de/tutorial/",
		"SVG"       : "https://www.mediaevent.de/tutorial/svg.html"
	}
}

let output = "";
for (key in info.links) {
	if (info.links.hasOwnProperty(key )) {
		output += `<li><a href="${info.links[key]}"> ${key}</a></li>`;
	}
}

document.querySelector ("ul.links").innerHTML = output;

info.links[key] wird zwar mit eckigen Klammern wie ein Array notiert, aber spricht das Objekt mit der Liste der Links an.

for in-Anweisungen sollten immer prüfen, ob nicht weitere Scripte (weder eigene oder Libraries) eigene Eigenschaften hinzugefügt haben. if (info.links.hasOwnProperty(key)) verhindert, dass Eigenschaften, die von anderen Scripten hinzugefügt wurden, in die Liste geraten.

for in kann heute auch durch foreach ersetzt werden, der modernen Variante des klassischen for-Loops.

Reihenfolge der Eigenschaften von Objekten

Problematisch beim FOR IN ist, dass die Reihenfolge der Elemente nicht sicher gestellt ist, sondern letztendlich nur eine ungeordnete Liste.

Wenn die Reihenfolge doch eine Rolle spielt, sind die Daten in einem Array besser untergebracht. Das bringt einiges mehr an Schreibarbeit.

const info = {
	"tutorials" : "HTML, CSS und Javascript",
	"website" : "mediaevent.de",
	"links" : [
		{"HTML"      : "https://www.mediaevent.de/html/"},
		{"CSS"       : "https://www.mediaevent.de/css/"},
		{"JavaScript": "https://www.mediaevent.de/javascript/"},
		{"Tutorial"  : "https://www.mediaevent.de/tutorial/"},
		{"SVG"       : "https://www.mediaevent.de/tutorial/svg.html"}
	]
}

let out = "";
for (let i=0; i<info.links.length; i++) {
	for (key in info.links[i]) {
		if (info.links[i].hasOwnProperty(key)) {
			out += "<li>" + "<a hef='" + info.links[i][key] +  "'>" + key + "</a></li>";
		}
	}
}

document.querySelector("ul.links").innerHTML = out;

for in vs for of

Das gibts auch: Während for in über die Eigenschaften eines Objekts iteriert,läuft for of durch die Werte von iterablen Objekten. Für die NodeList aus querySelectorAll zurückgegeben wird, ist for of wie gebacken:

const nodes = document.querySelectorAll (".item");
for (const item of nodes) {
  item.setAttribute ("style", "border:4px solid #7BB9CA");
}

Object.keys() – Objekte in Arrays umwandeln

Object.keys() gibt ein Array mit den Eigenschaften des Objektes zurück. Die Elemente des Arrays haben dieselben Reihenfolge wie in einer for in-Schleife

var obj = { 100: "Waldfrüchte", 50: "Beeren", 200: "Kulturpflanzen", 2: "Getreide"};

Object.keys(obj).forEach (function (val, key) {
   result1.innerHTML += "index[" + key + "] " + val + " " + obj[val] + "<br>";
});

for (var key in obj) {
   result2.innerHTML += "for in: " + key + ' : ' + obj[key] + "<br>";
}

Object.keys wird von allen modernen Browsern (IE ab Version 9) unterstützt.

Neben Object.keys wandeln weitere Funktionen Objekte in Arrays um:

const fruity = {
	"Regen": "☂",
	"Sonne": "☀",
	"Schnee": "☃"
}

Object.values (fruity) = ["☂", "☀", "☃"];

Object.entries (fruity) = [["Regen","☂"], ["Sonne","☀"], ["Schnee","☃"]];

for- und while-Schleifen im Vergleich