Boucle grâce à l'objet JavaScript

Question

J'ai un objet JavaScript comme suit

 var p =
    {
        "p1": "value1",
        "p2": "value2",
        "p3": "value3"
    };

Maintenant, je veux faire une boucle par tous p éléments (p1,p2,p3...) et d'obtenir leurs clés et les valeurs. Comment puis-je le faire? Je peux modifier l'objet JavaScript si nécessaire . Mon but ultime est de faire une boucle par certaines paires clé-valeur. Et si possible je veux éviter d'utiliser des eval.

Answer 1

Vous pouvez utiliser le pour-dans la boucle comme indiqué par d'autres. Cependant, vous voulez également vous assurer que la clé que vous obtenez est une propriété d'un objet, et ne provient pas du prototype:

for (var key in p) {
  if (p.hasOwnProperty(key)) {
    alert(key + " -> " + p[key]);
  }
}

Answer 2

En vertu de l'ECMAScript 5, vous pouvez combiner Object.keys() et Array.prototype.forEach():

 var obj = { first: "John", la dernière: "Doe" };
 // Visite non héréditaire énumérable clés
 Objet.les touches(obj).forEach(function(key) {
console.log(clé);
});

Answer 3

Vous devez utiliser le pour-en boucle

Mais soyez très prudent lors de l'utilisation de ce genre de boucle, parce que cela va en boucle toutes les propriétés le long de la chaîne de prototype.

Par conséquent, lors de l'utilisation de pour-dans les boucles, toujours faire usage de l' hasOwnProperty méthode pour déterminer si la propriété dans l'itération est vraiment une propriété de l'objet de la vérification sur:

for (prop in p) {
    if (!p.hasOwnProperty(prop)) {
        //The current property is not a direct property of p
        continue;
    }
    //Do your logic with the property here
}

Answer 4

Si vous travaillez avec jQuery, vous pouvez utiliser jQuery.each() méthode. Il peut être utilisé de façon transparente itérer sur les deux objets et les tableaux:

$.each(obj, function(key, value) {
    console.log(key, value);
});

Answer 5

Dans ECMAScript 5 vous avez une nouvelle approche dans l'itération champs de littéral - Object.keys

Plus d'informations vous pouvez le voir sur MDN

Mon choix est ci-dessous comme une solution plus rapide dans les versions actuelles des navigateurs (Chrome30, IE10, FF25)

var keys = Object.keys(p),
    len = keys.length,
    i = 0,
    prop,
    value;
while (i < len) {
    prop = keys[i];
    value = p[prop];
    i += 1;
}

Vous pouvez comparer la performance de cette approche avec les différentes implémentations sur jsperf.com:

• Étendre Les Implémentations
• Clés de l'objet itération
• objet littéral itération

Prise en charge du navigateur vous pouvez le voir sur Kangax est compat table

Pour les vieux navigateurs simple et complet polyfill