Parcourir les propriétés de l'objet

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

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

Comment la variable propt représentent les propriétés de l'objet? Ce n'est pas une méthode intégrée, ni une propriété. Alors pourquoi trouve-t-il Toutes les propriétés de l'objet?

1561
demandé sur Liam 2011-11-29 18:30:26
la source

25 ответов

Itération sur les propriétés nécessite supplémentaires hasOwnProperty case:

for (var property in object) {
    if (object.hasOwnProperty(property)) {
        // 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 d'objet de base, mais sont toujours des propriétés de object .

hasOwnProperty vérifie simplement si c'est une propriété spécifique à cette classe, et pas une héritée de la classe de base.

2088
répondu Dominik 2017-05-19 02:30:36
la source

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 (ceux 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.

de Sa prise en charge sur ces navigateurs:

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

voir the Mozilla Developer Network Object.les touches() de référence pour de plus amples informations.

809
répondu Danny R 2018-03-30 23:19:48
la source

C'est le for...in statement ( MDN , ECMAScript spec ).

vous pouvez le lire comme pour chaque bien dans l'objet obj , assignez chaque bien à la PROPT variable à tour de rôle".

193
répondu Marc B 2014-04-17 12:08:49
la source

les Filles et les gars nous sommes en 2017 et nous n'avons pas beaucoup de temps pour écrire... Alors faisons cette nouvelle fantaisie cool ECMAScript 2016:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));
157
répondu Frank Roth 2018-06-26 14:18:40
la source

dans les versions à venir de ES, vous pouvez utiliser Object.entries :

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

ou

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

si vous voulez simplement itérer les valeurs, utilisez Object.valeurs:

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

ou

Object.values(obj).forEach(value => ...)
62
répondu 2017-09-22 11:53:16
la source

c'est juste une boucle for...in . Consultez la documentation chez Mozilla .

37
répondu Matt Ball 2011-11-29 18:33:11
la source

jquery vous permet de le faire maintenant:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});
21
répondu Rob Sedgwick 2016-03-29 18:19:25
la source

si votre environnement supporte ES2017 alors je recommande objet.entrées :

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

comme indiqué dans objet Mozillas.entrées () documentation:

L'Objet .entries () la méthode retourne un tableau du propre objet propriété énumérable [clé, valeur] paires, dans le même ordre que celui fourni par un pour... boucle (la différence étant qu'un pour-en boucle énumère les propriétés dans la chaîne de prototype).

essentiellement avec Objet.entrées nous pouvons renoncer à l'étape supplémentaire suivante qui est nécessaire avec l'ancien pour ... dans boucle:

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}
12
répondu JSON C11 2017-10-08 00:27:09
la source

les réponses ci-dessus sont un peu ennuyeuses parce qu'elles n'expliquent pas ce que vous faites à l'intérieur de la boucle for après vous être assuré que c'est un objet: vous n'y ACCÉDEZ PAS directement! Vous êtes en fait seulement livré 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;
  }
}

c'est tout ECMA5 sans danger. Même fonctionne dans les versions boiteuses JS comme Rhino ;)

12
répondu Dylan Hunt 2018-02-27 19:00:08
la source

Dominik's réponse est parfaite, je préfère juste le faire de cette façon, comme il est plus propre à lire:

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

    // Do stuff...
}
12
répondu Cyril N. 2018-05-24 14:45:44
la source

la boucle for...in représente chaque propriété d'un objet car elle est comme une boucle for. Vous avez défini propt dans le pour ... en boucle en faisant:

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

...en boucle parcourt l'énumération des propriétés d'un objet. Quelle que soit la variable que vous définissez, ou mettez dans la boucle for...in, change chaque fois qu'elle va à la propriété suivante qu'elle itère. La variable dans la...dans la boucle parcourt les touches, mais la valeur est la valeur de la clé. Pour exemple:

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

Vous pouvez voir comment la variable diffère de la valeur de la variable. En revanche, un pour...de boucle fait le contraire.

j'espère que cela aidera.

10
répondu Vappor Washmade 2016-01-24 06:57:10
la source

vous pouvez utiliser Lodash. La documentation

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});
10
répondu viktarpunko 2017-03-01 05:30:01
la source
let obj = {"a": 3, "b": 2, "6": "a"}

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

// a
// 3
// 2
10
répondu Philll_t 2017-05-05 21:30:44
la source

objets en JavaScript sont des collections de propriétés et peuvent donc être mis en boucle en a pour chaque déclaration.

