Wie durchlaufe oder liste ich ein JavaScript-Objekt auf?

Lesezeit: 9 Minuten

Wie durchlaufe oder liste ich ein JavaScript Objekt auf
Tanmoy

Ich habe ein JavaScript-Objekt wie das folgende:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Jetzt möchte ich alle durchschleifen p Elemente (p1, p2, p3…) Und erhalten ihre Schlüssel und Werte. Wie kann ich das machen?

Ich kann das JavaScript-Objekt bei Bedarf ändern. Mein ultimatives Ziel ist es, einige Schlüsselwertpaare zu durchlaufen, und wenn möglich, möchte ich die Verwendung vermeiden eval.

Wie durchlaufe oder liste ich ein JavaScript Objekt auf
Axel Rauschmayer

Unter ECMAScript 5 können Sie kombinieren Object.keys() und Array.prototype.forEach():

var obj = { first: "John", last: "Doe" };

Object.keys(obj).forEach(function(key) {
    console.log(key, obj[key]);
});

ECMAScript 6 fügt hinzu for...of:

for (const key of Object.keys(obj)) {
    console.log(key, obj[key]);
}

ECMAScript 8 fügt hinzu Object.entries() wodurch vermieden wird, dass jeder Wert im ursprünglichen Objekt nachgeschlagen werden muss:

Object.entries(obj).forEach(
    ([key, value]) => console.log(key, value)
);

Sie können kombinieren for...ofDestrukturierung und Object.entries:

for (const [key, value] of Object.entries(obj)) {
    console.log(key, value);
}

Beide Object.keys() und Object.entries() iteriere die Eigenschaften in der gleichen Reihenfolge wie a for...in Schleife aber ignorieren Sie die Prototypkette. Nur die eigenen aufzählbaren Eigenschaften des Objekts werden iteriert.

  • Warum hat der Standard nicht vorgesehen Object.forEach(obj, function (value, key) {...})? 🙁 Bestimmt obj.forEach(function...) wäre kürzer und ergänzen Array.prototype.forEachaber das würde riskieren, dass Objekte ihre eigenen definieren forEach Eigentum. Schätze ich Object.keys verhindert, dass der Callback die Schlüssel des Objekts ändert.

    – David Harkness

    23. Juni 2014 um 20:36 Uhr


  • Dies ist besser als die Lösung von Levik, da die Hauptlogik nur eine verschachtelte Schleife in statt zwei sein kann. Code leichter lesbar machen. Obwohl ich die Klammern um die Fortsetzung verlieren würde; sie sind überflüssig.

    – Systemischer Plural

    6. April 2011 um 9:55 Uhr

  • Ich würde die nicht entfernen { } persönlich weil ein if ohne sie ist es ein wenig unklar, was Teil der ist if und was nicht. Aber das ist wohl Ansichtssache 🙂

    – pimvdb

    5. August 2011 um 12:01 Uhr

  • Ja, die behalte ich lieber { } hauptsächlich um Verwirrung zu vermeiden, wenn man später etwas hinzufügen muss if Umfang.

    – Andreas Gretsch

    5. August 2011 um 12:21 Uhr

  • Als ich meinen vorherigen Kommentar las, stellte ich fest, dass ich nicht die richtigen Begriffe verwendet hatte, weil ich “wenn Geltungsbereich” sagte; Beachten Sie jedoch, dass JavaScript nur einen Funktionsbereich hat. Also was ich eigentlich meinte war “if block”.

    – Andreas Gretsch

    11. November 2011 um 11:08 Uhr

  • “Leider ist hasOwnProperty eine Methode, kein Operator, daher könnte es in jedem Objekt durch eine andere Funktion oder sogar einen Wert ersetzt werden, der keine Funktion ist.”

    – eomeroff

    19. Juni 2013 um 8:56 Uhr

Wie durchlaufe oder liste ich ein JavaScript Objekt auf
Vision

