So durchlaufen Sie ein Objekt Schlüssel und Werte in JavaScript

Manchmal müssen Sie möglicherweise ein Objekt in JavaScript durchlaufen, um mehrere Schlüssel-Wert-Paare abzurufen. In diesem Artikel werden wir vier verschiedene Möglichkeiten zum Durchlaufen von Objekteigenschaften in JavaScript betrachten.

Vor ES6 war die einzige Möglichkeit, ein Objekt zu durchlaufen, die for…in schleife. Die Object.keys() -Methode wurde in ES6 eingeführt, um das Iterieren über Objekte zu vereinfachen. Später in ES8 wurden zwei neue Methoden hinzugefügt, Object.entries() und Object.values(). Die neuesten Methoden konvertieren das Objekt in ein Array und verwenden dann Array-Schleifenmethoden, um über dieses Array zu iterieren.

Beginnen wir mit der ersten Methode!

for…in Schleife

Die einfachste und unkomplizierteste Möglichkeit, über Objekteigenschaften zu iterieren, ist die for...in Anweisung. Diese Methode funktioniert in allen modernen und alten Browsern, einschließlich Internet Explorer 6 und höher.

Hier ist ein Beispiel, das die for...in Schleife verwendet, um über ein Objekt zu iterieren:

const user = { name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true};// iterate over the user objectfor (const key in user) { console.log(`${key}: ${user}`);}// name: John Doe// email: [email protected]// age: 25// dob: 08/02/1989// active: true

Das Problem mit der for...in Schleife besteht darin, dass sie auch die Eigenschaften in der Prototypkette durchläuft. Da die Objekte in JavaScript Eigenschaften von ihren Prototypen erben können, durchläuft die Anweisung fo...in auch diese Eigenschaften.

Um zu vermeiden, dass beim Schleifen eines Objekts über Prototypeigenschaften iteriert wird, müssen Sie explizit überprüfen, ob die Eigenschaft zum Objekt gehört, indem Sie die hasOwnProperty() -Methode verwenden:

for (const key in user) { if (user.hasOwnProperty(key)) { console.log(`${key}: ${user}`); }}

Glücklicherweise müssen wir uns nicht mehr auf for...in und hasOwnProperty() verlassen, um ein Objekt zu durchlaufen. Es gibt bessere Möglichkeiten zur Verfügung.

Objekt.keys() -Methode

Die Object.keys() -Methode wurde in ES6 eingeführt. Es verwendet das Objekt, über das Sie iterieren möchten, als Argument und gibt ein Array zurück, das alle Eigenschaftsnamen (oder Schlüssel) enthält.

Sie können dann eine beliebige Array-Schleifenmethode verwenden, z. B. forEach(), um das Array zu durchlaufen und den Wert jeder Eigenschaft abzurufen.

Hier ist ein Beispiel:

const courses = { java: 10, javascript: 55, nodejs: 5, php: 15};// convert object to key's arrayconst keys = Object.keys(courses);// print all keysconsole.log(keys);// // iterate over objectkeys.forEach((key, index) => { console.log(`${key}: ${courses}`);});// java: 10// javascript: 55// nodejs: 5// php: 15

In der obigen Funktionsdeklaration habe ich die ES6-Syntax verwendet. Ich gehe davon aus, dass Sie bereits mit ES6 vertraut sind, insbesondere mit Pfeilfunktionen. Wenn Sie neu in ES6 sind, werfen Sie einen Blick auf Arrow functions Guide, um mehr darüber zu erfahren.

Objekt.values() Methode

Das Objekt.die Methode values() wurde in ES8 eingeführt und macht das Gegenteil von Object.key() . Es gibt die Werte aller Eigenschaften im Objekt als Array zurück. Sie können dann das Array values durchlaufen, indem Sie eine der Array-Schleifenmethoden verwenden.

Schauen wir uns ein Beispiel an:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘

Objekt.entries() Methode

Das Objekt.entries() ist eine weitere Methode, die in ES8 eingeführt wurde und zum Durchlaufen eines Objekts verwendet werden kann. Im Gegensatz zu Object.values() , das ein Array der Werte im Objekt erstellt, erzeugt Object.entries() ein Array von Arrays. Jedes innere Array hat zwei Elemente. Das erste Element ist die Eigenschaft; Das zweite Element ist der Wert.

Hier ein Beispiel:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]

Um über das von Object.entries() zurückgegebene Array zu iterieren, können Sie entweder das for …der forEach() -Methode wie unten gezeigt:

// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});

Fazit

Das ist alles für die Iteration über Objekteigenschaften in JavaScript. Wir haben uns vier verschiedene Methoden angesehen, um diese Aufgabe zu erfüllen. for...in ist immer noch eine gute Option, wenn Sie alte Browser unterstützen möchten. Andernfalls verwenden Sie einfach eine der neuesten Methoden: Object.keys()Object.values() oder Object.entries().

✌️ Gefällt Ihnen dieser Artikel? Folgen Sie @attacomsian auf Twitter. Sie können mir auch auf LinkedIn und TWITTER folgen. Abonnieren Sie den RSS-Feed.

👋 Wenn Sie gerne meine Artikel lesen und mich dabei unterstützen möchten, weiterhin kostenlose Tutorials zu erstellen, Buy Kaufen Sie mir einen Kaffee (Kosten $ 5) .