Itération dans les propriétés de l'objet

Question

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

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

Comment la variable propt représentent les propriétés de l'objet ? Ce n'est pas une méthode ou une propriété intégrée. Pourquoi cela apparaît-il avec chaque propriété de l'objet ?

Answer 1

L'itération sur les propriétés nécessite cet élément supplémentaire hasOwnProperty vérifier :

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

C'est nécessaire parce que 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 de l'objet de base, mais sont toujours des propriétés de la classe obj .

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

---

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

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

Mais cela échouera si l'objet possède 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 d'appeler par le biais de Object.prototype à la place :

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

Answer 2

À partir de 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 vrai pour la fonction 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 supporté par ces navigateurs :

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

Voir le Mozilla Developer Network Objet.keys() de référence pour de plus amples informations.

Answer 3

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

Vous pouvez le lire comme " POUR chaque propriété DANS le site obj affectez chaque propriété à l'objet PROPT variable à son tour".

Answer 4

C'est juste un for...in boucle. Consultez la documentation à Mozilla .

Answer 5

for (property in object) {
  ...
}