Geschrieben von

Quick Tipp: Über Objekte in JS iterieren

WebDev

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:

onst 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}`);
 
};

Last modified: 16. September 2022