In diesem Beitrag gehe ich kurz darauf ein, wie man über Objekte in JavaScript iterieren kann:
for…in Schleife
Gehen wir vom folgenden Objekt aus:
const user = {
name: 'Demir Jasarevic',
email: 'demir@beispiel.com',
number: 23,
favoriteTeam: 'Chicago Bulls',
active: true
};
Mit der for…in Schleife könnten wir nun wie folgt drüberiterieren:
for (const key in user) {
console.log(`${key}: ${user[key]}`);
};
Damit die Schleife nicht die komplette Prototype-Kette durchläuft (aufgrund der Vererbung), ist es empfehlenswert eine If-Bedingung mit der hasOwnProperty()-Methode einzubauen:
for (const key in user) {
if (user.hasOwnProperty(key)) {
console.log(`${key}: ${user[key]}`);
}
};
Object.keys
Mit ES6 kam die Methode Object.keys, mit der man über Objekte iterieren kann. Die Methode nimmt das Objekt als Argument entgegen und gibt ein Array mit allen Properties zurück. Wenn wir beim obigen Objekt bleiben, dann können wir diese Methode wie folgt nutzen:
const keys = Object.keys(user);
console.log(keys); // Gibt ['name', 'email', 'number', 'favoriteTeam', 'active'] zurück
keys.forEach((key, index) => {
console.log(`${key}: ${user[key]}`);
});
Mit der forEach-Methode kann dann über das Array iteriert werden, um auch die Werte der Eigenschaften zurückzugeben.
Object.values
Ähnlich wie Object.keys funktioniert auch die Object.values-Methode – nur andersrum. Es werden die Werte der Objekt-Eigenschaften zurückgegeben. Die Syntax folgt dem gleichen Prinzip:
const values = Object.values(user);
console.log(values); // Gibt ['Demir Jasarevic', 'demir@beispiel.com', 23, 'Chicago Bulls', true] zurück
values.forEach(val => console.log(val));
});
Object.entries
Object.entries wurde ebenfalls mit ES8 eingeführt und gibt ein verschachteltes Array zurück. Die einzelnen Arrays bestehen immer aus 2 Elementen. Das erste ist die Objekt-Eigenschaft, das zweite Element ist gleich deren Wert. Beispiel:
const entries = Object.entries(user);
console.log(entries);
// Gibt folgendes zurück
// ['name', 'Demir Jasarevic'], ['email', 'demir@beispiel.com'], ['number', 23], ['favoriteTeam', 'Chicago Bulls'], ['active', true]
Auch hier kann man entweder mit der forEach-Methode iterieren:
entries.forEach(([key, value]) => {
console.log(`${key}: ${value}`)
});
Oder auch mit einem for…of-Loop:
for (const [key, value] of entries) {
console.log(`${key}: ${value}`);
};
