Itérer à travers les propriétés des objets

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

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

Comment la variable proptreprésente-t-elle les propriétés de l'objet? Ce n'est pas une méthode ou une propriété intégrée. Pourquoi propose-t-il toutes les propriétés de l'objet?

L'itération des propriétés nécessite cette hasOwnPropertyvérification supplémentaire :

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

C'est nécessaire car le prototype d'un objet contient des propriétés supplémentaires pour l'objet qui font techniquement partie de l'objet. Ces propriétés supplémentaires sont héritées de la classe d'objets de base, mais sont toujours des propriétés de obj.

hasOwnProperty vérifie simplement s'il s'agit d'une propriété spécifique à cette classe, et non héritée de la classe de base.

Il est également possible d'appeler hasOwnPropertyvia l'objet lui-même:

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

Mais cela échouera si l'objet a un champ sans rapport avec le même nom:

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

C'est pourquoi il est plus sûr de l'appeler à la Object.prototypeplace:

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

Depuis JavaScript 1.8.5, vous pouvez utiliser Object.keys(obj)pour obtenir un tableau de propriétés définies sur l'objet lui-même (celles qui renvoient true pour 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 
});

C'est mieux (et plus lisible) que d'utiliser une boucle for-in.

Il est pris en charge sur ces navigateurs:

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

Voir la référence de Mozilla Developer Network Object.keys () pour plus d'informations.

Les filles et les gars, nous sommes en 2019 et nous n'avons pas beaucoup de temps pour taper ... Alors, faisons cette nouvelle ECMAScript 2016:

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

C'est le for...in statement( MDN , spécification ECMAScript ).

Vous pouvez le lire comme " POUR chaque propriété DANS l' objobjet, affectez tour à tour chaque propriété à la variable PROPT ".

Dans les implémentations mises à jour d'ES, vous pouvez utiliser Object.entries:

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

ou

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

Si vous souhaitez simplement parcourir les valeurs, utilisez Object.values:

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

ou

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

C'est juste une for...inboucle. Consultez la documentation sur Mozilla .

Si votre environnement prend en charge ES2017, je recommanderais Object.entries :

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

Comme indiqué dans la documentation Mozillas Object.entries () :

La méthode Object.entries () renvoie un tableau de paires de propriétés énumérables [clé, valeur] propres à un objet donné, dans le même ordre que celui fourni par une boucle for ... in (la différence étant qu'une boucle for-in énumère propriétés de la chaîne prototype également).

Fondamentalement, avec Object.entries, nous pouvons renoncer à l'étape supplémentaire suivante qui est requise avec l'ancienne pour ... en boucle:

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

jquery vous permet de le faire maintenant:

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

La réponse de Dominik est parfaite, je préfère simplement le faire de cette façon, car c'est plus propre à lire:

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

    // Do stuff...
}

Les réponses ci-dessus sont un peu ennuyeuses car elles n'expliquent pas ce que vous faites à l'intérieur de la boucle for après vous être assuré qu'il s'agit d'un objet: VOUS N'Y ACCÉDEZ PAS DIRECTEMENT! En réalité, vous ne recevez que la CLÉ que vous devez appliquer à l’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;
  }
}

Tout cela est sûr ECMA5. Fonctionne même dans les versions JS boiteuses comme Rhino;)

Pour ajouter l'utilisation de ES2015 de Reflect.ownKeys(obj) et l'itération d'ES2015 sur les propriétés via un itérateur.

Par exemple:

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

peut être répété par

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

Si vous souhaitez parcourir directement les valeurs des clés d'un objet, vous pouvez définir un iterator , tout comme les itérateurs par défaut de JavaScipts pour les chaînes, les tableaux, les tableaux typés, Map et Set.

JS tentera d'itérer via la propriété d'itérateur par défaut, qui doit être définie comme Symbol.iterator .

Si vous voulez pouvoir parcourir tous les objets, vous pouvez l'ajouter en tant que prototype d'objet:

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

Cela vous permettrait d'itérer sur les valeurs d'un objet avec une boucle for ... of, par exemple:

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

