Schleife mit for in

function Car(color, doors){
this.color = color;
this.doors = doors;
this.aboutExtras = function(){console.log("The color is: "+this.color+" Doors: "+this.doors);}
}

var ford = new Car("red", 4);

for(var property in  ford){
	console.log("Name: "+ property);
	console.log("Wert: "+ford[property]);
}

Beispiel / Beispiel

---

Mit einer for-in-Schleife kann man sich alle aufzählbaren Eigenschaften und Methoden eines Objekts anzeigen lassen. Auch die Elemente eines Arrays oder Image Objekts kann man sich hiermit ausgeben lassen.

---

for(eigenschaft in meinObjekt){}

Die Variable eigenschaft liefert alle Namen der Eigenschaften und Methoden von meinObjekt, welches ein Objekt oder Array ist.

meinObjekt[eigenschaft] liefert den jeweiligen Wert der Eigenschaft oder Methode mittels der Klammerschreibweise.

Array

var team = ["Willi", "Walter", "Heike", "Resi", "Robert"];

for (var i in team){
console.log(i); 
console.log(team[i]);
}

Hier habe ich die Variable i genannt (sinngemäß Abkürzung für index). Das Prinzip ist das gleiche wie im obigen Beispiel.

Object

var person = {name: "Walter", nachname: "Wankelmann", alter: 53}
var e;
for (e in person){
 console.log(e); //name nachname alter
 console.log(person[e]); //Walter Wankelmann 53
}

Image

Beispiel

In diesem Beispiel liegen 2 Bilder auf der Bühne mit einer for-in Schleife frage ich die Eigenschaften eines Image Objekts ab.
Klickt man auf eins der Bilder werden die Eigenschaften width (Breite des Bildes im Browserfenster eventuel verändert durch CSS oder width Attribut) und naturalWidth (ursprüngliche oder reale Breite des Bildes in Pixeln)

    for(prop in bild1){     
        output.innerHTML += prop+"<br>";
    }

---

Object.keys();

Beispiel

function Car(color, doors){
this.color = color;
this.doors = doors;
this.aboutExtras = function(){console.log("The color is: "+this.color+" Doors: "+this.doors);}
}

var ford = new Car("red", 4);

Eine weitere Möglichkeit sich alle Eigenschaften und Methoden ausgeben zu lassen ist die Methode Object.keys() Als Parameter wird das Objekt erwartet. Zurückgebeben wird ein Array, welches Eigenschaften und Methoden dieses Objekts enthält

var eigenschaften = Object.keys(ford);

Im eigenschaften Array liegen die Eigenschaften des Objekts ford

var a = eigenschaften[0];
console.log(ford[a]);//Ausgabe: red

Das Thema der nächsten Seite ist die for-Schleife, vorab schon mal folgendes Beispiel. Hier werden die Elemente des erzeugen Arrays eigenschaften durchlaufen.

for(var i= 0; i < eigenschaften.length; i++){
	var prop = eigenschaften[i];
	console.log(prop);
	console.log(ford[prop]);
}
	

 

 

Javascript Tipps