Wie kann man über ein JavaScript-Objekt iterieren?

Question

Ich habe ein Objekt in JavaScript:

{
    abc: '...',
    bca: '...',
    zzz: '...',
    xxx: '...',
    ccc: '...',
    // ...
}

Ich möchte eine for Schleife, um seine Eigenschaften zu erhalten. Und ich möchte es in Teilen (nicht alle Objekteigenschaften auf einmal) zu wiederholen.

Bei einem einfachen Array kann ich das mit einer Standard for Schleife:

for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last

Aber wie macht man das mit Objekten?

Answer 1

Für die Iteration über Schlüssel von Arrays, Strings oder Objekte verwenden for .. in :

for (let key in yourobject) {
  console.log(key, yourobject[key]);
}

Mit ES6, wenn Sie Schlüssel und Werte gleichzeitig benötigen, tun Sie

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

Um die Protokollierung vererbter Eigenschaften zu vermeiden, prüfen Sie mit hasOwnProperty :

for (let key in yourobject) {
   if (yourobject.hasOwnProperty(key)) {
      console.log(key, yourobject[key]);
   }
}

Sie brauchen nicht zu prüfen hasOwnProperty bei der Iteration von Schlüsseln, wenn Sie ein einfaches Objekt verwenden (zum Beispiel eines, das Sie selbst mit {} ).

Diese MDN-Dokumentation erklärt allgemeiner, wie man mit Objekten und ihren Eigenschaften umgeht.

Wenn Sie es "in Stücken" machen wollen, ist es am besten, die Schlüssel in einem Array zu extrahieren. Da die Reihenfolge nicht garantiert ist, ist dies der richtige Weg. In modernen Browsern können Sie

let keys = Object.keys(yourobject);

Um kompatibler zu sein, sollten Sie dies tun:

 let keys = [];
 for (let key in yourobject) {      
     if (yourobject.hasOwnProperty(key)) keys.push(key);
 }

Dann können Sie Ihre Eigenschaften nach Index durchgehen: yourobject[keys[i]] :

for (let i=300; i < keys.length && i < 600; i++) { 
   console.log(keys[i], yourobject[keys[i]]);
}

Answer 2

Hier ist eine weitere Iterationslösung für moderne Browser:

Object.keys(obj)
  .filter((k, i) => i >= 100 && i < 300)
  .forEach(k => console.log(obj[k]));

Oder ohne die Filterfunktion:

Object.keys(obj).forEach((k, i) => {
    if (i >= 100 && i < 300) {
        console.log(obj[k]);
    }
});

Sie müssen jedoch bedenken, dass Eigenschaften in JavaScript-Objekten nicht sortiert sind, d. h. keine Reihenfolge haben.

Answer 3

Verwendung von Object.entries tun Sie etwas in dieser Art.

 // array like object with random key ordering
 const anObj = { 100: 'a', 2: 'b', 7: 'c' };
 console.log(Object.entries(anObj)); // [ ['2', 'b'],['7', 'c'],['100', 'a'] ]

Die Methode Object.entries() gibt ein Array mit den eigenen aufzählbaren Eigenschaften [key, value] eines bestimmten Objekts zurück.

Sie können also über das Objekt iterieren und haben key y value für jedes der Objekte und erhalten so etwas wie dieses.

const anObj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(anObj).map(obj => {
   const key   = obj[0];
   const value = obj[1];

   // do whatever you want with those values.
});

oder so

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Eine Referenz finden Sie in den MDN-Dokumenten für Objekt-Einträge

Answer 4

Mit den neuen ES6/ES2015-Funktionen müssen Sie nicht mehr ein Objekt verwenden, um über einen Hash zu iterieren. Sie können eine Karte . Javascript Maps halten die Schlüssel in der Einfügereihenfolge, was bedeutet, dass man sie durchlaufen kann, ohne die hasOwnProperty überprüfen zu müssen, was immer ein echter Hack war.

Iterieren Sie über eine Karte:

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

for (var key of myMap.keys()) {
  console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"

for (var value of myMap.values()) {
  console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

oder forEach verwenden:

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

Answer 5

Wenn Sie die Schlüssel und Wert bei der Iteration können Sie eine für...von Schleife mit Objekt.Einträge .

const myObj = {a: 1, b: 2}

for (let [key, value] of Object.entries(myObj)) {
    console.log(`key=${key} value=${value}`)
}

// output: 
// key=a value=1
// key=b value=2