Attention : Au moment d'écrire cette réponse (juin 2018), tous les autres navigateurs, mais IE, prennent en charge les générateurs et l' for...ofitération viaSymbol.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]);
    });
}

La boucle for ... in représente chaque propriété d'un objet, car elle ressemble à une boucle for. Vous avez défini propt dans la boucle for ... in en faisant:

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

Une boucle for ... in parcourt les propriétés énumérables d'un objet. Quelle que soit la variable que vous définissez ou placez dans la boucle for ... in, elle change chaque fois qu'elle passe à la propriété suivante qu'elle itère. La variable dans la boucle for ... in parcourt les clés, mais sa valeur est la valeur de la clé. Par exemple:

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

Vous pouvez voir en quoi la variable diffère de sa valeur. En revanche, une boucle for ... of fait le contraire.

J'espère que ça aide.

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

Vous pouvez utiliser Lodash. La documentation

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

Votre forboucle itère sur toutes les propriétés de l'objet obj. proptest défini dans la première ligne de votre boucle for. Il s'agit d'une chaîne qui est le nom d'une propriété de l' objobjet. Dans la première itération de la boucle, proptserait "nom".

Les objets en JavaScript sont des collections de propriétés et peuvent donc être bouclés dans un pour chaque instruction.

Vous devez penser objà une collection de valeurs clés.

De nos jours, vous pouvez convertir un objet JS standard en un objet itérable simplement en ajoutant une méthode Symbol.iterator. Ensuite, vous pouvez utiliser une for ofboucle et accéder directement à ses valeurs ou même utiliser un opérateur d'étalement sur l'objet également. Cool. Voyons comment on peut y arriver:

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

Si vous exécutez Node, je recommanderais:

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

Bien que la réponse la mieux notée soit correcte, voici un cas d'utilisation alternatif, c'est-à-dire si vous parcourez un objet et souhaitez créer un tableau à la fin. Utiliser .mapau lieu deforEach

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

Ajout également de la manière récursive:

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

Usage:

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

Ce que fait la boucle for..in, c'est qu'elle crée une nouvelle variable (var someVariable) et stocke ensuite chaque propriété de l'objet donné dans cette nouvelle variable (someVariable) une par une. Par conséquent, si vous utilisez le bloc {}, vous pouvez itérer. Prenons l'exemple suivant.

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

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

console.log(someVariable); // outputs planet

Ici, j'itère chaque nœud et crée des noms de nœuds significatifs. Si vous remarquez, instanceOf Array et instanceOf Object font à peu près la même chose (dans mon application, je donne cependant une logique différente)

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

note - Je suis inspiré par la réponse d'Ondrej Svejdar. Mais cette solution a de meilleures performances et moins ambiguës

Vous voulez essentiellement parcourir chaque propriété de l'objet.

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

Je veux ajouter aux réponses ci-dessus, car vous pourriez avoir des intentions différentes de Javascript. Un objet JSON et un objet Javascript sont des choses différentes, et vous voudrez peut-être parcourir les propriétés d'un objet JSON en utilisant les solutions proposées ci-dessus, puis être surpris.

Supposons que vous ayez un objet JSON comme:

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

La mauvaise façon d'itérer à travers ses «propriétés»:

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

Vous pourriez être surpris de voir l'enregistrement de la console 0, 1etc. lorsque vous parcourez à travers les propriétés prop1et prop2et prop3_1. Ces objets sont des séquences et les index d'une séquence sont les propriétés de cet objet en Javascript.

Une meilleure façon d'itérer récursivement les propriétés d'un objet JSON serait de vérifier d'abord si cet objet est une séquence ou non:

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

            }

     }
}

Pour affiner davantage la réponse acceptée, il convient de noter que si vous instanciez l'objet avec un var object = Object.create(null)alors object.hasOwnProperty(property)déclenchera une TypeError. Donc, pour être sûr, vous devez l'appeler à partir du prototype comme ceci:

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

Vérifiez ce lien, il vous aidera à 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);