Mehrere Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS

1. Selbstaufzählbare Eigenschaften

Object.keys() gibt ein Array der aufzählbaren Eigenschaften eines bestimmten Objekts zurück. Die Reihenfolge der Eigenschaftsnamen im Array ist dieselbe wie die Reihenfolge, die zurückgegeben wird, wenn das Objekt mit for...in Schleife durchlaufen wird. Wenn die Schlüssel-Wert-Paare des Objekts nicht aufzählbar sind, wird ein Array der Schlüssel zurückgegeben.

Dies ist sinnvoll, da Sie sich die meiste Zeit nur um die Eigenschaften des Objekts selbst kümmern müssen.

Sehen wir uns ein Beispiel an, bei dem ein Objekt sowohl eigene als auch geerbte Eigenschaften hat Object.keys() nur seine eigenen Eigenschaftsschlüssel zurückgibt:

let einfacheFarben = {
  FarbeA: 'weiß',
  FarbeB: 'schwarz'
};
lass Naturfarben = {
  FarbeC: 'grün',
  FarbeD: 'gelb'
};
Object.setPrototypeOf(natureColors, simpleColors);
Objekt.keys(natureColors); // => ['FarbeC', 'FarbeD']
NaturFarben['FarbeA']; // => 'weiß'
Naturfarben['FarbeB']; // => 'schwarz'

Object.setPrototypeOf() setzt den Prototyp eines angegebenen Objekts (das heißt, die interne Eigenschaft [[ Prototype ]]) auf ein anderes Objekt oder auf null.

Object.keys (natureColors) gibt natureColors Objekts zurück: [‘colorC’, ‘colorD’].

natureColors enthält Eigenschaften, die vom simpleColors Prototypobjekt geerbt wurden, aber die Funktion Object.keys() überspringt sie.

Object.values() und Object.entries() geben auch ein Array von Schlüssel-Wert-Paaren der aufzählbaren Eigenschaften eines bestimmten Objekts zurück.

// ...
Objekt.Werte(Naturfarben); 
// => ['grün', 'gelb']
Objekt.Einträge(natureColors);
// => [ ['FarbeC', 'grün'], ['FarbeD', 'gelb'] ]

Beachten Sie nun den Unterschied zur for..in -Anweisung. for..in kann nicht nur seine eigenen Eigenschaften durchlaufen, sondern auch die Eigenschaften in der Prototypenkette aufzählen.

// ...
Lassen Sie enumerableKeys = [];
für (let-Schlüssel in natureColors) {
  enumerableKeys.push(Schlüssel);
}
aufzählbareSchlüssel; // => ['FarbeC', 'FarbeD', 'FarbeA', 'FarbeB']

Das Array enumerableKeys enthält natureColors : „colorC“ und „colorD“.

Darüber hinaus durchläuft for..in auch die vom Prototypobjekt simpleColors geerbten Eigenschaften.

2. Object.values() gibt Eigenschaftswerte zurück

**Object.values()** gibt ein Array aller aufzählbaren Eigenschaftswerte eines bestimmten Objekts zurück, und zwar in derselben Reihenfolge wie bei Verwendung for...in Schleife (der Unterschied besteht darin, dass die for-in-Schleife die Eigenschaften in der Prototypkette aufzählt).

Verwenden Sie beispielsweise Object.keys(), um Schlüssel zu sammeln, und verwenden Sie dann den Schlüssel, um den entsprechenden Wert aus dem Objekt abzurufen:

lass Mahlzeiten = {
  MahlzeitA: 'Frühstück',
  MahlzeitB: 'Mittagessen',
  MahlzeitC: „Abendessen“
};
für (let key of Object.keys(meals)) {
  let mealName = Mahlzeiten[Schlüssel];
  // ... mach etwas mit mealName
  console.log(MahlzeitName);
}
// 'Frühstück' 'Mittagessen' 'Abendessen'

Eine Mahlzeit ist ein einfacher Gegenstand. Verwenden Sie Object.keys(meals) und eine aufgezählte for..of-Schleife, um die Objektschlüsselwerte zu erhalten.

Der Code sieht einfach aus, aber let mealName = meals[key] ist nicht notwendig und kann wie folgt weiter optimiert werden:

lass Mahlzeiten = {
  MahlzeitA: 'Frühstück',
  MahlzeitB: 'Mittagessen',
  MahlzeitC: „Abendessen“
};
für (let Mahlzeitname von Objekt.Werte(Mahlzeiten)) {
  console.log(MahlzeitName);
}
// 'Frühstück' 'Mittagessen' 'Abendessen'

Da Object.values(meals) die Objekteigenschaftswerte in einem Array zurückgibt, kann es direkt in for..of vereinfacht werden. mealName wird direkt in der Schleife zugewiesen.

3. Objekt.Einträge()

Object.entries() gibt ein Array von Schlüssel-Wert-Paaren für die aufzählbaren Eigenschaften eines bestimmten Objekts zurück, angeordnet in der gleichen Reihenfolge, in der sie zurückgegeben würden, wenn das Objekt mit einer for...in-Schleife durchlaufen würde (der Unterschied besteht darin, dass eine for-in-Schleife auch Eigenschaften in der Prototypkette aufzählt).

Object.entries() gibt ein Array von Schlüssel-Wert-Paaren zurück, wie etwa [ [Schlüssel1, Wert1], [Schlüssel2, Wert2], ..., [SchlüsselN, WertN] ].

Die direkte Verwendung dieser Schlüssel-Wert-Paare ist möglicherweise nicht sehr praktisch, der Zugriff auf Schlüssel und Werte wird jedoch durch die Destrukturierungszuweisung des Arrays sehr einfach, wie unten gezeigt:

