Wie kann ich ein JavaScript-Objekt in einer Schleife durchlaufen oder aufzählen?

Question

Ich habe ein JavaScript-Objekt wie das folgende:

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

Jetzt möchte ich eine Schleife durch alle p Elemente ( p1 , p2 , p3 ...) und ihre Schlüssel und Werte erhalten. Wie kann ich das tun?

Ich kann das JavaScript-Objekt bei Bedarf ändern. Mein ultimatives Ziel ist es, eine Schleife durch einige Schlüssel-Wert-Paare zu ziehen, und wenn möglich, möchte ich die Verwendung von eval .

Answer 1

Sie können die for-in Schleife, wie von anderen gezeigt. Sie müssen jedoch auch sicherstellen, dass der Schlüssel, den Sie erhalten, eine tatsächliche Eigenschaft eines Objekts ist und nicht aus dem Prototyp stammt.

Hier ist der Ausschnitt:

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

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " -> " + p[key]);
    }
}

Für-von mit Object.keys() alternativ:

var p = {
    0: "value1",
    "b": "value2",
    key: "value3"
};

for (var key of Object.keys(p)) {
    console.log(key + " -> " + p[key])
}

Beachten Sie die Verwendung von for-of anstelle von for-in wenn es nicht verwendet wird, gibt es bei benannten Eigenschaften einen undefinierten Wert zurück, und Object.keys() stellt sicher, dass nur die eigenen Eigenschaften des Objekts verwendet werden und nicht die Eigenschaften der gesamten Prototypenkette

Die Verwendung des neuen Object.entries() Methode:

Anmerkung: Diese Methode wird von Internet Explorer nicht nativ unterstützt. Sie können die Verwendung eines Polyfill für ältere Browser in Betracht ziehen.

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

for (let [key, value] of Object.entries(p)) {
  console.log(`${key}: ${value}`);
}

Answer 2

Unter ECMAScript 5 können Sie Folgendes kombinieren Object.keys() y 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 Originalobjekt nachgeschlagen werden muss:

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

Sie können kombinieren for...of Destrukturierung, und Object.entries :

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

Beide Object.keys() y Object.entries() die Eigenschaften in der gleichen Reihenfolge wie ein for...in Schleife aber ignorieren Sie die Prototypenkette . Es werden nur die eigenen aufzählbaren Eigenschaften des Objekts durchlaufen.

Answer 3

Sie müssen die for-in-Schleife

Seien Sie jedoch sehr vorsichtig, wenn Sie diese Art von Schleife verwenden, da dies zu Schleife für alle Eigenschaften entlang der Prototypenkette .

Verwenden Sie daher bei der Verwendung von for-in-Schleifen immer die hasOwnProperty Methode, um festzustellen, ob die aktuelle Eigenschaft in der Iteration wirklich eine Eigenschaft des Objekts ist, das Sie überprüfen:

for (var prop in p) {
    if (!p.hasOwnProperty(prop)) {
        //The current property is not a direct property of p
        continue;
    }
    //Do your logic with the property here
}

Answer 4

Die Frage wäre nicht vollständig, wenn wir nicht auch alternative Methoden für das Durchlaufen von Schleifen durch Objekte erwähnen würden.

Heutzutage bieten viele bekannte JavaScript-Bibliotheken ihre eigenen Methoden für die Iteration über Sammlungen, d.h. über Arrays , Objekte und array-ähnliche Objekte . Diese Methoden sind bequem zu verwenden und mit jedem Browser vollständig kompatibel.

1. Wenn Sie arbeiten mit jQuery können Sie verwenden jQuery.each() Methode. Sie kann verwendet werden, um nahtlos sowohl über Objekte als auch über Arrays zu iterieren:

   $.each(obj, function(key, value) {
       console.log(key, value);
   });

2. Sur Underscore.js finden Sie die Methode _.each() die eine Liste von Elementen durchläuft und jedes Element der Reihe nach an eine bereitgestellte Funktion übergibt (achten Sie auf die Reihenfolge der Argumente in iterativ Funktion!):

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

3. Lo-Dash bietet mehrere Methoden zur Iteration über Objekteigenschaften. Grundlegend _.forEach() (oder sein Alias _.each() ) ist nützlich, um sowohl Objekte als auch Arrays in einer Schleife zu durchlaufen, aber (!) Objekte mit length Eigenschaft werden wie Arrays behandelt, und um dieses Verhalten zu vermeiden, wird vorgeschlagen, die _.forIn() y _.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 eigene Eigenschaften eines Objekts (im Wesentlichen Prüfung gegen hasOwnProperty Funktion). Für einfache Objekte und Objektliterale ist jede dieser Methoden geeignet.

Im Allgemeinen haben alle beschriebenen Methoden das gleiche Verhalten bei allen übergebenen Objekten. Neben der Verwendung nativer for..in Schleife wird in der Regel schneller als jede Abstraktion, wie zum Beispiel jQuery.each() Diese Methoden sind wesentlich einfacher zu handhaben, erfordern weniger Kodierung und bieten eine bessere Fehlerbehandlung.

Answer 5

Vorwort:

• Objekteigenschaften können sein eigene (die Eigenschaft bezieht sich auf das Objekt selbst) oder vererbt (nicht auf dem Objekt selbst, sondern auf einem seiner Prototypen).
• Objekteigenschaften können sein aufzählbar o nicht abzählbar . Nicht aufzählbare Eigenschaften werden bei vielen Eigenschaftsaufzählungen/-arrays ausgelassen.
• Eigenschaftsnamen können Strings 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 in einer Schleife zu durchlaufen (einige Beispiele folgen der Liste):

1. for-in [ MDN , spec ] - Eine Schleifenstruktur, die die Namen der Objekte in einer Schleife durchläuft. aufzählbar Eigenschaften, einschließlich geerbter Eigenschaften, deren Namen Strings sind
2. Object.keys [ MDN , spec ] - Eine Funktion, die ein Array mit den Namen eines Objekts bereitstellt eigene , aufzählbar Eigenschaften, deren Namen Strings sind.
3. Object.values [ MDN , spec ] - Eine Funktion, die ein Array mit den Werte eines Objekts eigene , aufzählbar Eigenschaften.
4. Object.entries [ MDN , spec ] - Eine Funktion, die ein Array mit den Namen liefert y Werte eines Objekts eigene , aufzählbar Eigenschaften (jeder Eintrag im Array ist ein [name, value] Array).
5. Object.getOwnPropertyNames [ MDN , spec ] - Eine Funktion, die ein Array mit den Namen eines Objekts bereitstellt eigene 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 eigene Eigenschaften (auch nicht aufzählbare), deren Namen Symbols sind.
7. Reflect.ownKeys [ MDN , spec ] - Eine Funktion, die ein Array mit den Namen eines Objekts bereitstellt eigene Eigenschaften (auch nicht aufzählbare), unabhängig davon, ob diese Namen Strings oder Symbole sind.
8. Wenn Sie wollen tous der Eigenschaften eines Objekts, einschließlich der nicht aufzählbaren vererbten Eigenschaften, müssen Sie eine Schleife verwenden und Object.getPrototypeOf [ MDN , spec ] und verwenden Object.getOwnPropertyNames , Object.getOwnPropertySymbols , oder Reflect.ownKeys für jedes Objekt in der Prototypenkette (Beispiel am Ende dieser Antwort).

Mit allen außer for-in würden Sie eine Art Schleifenkonstrukt für das Array verwenden ( for , for-of , forEach etc.).

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 einem 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 Eigenschaften einschließlich der vererbten nicht aufzählbaren:

// 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;
}