Die Frage wird nicht vollständig sein, wenn wir keine alternativen Methoden zum Durchlaufen von Objekten erwähnen.

Heutzutage bieten viele bekannte JavaScript-Bibliotheken ihre eigenen Methoden zum Iterieren über Sammlungen, dh über Arrays, Objekteund Array-ähnliche Objekte. Diese Methoden sind bequem zu verwenden und mit jedem Browser vollständig kompatibel.

  1. Wenn Sie mit arbeiten jQuerykönnen Sie verwenden jQuery.each() Methode. Es kann verwendet werden, um Objekte und Arrays nahtlos zu durchlaufen:

    $.each(obj, function(key, value) {
        console.log(key, value);
    });
    
  2. Im Unterstrich.js Sie können Methode finden _.each()das über eine Liste von Elementen iteriert und jedes der Reihe nach einer bereitgestellten Funktion zuführt (achten Sie auf die Reihenfolge der Argumente in wiederholt Funktion!):

    _.each(obj, function(value, key) {
        console.log(key, value);
    });
    
  3. Lo-Dash bietet mehrere Methoden zum Iterieren über Objekteigenschaften. Basic _.forEach() (oder es ist ein Pseudonym _.each()) ist nützlich, um sowohl Objekte als auch Arrays zu durchlaufen, jedoch (!) Objekte mit length Eigenschaften werden wie Arrays behandelt, und um dieses Verhalten zu vermeiden, wird die Verwendung empfohlen _.forIn() und _.forOwn() Methoden (diese haben auch value Argument kommt zuerst):

    _.forIn(obj, function(value, key) {
        console.log(key, value);
    });
    

    _.forIn() iteriert über eigene und geerbte aufzählbare Eigenschaften eines Objekts, während _.forOwn() iteriert nur über eigen Eigenschaften eines Objekts (grundsätzlich Überprüfung gegen hasOwnProperty Funktion). Für einfache Objekte und Objektliterale funktioniert jede dieser Methoden gut.

Generell verhalten sich alle beschriebenen Methoden bei beliebigen übergebenen Objekten gleich. Neben der Verwendung von native for..in Schleife wird normalerweise sein Schneller als jede Abstraktion, wie z jQuery.each()sind diese Methoden wesentlich einfacher zu verwenden, erfordern weniger Codierung und bieten eine bessere Fehlerbehandlung.

  • Um zum Wert zu gelangen: $.each(obj, function (key, value) { console.log(value.title); });

    – Ravi-Ram

    8. Juni 2013 um 14:41 Uhr

  • Nur lustig, wie underscore und jquery die Parameter geändert haben 🙂

    – pasler

    8. September 2017 um 7:24 Uhr

Vorwort:

  • Objekteigenschaften können sein eigen (die Eigenschaft befindet sich auf dem Objekt selbst) oder vererbt (nicht auf dem Objekt selbst, auf einem seiner Prototypen).
  • Objekteigenschaften können sein aufzählbar oder nicht aufzählbar. Nicht aufzählbare Eigenschaften werden bei vielen Eigenschaftsaufzählungen/-arrays weggelassen.
  • Eigenschaftsnamen können Zeichenfolgen oder Symbole sein. Eigenschaften, deren Namen Symbole sind, werden bei vielen Eigenschaftsaufzählungen/-arrays ausgelassen.

