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 in Zukunft durch forEach ersetzt werden, wenn Object.keys von allen Browsern zuverlässig unterstützt wird.

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 JS 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 oder forEach ist besser angebracht.

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

Dennoch kann ein for-in-Loop über ein Array durchaus sinnvoll sein – wir sind wieder einmal bei Arrays mit Löchern (sparse arrays) – wenn Vorsicht vor undefined Elementen geboten ist.

var marr = [0,1,,,4,,6];
for (e in marr) {
   console.log ("sparse " + e);
}
for (var i=0; i<marr.length; i++) {
   console.log ("for " + marr[i]);
}

Ausgabe

[Log]  sparse 0 
[Log]  sparse 1 
[Log]  sparse 4 
[Log]  sparse 6 
[Log]  for 0 
[Log]  for 1 
[Log]  for undefined 
[Log]  for 4 
[Log]  for undefined 
[Log]  for 6 

Object.keys

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.