Scorrere le proprietà degli oggetti

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

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

In che modo la variabile proptrappresenta le proprietà dell'oggetto? Non è un metodo o una proprietà incorporati. Perché viene fornito con ogni proprietà nell'oggetto?

L'iterazione delle proprietà richiede questo hasOwnPropertycontrollo aggiuntivo :

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

È necessario perché il prototipo di un oggetto contiene proprietà aggiuntive per l'oggetto che sono tecnicamente parte dell'oggetto. Queste proprietà aggiuntive sono ereditate dalla classe di oggetti base, ma sono comunque proprietà di obj.

hasOwnProperty controlla semplicemente se si tratta di una proprietà specifica di questa classe e non ereditata dalla classe di base.

È anche possibile richiamare hasOwnPropertyl'oggetto stesso:

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

Ma questo fallirà se l'oggetto ha un campo non correlato con lo stesso nome:

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

Ecco perché è più sicuro chiamarlo attraverso Object.prototype:

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

A partire da JavaScript 1.8.5 è possibile utilizzare Object.keys(obj)per ottenere una matrice di proprietà definite sull'oggetto stesso (quelle che restituiscono true per 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 
});

Questo è meglio (e più leggibile) rispetto all'utilizzo di un ciclo for-in.

È supportato su questi browser:

• Firefox (Gecko): 4 (2.0)
• Chrome: 5
• Internet Explorer: 9

Vedere Developer Network Mozilla Object.keys () di riferimento 's per informazioni addizionali sulla consegna.

Ragazze e ragazzi siamo nel 2019 e non abbiamo molto tempo per scrivere ... Quindi facciamo questo fantastico nuovo ECMAScript 2016:

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

È il for...in statement( MDN , specifiche ECMAScript ).

Si può leggere come " PER ogni proprietà IN l' objoggetto, assegnare ad ogni struttura al PROPT variabili, a sua volta".

Nelle implementazioni aggiornate di ES, è possibile utilizzare Object.entries:

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

o

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

Se vuoi semplicemente scorrere i valori, usa Object.values:

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

o

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

È solo un for...inciclo. Consulta la documentazione su Mozilla .

Se il tuo ambiente supporta ES2017 , consiglierei Object.entries :

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

Come mostrato nella documentazione di Mozillas Object.entries () :

Il metodo Object.entries () restituisce una matrice delle coppie di proprietà [chiave, valore] di un determinato oggetto, nello stesso ordine di quello fornito da un ciclo for ... in (la differenza è che enumera un ciclo for-in proprietà anche nella catena di prototipi).

Fondamentalmente con Object.entries possiamo rinunciare al seguente passaggio aggiuntivo che è necessario con il più vecchio per ... in loop:

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

jquery ti permette di farlo ora:

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

La risposta di Dominik è perfetta, preferisco solo farlo in questo modo, poiché è più pulito da leggere:

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

    // Do stuff...
}

Le risposte di cui sopra sono un po 'fastidiose perché non spiegano cosa fai all'interno del ciclo for dopo esserti assicurato che sia un oggetto: NON LO ACCEDI DIRETTAMENTE! In realtà ti viene consegnato solo il CHIAVE che devi applicare all'OBJ:

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

Tutto questo è sicuro per ECMA5. Funziona anche nelle versioni JS come Rhino;)

Per aggiungere l'utilizzo di ES2015 di Reflect.ownKeys(obj) e l'iterazione di sulle proprietà tramite un iteratore.

Per esempio:

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

può essere ripetuto da

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

Se desideri iterare direttamente sui valori delle chiavi di un oggetto, puoi definire un iterator , proprio come gli iteratori predefiniti di JavaScipts per stringhe, array, array digitati, Map e Set.

JS tenterà di eseguire l'iterazione tramite la proprietà iteratore predefinita, che deve essere definita come Symbol.iterator.

Se vuoi essere in grado di iterare su tutti gli oggetti, puoi aggiungerlo come prototipo di Object:

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

Ciò consentirebbe di scorrere i valori di un oggetto con un ciclo for ... of, ad esempio:

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