lass Mahlzeiten = {
  MahlzeitA: 'Frühstück',
  MahlzeitB: 'Mittagessen',
  MahlzeitC: „Abendessen“
};
für (let [Schlüssel, Wert] von Object.entries(Mahlzeiten)) {
  console.log(Schlüssel + ':' + Wert);
}
// 'MahlzeitA:Frühstück' 'MahlzeitB:Mittagessen' 'MahlzeitC:Abendessen'

Wie oben gezeigt, muss keine zusätzliche Zeile für die Zuweisung oder Deklaration hinzugefügt werden,為Object.entries() eine Sammlung zurückgibt, die mit der Destrukturierungszuweisung von Arrays kompatibel ist.

bject.entries() ist nützlich, wenn ein gewöhnliches Objekt in eine Map konvertiert werden soll, da das von Object.entries() zurückgegebene Format genau dem vom Map-Konstruktor akzeptierten Format entspricht: (Schlüssel, Wert).

Ein zweidimensionales Array von Schlüssel-Wert-Paaren kann mit dem regulären Map-Konstruktor in ein Map-Objekt konvertiert werden.

Hier ist ein Beispiel, um Ihr Tempo zu drosseln:

lass Grüße = {
  Morgen: 'Guten Morgen',
  mittags: 'Guten Tag',
  Abend: 'Guten Abend'
};
let GreetingsMap = neue Map(Objekt.Einträge(Grüße));
greetingsMap.get('morning'); // => 'Guten Morgen'
greetingsMap.get('midday'); // => 'Guten Tag'
greetingsMap.get('evening'); // => 'Guten Abend'

Map-Objekte speichern Schlüssel-Wert-Paare. Jeder beliebige Wert (Objekt oder Primitiv) kann als Schlüssel oder Wert verwendet werden.

Interessanterweise bietet Map Methoden, die Object.values() und Object.entries() gleichwertig sind (außer dass sie Iteratoren zurückgeben) , um Eigenschaftswerte oder Schlüssel-Wert-Paare für eine Map-Instanz zu extrahieren:

• Map.prototype.values() ist gleichwertig mit Object.values()
• Map.prototype.entries() ist gleichwertig mit Object.entries()

map sind eine verbesserte Version gewöhnlicher Objekte. Sie können die Größe der Karte ermitteln (bei gewöhnlichen Objekten müssen Sie sie manuell ermitteln) und beliebige Objekttypen als Schlüssel verwenden (gewöhnliche Objekte verwenden primitive Zeichenfolgentypen als Schlüssel).

Schauen wir uns die Methoden an, die eine Map von .values() und .entries() zurückgeben:

// ...
[...grüßeMap.values()];
// => ['Guten Morgen', 'Guten Tag', 'Guten Abend']
[...grüßeMap.einträge()];
// => [ ['Morgen', 'Guten Morgen'], ['Mittag', 'Guten Tag'], 
// ['Abend', 'Guten Abend'] ]

Hinweis: reetingsMap.values() und greetingsMap.entries() geben Iteratorobjekte zurück. Um das Ergebnis in ein Array zu packen, ist der Spread-Operator ... notwendig.

4. Reihenfolge der Objekteigenschaften

JS-Objekte sind einfache Schlüssel-Wert-Zuordnungen. Daher ist die Reihenfolge der Eigenschaften in einem Objekt unerheblich und sollte in den meisten Fällen nicht als verlässlich angesehen werden.

In ES5 und früheren Standards wurde die Reihenfolge der Eigenschaften überhaupt nicht angegeben.

Ab ES6 basiert die Reihenfolge der Eigenschaften jedoch auf einem bestimmten Regelsatz, sofern die Zeit nicht ausdrücklich angegeben ist. Wir werden zwei neue Methoden, Object.getOwnPropertyNames和Reflect.ownKeys verwenden, um ein Beispiel zur Erläuterung dieser Eigenschaftssortierungsregel zu schreiben.

• Zahl: Wenn der Attributtyp ein Zahlentyp ist, wird in absteigender Reihenfolge sortiert.
• Zeichenfolge: Wenn der Attributtyp eine Zeichenfolge ist, wird in chronologischer Reihenfolge sortiert.
• Symbol: Wenn der Attributtyp Symbol ist, wird in chronologischer Reihenfolge sortiert.
  

Wenn Sie eine geordnete Sammlung benötigen, empfiehlt es sich, die Daten in einem Array oder Set zu speichern.

Zusammenfassen:

Object.values() und Object.entries() sind ein weiterer Verbesserungsschritt bei der Bereitstellung neuer standardisierter Hilfsfunktionen für JS-Entwickler.

Object.entries() eignet sich am besten zur Destrukturierung von Arrays, sodass Schlüssel und Werte einfach verschiedenen Variablen zugewiesen werden können. Mit dieser Funktion können Sie außerdem ganz einfach einfache JS-Objekteigenschaften in ein Map-Objekt abbilden. ,

Hinweis: Die Reihenfolge, in der Object.values() und Object.entries() Daten zurückgeben, ist nicht definiert. Verlassen Sie sich also nicht darauf.

Es gibt keine Möglichkeit, in Echtzeit zu wissen BUG nach der Bereitstellung des Codes vorhanden sein könnten. Um diese Fehler anschließend zu beheben, wurde viel Zeit mit dem Debuggen von Protokollen verbracht. Hier möchte ich ein nützliches Fehlerüberwachungstool namens Fundebug empfehlen.

Damit ist dieser Artikel über verschiedene Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS abgeschlossen. Weitere Informationen zu verschiedenen Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!