Wie iteriere ich über ein JavaScript-Objekt?

Ich habe ein Objekt in JavaScript:

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

Ich möchte eine forSchleife verwenden, um ihre Eigenschaften zu erhalten. Und ich möchte es in Teilen wiederholen (nicht alle Objekteigenschaften gleichzeitig).

Mit einem einfachen Array kann ich es mit einer Standardschleife machen for:

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 geht das mit Objekten?

Verwenden Sie für die meisten Objekte for .. in:

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

Wenn Sie mit ES6 sowohl Schlüssel als auch Werte gleichzeitig benötigen, tun Sie dies

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

Um zu vermeiden, dass geerbte Eigenschaften protokolliert werden, überprüfen Sie dies mit hasOwnProperty :

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

Sie müssen hasOwnPropertybeim Iterieren von Schlüsseln nicht überprüfen, ob Sie ein einfaches Objekt verwenden (zum Beispiel eines, mit dem Sie sich selbst erstellt haben {}).

In dieser MDN-Dokumentation wird allgemeiner erläutert, wie mit Objekten und ihren Eigenschaften umgegangen wird.

Wenn Sie dies "in Blöcken" tun möchten, extrahieren Sie am besten die Schlüssel in einem Array. Da die Bestellung nicht garantiert ist, ist dies der richtige Weg. In modernen Browsern können Sie verwenden

let keys = Object.keys(yourobject);

Um kompatibler zu sein, sollten Sie Folgendes tun:

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

Dann können Sie sich auf Ihre Eigenschaften von Index iterieren: yourobject[keys[i]]:

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

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 Filterfunktion:

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

Sie müssen jedoch berücksichtigen, dass Eigenschaften im JavaScript-Objekt nicht sortiert sind, dh keine Reihenfolge haben.

Mit Object.entriesdir machst du so etwas.

 // 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 Object.entries () -Methode gibt ein Array der eigenen aufzählbaren Eigenschaft eines bestimmten Objekts zurück [Schlüssel, Wert]

Sie können also über das Objekt iterieren keyund valuefür jedes Objekt haben und so etwas erhalten.

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 Objekteinträge

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

Über eine Karte iterieren:

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 verwenden Sie für jedes:

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

Wenn Sie den Schlüssel und den Wert beim Iterieren möchten , können Sie eine for ... of- Schleife mit Object.entries verwenden .

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

Der einzig zuverlässige Weg, dies zu tun, besteht darin, Ihre Objektdaten in zwei Arrays zu speichern, einem der Schlüssel und einem für die Daten:

var keys = [];
var data = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        keys.push(key);
        data.push(obj[key]); // Not necessary, but cleaner, in my opinion. See the example below.
    }
}

Sie können dann wie gewohnt über die Arrays iterieren:

for(var i = 0; i < 100; i++){
    console.log(keys[i], data[i]);
    //or
    console.log(keys[i], obj[keys[i]]); // harder to read, I think.
}
for(var i = 100; i < 300; i++){
    console.log(keys[i], data[i]);
}

Ich benutze nicht Object.keys(obj), weil das IE 9+ ist.

-> wenn wir ein JavaScript-Objekt mit dem Schlüssel eines Array von Objekten durchlaufen und finden

Object.keys(Array).forEach(key => {

 console.log('key',key)

})

Wenn Sie das gesamte Objekt auf einmal iterieren möchten, können Sie die for inSchleife verwenden:

for (var i in obj) {
  ...
}

Aber wenn Sie das Objekt tatsächlich in Teile teilen möchten, können Sie dies nicht. Es gibt keine Garantie dafür, dass die Eigenschaften des Objekts in einer bestimmten Reihenfolge vorliegen. Daher kann ich mir zwei Lösungen vorstellen.

Zunächst müssen bereits gelesene Eigenschaften "entfernt" werden:

var i = 0;
for (var key in obj) {
    console.log(obj[key]);
    delete obj[key];
    if ( ++i > 300) break;
}

Eine andere Lösung, die ich mir vorstellen kann, ist die Verwendung von Array of Arrays anstelle des Objekts:

var obj = [['key1', 'value1'], ['key2', 'value2']];

Dann forfunktioniert die Standardschleife .

Ich habe mir endlich eine praktische Utility-Funktion mit einer einheitlichen Oberfläche ausgedacht, um Objekte, Strings, Arrays, TypedArrays, Maps, Sets (beliebige Iterables) zu iterieren.

const iterate = require('@a-z/iterate-it');
const obj = { a: 1, b: 2, c: 3 };

iterate(obj, (value, key) => console.log(key, value)); 
// a 1
// b 2
// c 3

https://github.com/alrik/iterate-javascript

Sie können versuchen, lodash zu verwenden. Eine moderne JavaScript-Dienstprogrammbibliothek, die Modularität, Leistung und Extras bietet, um Objekte schnell zu iterieren: -

var  users  =   {
    'fred':     { 
        'user':   'fred',
            'age':  40 
    },
    'pebbles':  { 
        'user':   'pebbles',
         'age':  1 
    }
}; 
_.mapValues(users,  function(o)  { 
    return  o.age; 
});
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
// The `_.property` iteratee shorthand.
console.log(_.mapValues(users,  'age')); // returns age property & value 
console.log(_.mapValues(users,  'user')); // returns user property & value 
console.log(_.mapValues(users)); // returns all objects 
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-compat/3.10.2/lodash.js"></script>

Für die Objektiteration verwenden wir normalerweise eine for..inSchleife. Diese Struktur durchläuft alle aufzählbaren Eigenschaften, einschließlich derjenigen, die über die prototypische Vererbung geerbt werden. Zum Beispiel:

let obj = {
  prop1: '1',
  prop2: '2'
}

for(let el in obj) {
  console.log(el);
  console.log(obj[el]);
}

Allerdings for..inwird Schleife über alle zählbare Elemente , und dies wird nicht in der Lage uns die Iteration in Stücke zu teilen. Um dies zu erreichen, können wir die eingebaute Object.keys()Funktion verwenden, um alle Schlüssel eines Objekts in einem Array abzurufen. Wir können dann die Iteration in mehrere for-Schleifen aufteilen und über das Schlüsselarray auf die Eigenschaften zugreifen. Zum Beispiel:

let obj = {
  prop1: '1',
  prop2: '2',
  prop3: '3',
  prop4: '4',
};

const keys = Object.keys(obj);
console.log(keys);


for (let i = 0; i < 2; i++) {
  console.log(obj[keys[i]]);
}


for (let i = 2; i < 4; i++) {
  console.log(obj[keys[i]]);
}

var Dictionary = {
  If: {
    you: {
      can: '',
      make: ''
    },
    sense: ''
  },
  of: {
    the: {
      sentence: {
        it: '',
        worked: ''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + ': ' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);

Wirklich eine PITA, dies ist nicht Teil von Standard-Javascript.

/**
 * Iterates the keys and values of an object.  Object.keys is used to extract the keys.
 * @param object The object to iterate
 * @param fn (value,key)=>{}
 */
function objectForEach(object, fn) {
    Object.keys(object).forEach(key => {
        fn(object[key],key, object)
    })
}

Hinweis: Ich habe die Rückrufparameter auf (Wert, Schlüssel) umgestellt und ein drittes Objekt hinzugefügt, um die API mit anderen APIs konsistent zu machen.

Verwenden Sie es so

const o = {a:1, b:true};
objectForEach(o, (value, key, obj)=>{
    // do something
});

Ja. Sie können ein Objekt mit der for-Schleife durchlaufen. Hier ist ein Beispiel

var myObj = {
    abc: 'ABC',
    bca: 'BCA',
    zzz: 'ZZZ',
    xxx: 'XXX',
    ccc: 'CCC',
}

var k = Object.keys (myObj);
for (var i = 0; i < k.length; i++) {
    console.log (k[i] + ": " + myObj[k[i]]);
}

HINWEIS: Das oben erwähnte Beispiel funktioniert nur in IE9 +. Siehe Objec.keys Browserunterstützung hier .

const o = {
  name: "Max",
  location: "London"
};

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

Versuchen Sie es online