Fünf Möglichkeiten zum Durchlaufen von Objekten in JavaScript Beispielcode

Fünf Möglichkeiten zum Durchlaufen von Objekten in JavaScript Beispielcode

Vorbereiten

Lassen Sie uns zunächst ein Testobjekt obj vorbereiten.

Codeauflistung 1

var notEnum = Symbol("geerbtes nicht aufzählbares Symbol");
var proto = {
    [Symbol("Geerbtes Aufzählsymbol")]: "Geerbtes Aufzählsymbol",
    Name: „Geerbte aufzählbare Eigenschaften“
};
// Nicht aufzählbare Eigenschaften Object.defineProperty(proto, "age", {
    Wert: „Nicht aufzählbare Eigenschaften erben“
});
// Nicht aufzählbare Symboleigenschaft Object.defineProperty(proto, notEnum, {
    Wert: „Nicht aufzählbares Symbol erben“
});

var obj = {
    job1: "Eigenes Aufzählattribut 1",
    job2: "Eigenes Aufzählattribut 2",
    [Symbol("eigenes aufzählbares Symbol")]: "eigenes aufzählbares Symbol"
};
// Erben Object.setPrototypeOf(obj, proto);
// Nicht aufzählbare Eigenschaften Object.defineProperty(obj, "address", {
    Wert: „Eigene nicht aufzählbare Attribute“
});
// Nicht aufzählbares Symbolattribut var ownNotEnum = Symbol("Eigenes nicht aufzählbares Symbol");
Objekt.defineProperty(obj, ownNotEnum, {
    Wert: „Eigenes nicht aufzählbares Symbol“
});

Fünf Waffen

für … in

Dies ist ein Veteran auf dem Gebiet der Objektdurchquerung. Auf diese Weise können Sie alle aufzählbaren Eigenschaften des Objekts selbst und seiner Vererbung durchlaufen (ausgenommen Symboltypen).

Codeauflistung 2

für (var attr in obj) {
    console.log(attr,"==",obj[attr]);
}
/*
job1 == eigene aufzählbare Eigenschaft 1
job2 == eigene aufzählbare Eigenschaft 2
Name == geerbte aufzählbare Eigenschaften */

Objekt.Schlüssel

Ruft ein Array aller aufzählbaren Eigenschaften des Objekts selbst ab (ausgenommen Symboltyp).

Codeauflistung 3

Objekt.Schlüssel(Objekt).Map((Attr)=>{
    console.log(attr,"==",obj[attr]);
});
/*
job1 == eigene aufzählbare Eigenschaft 1
job2 == eigene aufzählbare Eigenschaft 2
*/

Objekt.getOwnPropertyNames

Ruft ein Array aller nicht symbolischen Eigenschaftsnamen (einschließlich nicht aufzählbarer) des Objekts selbst ab.

Codeauflistung 4

Objekt.getOwnPropertyNames(obj).map((attr)=>{
    console.log(attr,"==",obj[attr]);
});
/*
job1 == eigene aufzählbare Eigenschaft 1
job2 == eigene aufzählbare Eigenschaft 2
Adresse == eigenes nicht aufzählbares Attribut*/

Objekt.getOwnPropertySymbols

Ruft ein Array aller Attributnamen (einschließlich nicht aufzählbarer) des Objekts selbst ab, die vom Typ Symbol sind.

Codeauflistung 5

Objekt.getOwnPropertySymbols(obj).map((attr)=>{
    console.log(attr,"==",obj[attr]);
});
/*
Symbol (eigenes aufzählbares Symbol) == eigenes aufzählbares Symbol
Symbol (eigenes nicht aufzählbares Symbol) == eigenes nicht aufzählbares Symbol
*/

Reflect.ownKeys

Holen Sie sich ein Array aller Eigenschaftsnamen eines Objekts (einschließlich nicht aufzählbarer und Symboltypen).

Auflistung 6

Reflect.ownKeys(obj).map((attr)=>{
    console.log(attr,"==",obj[attr]);
});
/*
job1 == eigene aufzählbare Eigenschaft 1
job2 == eigene aufzählbare Eigenschaft 2
Adresse == Eigenes nicht aufzählbares Attribut Symbol (eigenes aufzählbares Symbol) '==' 'Eigenes aufzählbares Symbol'
Symbol (eigenes nicht aufzählbares Symbol) '==' 'eigenes nicht aufzählbares Symbol'
*/

Zusammenfassen

Anleitung zum Arsenal, wähle die passende Waffe entsprechend deinen Bedürfnissen.

API arbeiten Eigene Attribute Nicht aufzählbare Eigenschaften Geerbte Eigenschaften Symboleigenschaften
für … in Durchquerung Ja NEIN Ja NEIN
Objekt.Schlüssel Gibt ein Array von Attributen zurück Ja NEIN NEIN NEIN
Objekt.getOwnPropertyNames Gibt ein Array von Nicht-Symbolattributen zurück. Ja Ja NEIN NEIN
Objekt.getOwnPropertySymbols Gibt das Symbol-Attribut-Array zurück Ja Ja NEIN Ja
Reflect.ownKeys Gibt ein Array von Attributen zurück Ja Ja NEIN Ja

Die stärkste der fünf Waffen ist Reflect.ownKeys, das sowohl mit Symbol- als auch mit nicht aufzählbaren Typen funktioniert. Es ist einfach die Kombination von Object.getOwnPropertyNames und Object.getOwnPropertySymbols.

Erweiterungen

Objekt.Werte

Ruft ein Array von Werten aller aufzählbaren Eigenschaften (ausgenommen Symboltypen) des Objekts selbst ab

Auflistung 7

Objekt.Werte(Objekt).Map((Wert)=>{
    konsole.log(Wert);
});
/*
Eigene aufzählbare Eigenschaften 1
Eigene aufzählbare Eigenschaften 2
*/

Objekt.Einträge

Ruft ein Array von Schlüssel-Wert-Paaren aller aufzählbaren Eigenschaften (ausgenommen Symboltypen) des Objekts selbst ab

Auflistung 7

Objekt.Einträge(Objekt).Map((Wert)=>{
    konsole.log(Wert);
});
/*
[ 'job1', 'Eigenes aufzählbares Attribut 1' ]
[ 'job2', 'Eigenes aufzählbares Attribut 2' ]
*/

hatEigenesEigentum

Überprüft, ob die eigenen Eigenschaften eines Objekts die angegebene Eigenschaft enthalten und gibt einen Boolean-Wert zurück.

Zitat von MDN: JavaScript schützt den Eigenschaftsnamen hasOwnProperty nicht, daher ist es möglich, dass ein Objekt eine Eigenschaft mit diesem Eigenschaftsnamen hat. Verwenden Sie daher direkt die Methode hasOwnProperty in der Prototypenkette.

Codeauflistung 8

für (var attr in obj) {
    wenn (Objekt.prototype.hasOwnProperty.call(obj,attr)){
        console.log("Eigene Attribute: :",attr);
    }anders{
        console.log("Geerbte Attribute: :",attr);
    }
}
/*
Eigene Eigenschaften:: job1
Eigene Eigenschaften:: job2
Geerbte Eigenschaften:: Name
*/

propertyIsEnumerable

Überprüft, ob eine Eigenschaft im angegebenen Objekt aufzählbar ist und gibt einen Boolean-Wert zurück.

Codeauflistung 9

Reflect.ownKeys(obj).map((attr) => {
    wenn (Object.prototype.propertyIsEnumerable.call(obj, attr)) {
        console.log("Aufzählbare Eigenschaften: :", attr);
    } anders {
        console.log("Nicht aufzählbare Attribute: :", attr);
    }
});
/*
Aufzählbare Eigenschaften:: job1
Aufzählbare Eigenschaften:: job2
Nicht aufzählbare Eigenschaft::Adresse
Aufzählbare Eigenschaft::Symbol (eigenes aufzählbares Symbol)
Nicht aufzählbare Eigenschaft::Symbol (eigenes nicht aufzählbares Symbol)
*/

siehe

MDN-Objekt

Zusammenfassen

Damit ist dieser Artikel über fünf Möglichkeiten zum Durchlaufen von Objekten in JavaScript abgeschlossen. Weitere relevante Inhalte zum Durchlaufen von Objekten in JavaScript 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!

Das könnte Sie auch interessieren:
  • Methoden zum Durchlaufen von Objekteigenschaften und -werten in js
  • Verwendung von Javascript-Arrays und -Wörterbüchern sowie Kenntnisse zur Objektattribut-Traversierung
  • JS 5 Möglichkeiten zum Durchlaufen von Objekten
  • js-Code zum Durchlaufen der Eigenschaften eines Objekts
  • Zusammenfassung zum einfachen Durchlaufen von Objekteigenschaften in JS
  • Der Unterschied zwischen dem Durchlaufen von Arrays und Objekten in JS und die detaillierte Erklärung, wie Objekte, Arrays und Eigenschaften rekursiv durchlaufen werden
  • js einfache Durchquerung zum Abrufen des Attributwerts im Objektmethodenbeispiel
  • JS rekursives Durchlaufen von Objekten zum Erhalten von Fähigkeiten zur Wertwertmethode
  • Durchlaufen der Eigenschaften und Werte von Objekten in js

<<:  Docker erstellt Schritte zur Implementierung von Kubectl-Images

>>:  Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)

Artikel empfehlen

So verwenden Sie Binlog zur Datenwiederherstellung in MySQL

Vorwort Kürzlich wurden Daten online falsch bearb...

Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen

Als Backend-Programmierer haben Sie an vielen Ste...

Implementierung der privaten Docker-Bibliothek

Die Installation und Bereitstellung eines private...

Erzielen Sie mit reinem CSS3 in wenigen einfachen Schritten einen 3D-Flip-Effekt

Als Pflichtkurs für Frontend-Entwickler kann CSS3...

Javascript zum Wechseln von Bildern per Mausklick

In diesem Artikelbeispiel wird der spezifische Ja...

Details zur Bündelung statischer Ressourcen ohne JavaScript

Inhaltsverzeichnis 1. Benutzerdefinierter Import ...

Docker-Container-Protokollanalyse

Containerprotokolle anzeigen Verwenden Sie zunäch...

MySQL-Schnellwiederherstellungslösung basierend auf dem Zeitpunkt

Der Grund für das Schreiben dieses Artikels ist, ...

Interpretation von 17 Werbewirksamkeitsmaßen

1. 85 % der Anzeigen werden nicht gelesen <br ...