vous devriez penser à obj comme une collection de valeur clé.

8
répondu 2011-11-29 18:39:55
la source

de nos jours, vous pouvez convertir un objet JS standard en un objet itérable simplement en ajoutant un symbole.méthode d'itérateur. Vous pouvez alors utiliser une boucle for of et accéder directement à ses valeurs ou même utiliser un opérateur spread sur l'objet. Cool. Voyons ce que nous pouvons faire:

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);
8
répondu Redu 2016-11-20 06:19:15
la source

votre boucle for est itérative sur toutes les propriétés de l'objet obj . propt est défini dans la première ligne de votre boucle. C'est une chaîne qui est un nom d'une propriété de la obj objet. Dans la première itération de la boucle, propt serait "nom".

6
répondu arb 2011-11-29 18:33:46
la source
Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);
6
répondu Fellow Stranger 2018-04-25 14:02:59
la source

ajoutant également la voie 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]);
                }
            }
        }
    }
}

Utilisation:

iterate({ foo: "foo", bar: { foo: "foo"} }); 
4
répondu Ondrej Svejdar 2016-02-22 11:34:58
la source

Si en cours d'exécution Nœud je vous recommande:

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});
3
répondu Justin 2017-08-11 07:37:07
la source

je veux ajouter aux réponses ci-dessus, parce que vous pourriez avoir des intentions différentes de Javascript. Un objet JSON et un objet Javascript sont des choses différentes, et vous pourriez vouloir itérer à travers 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"
    }
}

Le mauvais chemin à parcourir 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 la connexion de la console 0 , 1 , etc. lors de l'itération à travers les propriétés de prop1 et prop2 et de prop3_1 . Ces objets sont des séquences, et les indices d'une séquence sont des propriétés de l'objet en Javascript.

une meilleure façon d'itérer de façon récursive les propriétés d'un objet JSON serait de vérifier d'abord si cet objet est un 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]);

            }

     }
}
2
répondu Jadiel de Armas 2016-01-28 23:41:10
la source

ici je suis en train d'itérer chaque noeud et de créer des noms de noeuds significatifs. Si vous remarquez, instanceOf Array et instanceOf Object font à peu près la même chose (dans mon application, je donne une logique différente cependant)

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 m'inspire de la réponse d'Ondrej Svejdar. Mais cette solution est plus performante et moins ambiguë

2
répondu Faiz Mohamed Haneef 2016-02-21 19:40:17
la source

vous voulez essentiellement boucle à travers chaque propriété dans 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);
2
répondu HovyTech 2016-06-24 01:24:37
la source

pour ajouter L'utilisation ES2015 de Reflect.ownKeys(obj) et aussi itérer sur les propriétés via un itérateur.

par exemple:

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

peut être itéré par

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

si vous souhaitez itérer directement sur les valeurs des touches d'un objet, vous pouvez définir un iterator , tout comme les itérateurs par défaut de JavaScipts pour les chaînes, tableaux, tableaux dactylographiés, Map et Set.

js will essayez d'itérer via la propriété iterator par défaut, qui doit être définie comme Symbol.iterator .

si vous voulez pouvoir itérer sur tous les objets, vous pouvez l'ajouter comme prototype D'objet:

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

cela vous permettrait d'itérer les valeurs d'un objet avec un for...de boucle, par exemple:

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

Caution : au moment d'écrire cette réponse (juin 2018) Tous les autres navigateurs, mais IE, générateurs de soutien et for...of itération via Symbol.iterator

2
répondu Dimitar Nikovski 2018-06-28 15:49:28
la source

ce que pour..in loop fait est qu'il crée une nouvelle variable (var someVariable) et stocke ensuite chaque propriété de l'objet donné dans cette nouvelle variable(someVariable) un par un. Par conséquent, si vous utilisez block {}, vous pouvez itérer. Considérons l'exemple suivant.

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

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

console.log(someVariable); // outputs planet
1
répondu Raman Sohi 2015-03-29 11:48:07
la source

pour affiner la réponse acceptée, il est intéressant de noter que si vous instanciez l'objet avec un var object = Object.create(null) alors object.hasOwnProperty(property) déclenchera une erreur de type. Donc, pour être sur le côté sûr, vous avez besoin de l'appeler du prototype comme ceci:

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}
1
répondu Konrad Kiss 2017-08-29 10:36:17
la source

Autres questions sur javascript object loops