Attenzione : al momento di scrivere questa risposta (giugno 2018) tutti gli altri browser, tranne IE, supportano i generatori e l' for...ofiterazione tramiteSymbol.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]);
    });
}

Il ciclo for ... in rappresenta ciascuna proprietà di un oggetto perché è proprio come un ciclo for. Hai definito propt nel ciclo for ... in facendo:

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

Un ciclo for ... in scorre le proprietà enumerabili di un oggetto. Qualunque sia la variabile definita o inserita nel ciclo for ... in, cambia ogni volta che passa alla proprietà successiva che itera. La variabile nel ciclo for ... in scorre le chiavi, ma il suo valore è il valore della chiave. Per esempio:

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

Puoi vedere come la variabile differisce dal valore della variabile. Al contrario, un ciclo for ... of fa il contrario.

Spero che questo possa essere d'aiuto.

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]}`)
);

Puoi usare Lodash. La documentazione

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

Il tuo forciclo sta iterando su tutte le proprietà dell'oggetto obj. proptè definito nella prima riga del ciclo for. È una stringa che è un nome di una proprietà objdell'oggetto. Nella prima iterazione del ciclo, proptsarebbe "nome".

Gli oggetti in JavaScript sono raccolte di proprietà e possono quindi essere inseriti in un ciclo per ogni istruzione.

Dovresti pensare obja una raccolta di valori chiave.

Oggi è possibile convertire un oggetto JS standard in un oggetto iterabile semplicemente aggiungendo un metodo Symbol.iterator. Quindi puoi usare un for ofloop e accedere direttamente ai suoi valori o persino usare un operatore spread sull'oggetto. Freddo. Vediamo come possiamo farcela:

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

Se si esegue Node , consiglierei:

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

Mentre la risposta più votata è corretta, ecco un caso d'uso alternativo, ad esempio se stai iterando su un oggetto e vuoi creare un array alla fine. Usa .mapinvece diforEach

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

Aggiungendo anche il modo ricorsivo:

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

Uso:

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

Quello che fa per..in loop è che crea una nuova variabile (var someVariable) e quindi memorizza ciascuna proprietà dell'oggetto dato in questa nuova variabile (someVariable) una per una. Pertanto, se si utilizza il blocco {}, è possibile eseguire l'iterazione. Considera il seguente esempio.

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

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

console.log(someVariable); // outputs planet

Qui sto iterando ogni nodo e creando nomi di nodo significativi. Se noti, instanceOf Array e instanceOf Object fa praticamente la stessa cosa (nella mia applicazione, sto dando una logica diversa però)

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

nota - Sono ispirato dalla risposta di Ondrej Svejdar. Ma questa soluzione ha prestazioni migliori e meno ambigue

Fondamentalmente si desidera eseguire il ciclo attraverso ogni proprietà nell'oggetto.

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

Voglio aggiungere le risposte sopra, perché potresti avere intenzioni diverse da Javascript. Un oggetto JSON e un oggetto Javascript sono cose diverse e potresti voler scorrere le proprietà di un oggetto JSON usando le soluzioni proposte in precedenza e quindi rimanere sorpreso.

Supponiamo di avere un oggetto JSON come:

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

Il modo sbagliato di scorrere le sue "proprietà":

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

Potreste essere sorpresi di vedere la registrazione della console 0, 1ecc quando l'iterazione attraverso le proprietà di prop1e prop2e diprop3_1 . Tali oggetti sono sequenze e gli indici di una sequenza sono proprietà di quell'oggetto in Javascript.

Un modo migliore per iterare ricorsivamente attraverso le proprietà di un oggetto JSON sarebbe innanzitutto verificare se quell'oggetto è una sequenza o meno:

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

            }

     }
}

Per affinare ulteriormente la risposta accettata vale la pena di notare che se si un'istanza dell'oggetto con un var object = Object.create(null)poi object.hasOwnProperty(property)attiverà una TypeError. Quindi, per essere al sicuro, dovresti chiamarlo dal prototipo in questo modo:

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

Controlla questo link che aiuterà https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin

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