Durch Objekteigenschaften iterieren

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

Wie proptrepräsentiert die Variable die Eigenschaften des Objekts? Es ist keine eingebaute Methode oder Eigenschaft. Warum kommt es mit jeder Eigenschaft im Objekt?

Das Iterieren über Eigenschaften erfordert diese zusätzliche hasOwnPropertyPrüfung:

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

Dies ist erforderlich, da der Prototyp eines Objekts zusätzliche Eigenschaften für das Objekt enthält, die technisch Teil des Objekts sind. Diese zusätzlichen Eigenschaften werden von der Basisobjektklasse geerbt, sind jedoch weiterhin Eigenschaften von obj.

hasOwnProperty Überprüft einfach, ob dies eine für diese Klasse spezifische Eigenschaft ist und keine von der Basisklasse geerbte.

Es ist auch möglich, hasOwnPropertydas Objekt selbst aufzurufen :

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

Dies schlägt jedoch fehl, wenn das Objekt ein nicht verwandtes Feld mit demselben Namen hat:

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

Deshalb ist es sicherer, es Object.prototypestattdessen durchzurufen:

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

Ab JavaScript 1.8.5 können Sie Object.keys(obj)ein Array von Eigenschaften abrufen, die für das Objekt selbst definiert sind (diejenigen, für die true zurückgegeben wird obj.hasOwnProperty(key)).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

Dies ist besser (und besser lesbar) als die Verwendung einer For-In-Schleife.

Es wird in diesen Browsern unterstützt:

• Firefox (Gecko): 4 (2,0)
• Chrome: 5
• Internet Explorer: 9

Siehe das Mozilla Developer Network Object.keys () ‚s Referenz für weitere Informationen.

Mädchen und Jungs, wir sind im Jahr 2019 und wir haben nicht so viel Zeit zum Tippen ... Also lasst uns dieses coole neue schicke ECMAScript 2016 machen:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

Es ist die for...in statement( MDN , ECMAScript-Spezifikation ).

Sie können es als lesen „ für jede Eigenschaft in dem objObjekt, jede Eigenschaft zum zuweisen PROPT Variable wiederum“.

In aktuellen Implementierungen von ES können Sie Folgendes verwenden Object.entries:

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

oder

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

Wenn Sie nur die Werte durchlaufen möchten, verwenden Sie Object.values:

for (const value of Object.values(obj)) { }

oder

Object.values(obj).forEach(value => ...)

Es ist nur eine for...inSchleife. Lesen Sie die Dokumentation bei Mozilla .

Wenn Ihre Umgebung ES2017 unterstützt, würde ich Object.entries empfehlen :

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

Wie in der Dokumentation zu Mozillas Object.entries () gezeigt :

Die Object.entries () -Methode gibt ein Array der enumerierbaren Eigenschaftspaare [Schlüssel, Wert] eines bestimmten Objekts in derselben Reihenfolge zurück, wie sie von einer for ... in-Schleife bereitgestellt wird (der Unterschied besteht darin, dass eine for-in-Schleife auflistet Eigenschaften auch in der Prototypenkette).

Grundsätzlich können wir mit Object.entries auf den folgenden zusätzlichen Schritt verzichten, der mit dem älteren for ... in loop erforderlich ist :

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

Mit jquery können Sie dies jetzt tun:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

Dominiks Antwort ist perfekt, ich mache es einfach lieber so, da es sauberer zu lesen ist:

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}

Die obigen Antworten sind etwas ärgerlich, da sie nicht erklären, was Sie in der for-Schleife tun, nachdem Sie sichergestellt haben, dass es sich um ein Objekt handelt: SIE ZUGREIFEN NICHT DIREKT! Sie erhalten tatsächlich nur den SCHLÜSSEL, den Sie für das OBJ benötigen:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

Dies ist alles ECMA5 sicher. Funktioniert sogar in lahmen JS-Versionen wie Rhino;)

Hinzufügen der Verwendung Reflect.ownKeys(obj)und Iteration von ES2015 über die Eigenschaften über einen Iterator.

Zum Beispiel:

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };

kann durch iteriert werden

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

Wenn Sie direkt über die Werte der Schlüssel eines Objekts iterieren möchten, können Sie einen definieren iterator, genau wie die Standarditeratoren von JavaScipts für Zeichenfolgen, Arrays, typisierte Arrays, Map und Set.

JS versucht, über die Standard-Iterator-Eigenschaft zu iterieren, die als definiert werden muss Symbol.iterator.

Wenn Sie in der Lage sein möchten, alle Objekte zu durchlaufen, können Sie es als Prototyp von Object hinzufügen:

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

Auf diese Weise können Sie die Werte eines Objekts mit einer for ... of-Schleife durchlaufen, z. B.:

for(val of obj) { console.log('Value is:' + val ) }

Achtung : Zum Zeitpunkt des Schreibens dieser Antwort (Juni 2018) unterstützen alle anderen Browser außer IE Generatoren und for...ofIterationen überSymbol.iterator

if(Object.keys(obj).length) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

// *** Explanation line by line ***

// Explaining the bellow line
// It checks if obj has at least one property. Here is how:
// Object.keys(obj) will return an array with all keys in obj
// If there is no keys in obj, it will return empty array = []
// Then it will get it's length, if it has at least one element,
// it's bigger than 0 which evaluates to true and the bellow 
// code will be executed.
// Else means it's length = 0 which evaluates to false
// NOTE: you can use Object.hasOwnProperty() instead of Object.keys(obj).length
if(Object.keys(obj).length) {

    // Explaining the bellow line
    // Just like in the previous line, this returns an array with
    // all keys in obj (because if code execution got here, it means 
    // obj has keys.) 
    // Then just invoke built-in javascript forEach() to loop
    // over each key in returned array and calls a call back function 
    // on each array element (key), using ES6 arrow function (=>)
    // Or you can just use a normal function ((key) { blah blah }).
    Object.keys(obj).forEach(key => {

        // The bellow line prints out all keys with their 
        // respective value in obj.
        // key comes from the returned array in Object.keys(obj)
        // obj[key] returns the value of key in obj
        console.log("\n" + key + ": " + obj[key]);
    });
}