Hier im Jahr 2018 haben Sie folgende Möglichkeiten, die Eigenschaften eines Objekts zu durchlaufen (einige Beispiele folgen der Liste):

  1. for-in [MDN, spec] — Eine Schleifenstruktur, die die Namen eines Objekts durchläuft aufzählbar Eigenschaften, einschließlich geerbter Eigenschaften, deren Namen Zeichenfolgen sind
  2. Object.keys [MDN, spec] — Eine Funktion, die ein Array mit den Namen eines Objekts bereitstellt eigen, aufzählbar Eigenschaften, deren Namen Zeichenfolgen sind.
  3. Object.values [MDN, spec] — Eine Funktion, die ein Array der bereitstellt Werte eines Objekts eigen, aufzählbar Eigenschaften.
  4. Object.entries [MDN, spec] — Eine Funktion, die ein Array der Namen bereitstellt und Werte eines Objekts eigen, aufzählbar Eigenschaften (jeder Eintrag im Array ist eine [name, value] Reihe).
  5. Object.getOwnPropertyNames [MDN, spec] — Eine Funktion, die ein Array mit den Namen eines Objekts bereitstellt eigen Eigenschaften (auch nicht aufzählbare), deren Namen Strings sind.
  6. Object.getOwnPropertySymbols [MDN, spec] — Eine Funktion, die ein Array mit den Namen eines Objekts bereitstellt eigen Eigenschaften (auch nicht aufzählbare), deren Namen Symbole sind.
  7. Reflect.ownKeys [MDN, spec] — Eine Funktion, die ein Array mit den Namen eines Objekts bereitstellt eigen Eigenschaften (sogar nicht aufzählbare), ob diese Namen Zeichenketten oder Symbole sind.
  8. Falls Sie es wollen alle der Eigenschaften eines Objekts, einschließlich der nicht aufzählbaren geerbten, müssen Sie eine Schleife und verwenden Object.getPrototypeOf [MDN, spec] und verwenden Object.getOwnPropertyNames, Object.getOwnPropertySymbolsoder Reflect.ownKeys für jedes Objekt in der Prototypkette (Beispiel am Ende dieser Antwort).

Mit allen außer for-inwürden Sie eine Art Schleifenkonstrukt für das Array verwenden (for, for-of, forEachetc.).

Beispiele:

for-in:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name in o) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.keys (mit einer for-of Schleife, aber Sie können jedes Schleifenkonstrukt verwenden):

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.keys(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.values:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const value of Object.values(o)) {
    console.log(`${value}`);
}

Object.entries:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const [name, value] of Object.entries(o)) {
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertyNames:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertyNames(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertySymbols:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertySymbols(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Reflect.ownKeys:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Reflect.ownKeys(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Alle Eigenschafteneinschließlich geerbter nicht aufzählbarer:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) {
    for (const name of Reflect.ownKeys(current)) {
        const value = o[name];
        console.log(`[${depth}] ${String(name)} = ${String(value)}`);
    }
}
.as-console-wrapper {
  max-height: 100% !important;
}

  • Um zum Wert zu gelangen: $.each(obj, function (key, value) { console.log(value.title); });

    – Ravi-Ram

    8. Juni 2013 um 14:41 Uhr

  • Nur lustig, wie underscore und jquery die Parameter geändert haben 🙂

    – pasler

    8. September 2017 um 7:24 Uhr

1646879111 441 Wie durchlaufe oder liste ich ein JavaScript Objekt auf
Von einem Grue gefressen

Sie können einfach darüber iterieren wie:

for (var key in p) {
  alert(p[key]);
}

Beachten Sie, dass key nimmt nicht den Wert der Eigenschaft an, es ist nur ein Indexwert.

  • Das wird wiederholt und ist nicht einmal ganz richtig. Sie müssen hasOwnProperty überprüfen, damit dies ordnungsgemäß funktioniert

    – Wassal

    2. Juni 2016 um 20:18 Uhr

  • Ich habe dies zunächst basierend auf dem obigen Kommentar abgelehnt, bis mir klar wurde, dass diese Antwort zuerst kam und daher nicht “wiederholt” wird. Es ist möglicherweise unvollständig, funktioniert aber in vielen Fällen gut.

    – Von einem Grue gefressen

    9. Oktober 2018 um 15:16 Uhr

985680cookie-checkWie durchlaufe oder liste ich ein JavaScript-Objekt auf?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy