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

Anwendungsbeispiele für die virtuelle Liste des WeChat-Applets

Inhaltsverzeichnis Vorwort Was ist eine virtuelle...

Detaillierte Erklärung der Linux-Befehle und der Dateisuche

1. Führen Sie eine Dateinamensuche durch which (S...

Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort

Inhaltsverzeichnis 1. Standort / Matching 2. Stan...

Zusammenfassung der MySQL-Abfragesyntax

Vorwort: In diesem Artikel wird hauptsächlich die...

Detaillierte grafische Erklärung zum Löschen des Keep-Alive-Cache

Inhaltsverzeichnis Eröffnungsszene Direktes Rende...

Implementierung der React-Sternebewertungskomponente

Voraussetzung ist die Eingabe der Bewertungsdaten...

JavaScript zum Erreichen der Produktabfragefunktion

In diesem Artikelbeispiel wird der spezifische Ja...

SQL implementiert LeetCode (180. Fortlaufende Zahlen)

[LeetCode] 180. Aufeinanderfolgende Zahlen Schrei...

Detaillierte Erläuterung der Reihenfolge der JS-Objektdurchquerung

Einige von Ihnen haben vielleicht gehört, dass di...

Was ist ZFS? Gründe für die Verwendung von ZFS und seine Funktionen

Geschichte von ZFS Das Z-Dateisystem (ZFS) wurde ...

So erstellen Sie einen Nginx-Image-Server mit Docker

Vorwort Bei der allgemeinen Entwicklung werden Bi...