Die for ... in-Schleife repräsentiert jede Eigenschaft in einem Objekt, da sie genau wie eine for-Schleife ist. Sie haben propt in der for ... in-Schleife definiert, indem Sie Folgendes getan haben:

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

Eine for ... in-Schleife durchläuft die aufzählbaren Eigenschaften eines Objekts. Die Variable, die Sie definieren oder in die for ... in-Schleife einfügen, ändert sich jedes Mal, wenn Sie zur nächsten iterierten Eigenschaft wechseln. Die Variable in der for ... in-Schleife durchläuft die Schlüssel, aber der Wert ist der Wert des Schlüssels. Zum Beispiel:

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

Sie können sehen, wie sich die Variable vom Wert der Variablen unterscheidet. Im Gegensatz dazu macht eine for ... of-Schleife das Gegenteil.

Ich hoffe das hilft.

let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).map((item) => {console.log("item", obj[item])})

// a
// 3
// 2

Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);

Sie können Lodash verwenden. Die Dokumentation

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

Ihre forSchleife durchläuft alle Eigenschaften des Objekts obj. proptwird in der ersten Zeile Ihrer for-Schleife definiert. Es ist eine Zeichenfolge, die den Namen einer Eigenschaft des objObjekts darstellt. In der ersten Iteration der Schleife proptwäre "Name".

Objekte in JavaScript sind Sammlungen von Eigenschaften und können daher für jede Anweisung in einer Schleife ausgeführt werden.

Sie sollten sich objeine Schlüsselwertsammlung vorstellen.

Heutzutage können Sie ein Standard-JS-Objekt in ein iterierbares Objekt konvertieren, indem Sie einfach eine Symbol.iterator-Methode hinzufügen. Dann können Sie eine for ofSchleife verwenden und direkt auf ihre Werte zugreifen oder sogar einen Spread-Operator für das Objekt verwenden. Cool. Mal sehen, wie wir es schaffen können:

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);

Wenn Sie Node ausführen, würde ich empfehlen:

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});

Während die am besten bewertete Antwort korrekt ist, gibt es hier einen alternativen Anwendungsfall, dh wenn Sie über ein Objekt iterieren und am Ende ein Array erstellen möchten. Verwenden Sie .mapanstelle vonforEach

const newObj = Object.keys(obj).map(el => {
    //ell will hold keys 
   // Getting the value of the keys should be as simple as obj[el]
})

Hinzufügen des rekursiven Weges:

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

Verwendungszweck:

iterate({ foo: "foo", bar: { foo: "foo"} }); 

Was for..in loop tut, ist, dass es eine neue Variable (var someVariable) erstellt und dann jede Eigenschaft des angegebenen Objekts einzeln in dieser neuen Variablen (someVariable) speichert. Wenn Sie also Block {} verwenden, können Sie iterieren. Betrachten Sie das folgende Beispiel.

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

Hier iteriere ich jeden Knoten und erstelle aussagekräftige Knotennamen. Wenn Sie bemerken, machen instanceOf Array und instanceOf Object so ziemlich dasselbe (in meiner Anwendung gebe ich jedoch eine andere Logik an).

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

Anmerkung - Ich bin von Ondrej Svejdars Antwort inspiriert. Diese Lösung hat jedoch eine bessere Leistung und ist weniger mehrdeutig

Grundsätzlich möchten Sie jede Eigenschaft im Objekt durchlaufen.

JSFiddle

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);

Ich möchte die obigen Antworten ergänzen, da Sie möglicherweise andere Absichten als Javascript haben. Ein JSON-Objekt und ein Javascript-Objekt sind verschiedene Dinge, und Sie möchten möglicherweise die Eigenschaften eines JSON-Objekts mit den oben vorgeschlagenen Lösungen durchlaufen und sich dann überraschen lassen.

Angenommen, Sie haben ein JSON-Objekt wie:

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

Der falsche Weg, um seine 'Eigenschaften' zu durchlaufen:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

Sie könnten sehen die Konsolenprotokollierung überrascht sein 0, 1usw. , wenn das Iterieren durch die Eigenschaften prop1und prop2und prop3_1. Diese Objekte sind Sequenzen, und die Indizes einer Sequenz sind Eigenschaften dieses Objekts in Javascript.

Eine bessere Möglichkeit, die Eigenschaften eines JSON-Objekts rekursiv zu durchlaufen, besteht darin, zunächst zu überprüfen, ob es sich bei diesem Objekt um eine Sequenz handelt oder nicht:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}

Zur weiteren Verfeinerung der akzeptierte Antwort es ist erwähnenswert, dass , wenn Sie das Objekt mit einem instanziiert var object = Object.create(null)dann object.hasOwnProperty(property)wird eine Typeerror auslösen. Um auf der sicheren Seite zu sein, müssen Sie es vom Prototyp wie folgt aufrufen:

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}

Überprüfen Sie diesen Link, um https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin zu helfen

var person = {fname:"John", lname:"Doe", age:25}; 

  var text = "";
  var x;
  for (x in person) {
    text += person[x] + " "; // where x will be fname,lname,age
   }
Console.log(text);