Chacun pour un objet ?

Question

J'ai un objet en JavaScript :

var object = someobject;

Object { aaa=true, bbb=true, ccc=true }

Comment puis-je utiliser chacun d'eux pour cela ?

 object.each(function(index, value)) {
      console.log(value);
 }

Ne fonctionne pas.

Answer 1

Un objet javascript ne dispose pas d'une fonction standard .each. jQuery fournit une fonction. Voir http://api.jquery.com/jQuery.each/ Le texte ci-dessous devrait fonctionner

$.each(object, function(index, value) {
    console.log(value);
}); 

Une autre option serait d'utiliser vanilla Javascript en utilisant la fonction Object.keys() et le tableau .map() fonctionne comme suit

Object.keys(object).map(function(objectKey, index) {
    var value = object[objectKey];
    console.log(value);
});

Voir https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Object/keys y https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Il est généralement préférable d'utiliser une boucle for Javascript classique, à moins que vous ne compreniez vraiment les implications de l'utilisation d'une boucle for normale et que vous ne voyiez l'utilité de ses caractéristiques spécifiques, comme le fait de boucler sur la chaîne de propriétés.

Mais généralement, une boucle for ne fonctionne pas mieux que jQuery o Object.keys().map() . Je vais aborder ci-dessous deux problèmes potentiels liés à l'utilisation d'une simple boucle for.

---

C'est vrai, comme cela a été souligné dans d'autres réponses, une alternative en Javascript simple serait

for(var index in object) { 
    var attr = object[index]; 
}

Il y a deux problèmes potentiels avec cela :

1 . Vous voulez vérifier si l'attribut que vous trouvez provient de l'objet lui-même et non d'une chaîne de prototypes supérieure. Cela peut être vérifié avec la fonction hasOwnProperty comme suit

for(var index in object) { 
   if (object.hasOwnProperty(index)) {
       var attr = object[index];
   }
}

Voir https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty pour plus d'informations.

El jQuery.each y Object.keys s'en occupent automatiquement.

2 . Un autre problème potentiel avec une simple boucle for est celui de la portée et des non-clôtures. C'est un peu compliqué, mais prenez par exemple le code suivant. Nous avons une série de boutons avec les identifiants button0, button1, button2 etc, et nous voulons définir un onclick sur eux et faire un console.log comme ça :

<button id='button0'>click</button>
<button id='button1'>click</button>
<button id='button2'>click</button>

var messagesByButtonId = {"button0" : "clicked first!", "button1" : "clicked middle!", "button2" : "clicked last!"];
for(var buttonId in messagesByButtonId ) { 
   if (messagesByButtonId.hasOwnProperty(buttonId)) {
       $('#'+buttonId).click(function() {
           var message = messagesByButtonId[buttonId];
           console.log(message);
       });
   }
}

Si, après un certain temps, nous cliquons sur l'un des boutons, nous obtiendrons toujours "clicked last !" dans la console, et jamais "clicked first !" ou "clicked middle !". Pourquoi ? Parce qu'au moment où la fonction onclick est exécutée, elle affichera messagesByButtonId[buttonId] en utilisant le buttonId variable à ce moment-là . Et comme la boucle s'est terminée à ce moment-là, le fichier buttonId sera toujours "button2" (la valeur qu'elle avait lors de la dernière itération de la boucle), et donc messagesByButtonId[buttonId] sera messagesByButtonId["button2"] c'est-à-dire "cliqué en dernier !".

Voir https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures pour plus d'informations sur les fermetures. En particulier la dernière partie de cette page qui couvre notre exemple.

Encore une fois, jQuery.each y Object.keys().map() résout automatiquement ce problème pour nous, car il nous fournit une function(index, value) (qui a une fermeture), nous pouvons donc utiliser l'indice et la valeur et être sûrs qu'ils ont la valeur que nous attendons.

Answer 2

for(var key in object) {
   console.log(object[key]);
}

Answer 3

var object = { "a": 1, "b": 2};
$.each(object, function(key, value){
  console.log(key + ": " + object[key]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

//output
a: 1
b: 2