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 (auch wenn for in auch bei Arrays funktioniert … aber davon später).

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://wiki.selfhtml.org/wiki/HTML",
		"CSS"       : "https://caniuse.com",
		"JavaScript" : "https://colofon.de",
		"Farben"    : "https://wisotop.de",
		"Twitter"   : "https://twitter.com/Riecke"
	}
}

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 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://wiki.selfhtml.org/wiki/HTML"},
		{"CSS"		: "https://caniuse.com"},
		{"JavaScript": "https://colofon.de"},
		{"Farben"	: "https://wisotop.de"},
		{"Twitter"	: "https://twitter.com/Riecke"}
	]
}

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 auch für Javascript-Arrays?

Auch wenn for in als Schleife über Arrays bestens funktioniert, gilt for in bei Arrays nicht als gute Praxis. Bei einem Array kennen wir die Anzahl der Elemente und ein normaler for-Loop, forEach und heute auch for of ist besser angebracht.

for-in-Loops laufen über die Eigenschaften von Objekten, nicht über die Indizes eines Arrays. Die Reihenfolge der Durchläufe ist also nicht garantiert. for in ist für die Iteration über die Elemente von Objekten gedacht.

Für Arrays hat Javascript foreach für die Iteration mit einer Callback-Funktion in petto und for-of als eleganter Loop ohne Callback.

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");
}

for … of gibt es nur mit den immergrünen Browsern, IE11 gehört nicht dazu. Entweder auf dem Teppich bleiben oder einen Transpiler (Babel) einsetzen.

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>";
}

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

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

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