JavaScript ist eine der Programmiersprachen, mit denen man auf Objekteigenschaften iterieren kann, ohne ein komplexes Tool oder API zu verwenden.

In diesem Artikel werden wir untersuchen, wie sich diese einfache Technik im Laufe der Jahre entwickelt hat und warum wir jetzt etwas haben, das als elegant eingestuft werden kann!

Lassen Sie uns einen Blick auf den untenstehenden Code werfen und dann können wir weiterreden

var obj = { // Yes 'var'...bad old days!
a: 1,
b: 2,
c: 3,
};for (var key in obj) {
if (obj.hasOwnProperty(key)) { // <- Ahh...What's this??
var value = obj;
console.log(key, ' : ', value);
}
}

Ausgabe:

a : 1
b : 2
c : 3

Viele von uns verpassen die Prüfung obj.hasOwnProperty

In JavaScript, wenn Sie iterieren, ist es sehr kritisch, die Iteration auf die übergeordneten Eigenschaften des Objekts zu vermeiden (und seine übergeordneten Eigenschaften und seine übergeordneten…Sie haben die Idee!).

Glücklicherweise arbeiten die meisten von uns mit einer Art von Linting-Tool, das eine Warnung ausgibt, wenn Sie diese Prüfung verpassen.

Moderner Weg – Iteration in ES6+

Lassen Sie uns nun zu modernem JavaScript oder ES6+ übergehen!

In Anbetracht dieses Problems hat das ECMA-Team Unterstützung für einfache Iteration in ES6 hinzugefügt.

Und es beginnt mit – Object.entries()

Die Object.entries()Methode gibt ein Array der eigenen aufzählbaren Eigenschaftspaare eines gegebenen Objekts zurück, und zwar in der gleichen Reihenfolge wie eine for…in-Schleife (mit dem Unterschied, dass eine for-in-Schleife auch Eigenschaften in der Prototypenkette aufzählt).

Zum Beispiel gibt der folgende Code

const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj));

eine Ausgabe wie unten, ein Array von Arrays mit zwei Elementen, wobei bei Index: 0, haben wir Schlüssel und bei Index:1, haben wir Wert

Nun wird diese einfache Funktion zu einer eleganten Iteration von Object führen, siehe untenstehenden Code.

Schritt 1: Beginne mit `Object.entries`

const obj = {
a: 1,
b: 2,
c: 3
};for (const entry of Object.entries(obj)) {
console.log(`key: ${entry} : value: ${entry}`);
}

Output:

key: a : value: 1
key: b : value: 2
key: c : value: 3

Es war schon gut, aber machen wir es fantastisch

Schritt 2: Verwenden Sie Destruktion

Lassen Sie uns den „Eintrag“ verstehen, wenn wir die obige for-Schleife wie unten aktualisieren

...for (const entry of Object.entries(obj)) {
console.log(entry);
}

die Ausgabe wird wie unten aussehen

Hmm….was haben wir hier?

Nun, jeder Eintrag ist ein Array mit genau zwei Elementen (nennen wir es ‚Tupel‘), also können wir mit ES6 Array-Destrukturierung Code schreiben wie

const entry = ;
const = entry;
console.log(`key: ${key} : value: ${value}`);

Lassen Sie uns das gleiche Konzept auf die for-Schleife anwenden

const obj = {
a: 1,
b: 2,
c: 3
};for (const of Object.entries(obj)) {
console.log(`${key} : ${value}`);
}

Woohoo… es ist in der Tat Awesome!

Iteration mit forEach

Wollen Sie die gleiche Technik auf die eingebauten Array-Funktionen anwenden, versuchen Sie den folgenden Code

const obj = {
a: 1,
b: 2,
c: 3
};
Object.entries(obj).forEach(() => {
console.info(`${key} : ${value}`);
});

Ausgabe:

a : 1
b : 2
c : 3

Dankeschön!