896 votes

Comment lister les propriétés d'un objet JavaScript

Dire que j'ai créer un objet ainsi:

var myJSONObject =
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

Quelle est la meilleure façon de récupérer une liste des noms de propriété? c'est à dire que je voudrais terminer avec quelques variables clés " tels que:

keys == ["ircEvent", "method", "regex"]

Merci.

1136voto

slashnick Points 9773

Dans les navigateurs modernes (IE9+, FF4+, Chrome5+, Opera12+, Safari5+), vous pouvez utiliser le construit en Objet.les clés de la méthode:

var keys = Object.keys(myJsonObject);

Le ci-dessus a plein polyfill mais une version simplifiée est:

var getKeys = function(obj){
   var keys = [];
   for(var key in obj){
      keys.push(key);
   }
   return keys;
}

Également remplacer var getKeys avec Object.prototype.keys pour vous permettre d'appeler .keys() sur n'importe quel objet. L'élargissement du prototype a des effets secondaires et je ne recommanderais pas le faire.

263voto

Pablo Cabrera Points 3245

Comme slashnick souligné, vous pouvez utiliser le bouton "pour" construire pour itérer sur un objet pour les noms d'attribut. Cependant, vous serez itération sur tous les noms d'attribut de l'objet prototype de la chaîne. Si vous souhaitez effectuer une itération seulement sur l'objet propre d'attributs, vous pouvez faire usage de l' Objet#hasOwnProperty() méthode. Donc les suivantes.

for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        /* useful code here */
    }
}

103voto

Andy E Points 132925

Comme Sam Dutton a répondu, d'une nouvelle méthode dans ce but a été introduit dans ECMAScript 5ème Édition. Object.keys() à faire ce que vous voulez et est pris en charge dans Firefox 4, Chrome 6, Safari 5 et IE 9.

Vous pouvez aussi très facilement de mettre en œuvre la méthode dans les navigateurs qui ne prennent pas en charge. Cependant, certaines implémentations de là-bas ne sont pas entièrement compatibles avec Internet Explorer. J'ai détaillé sur mon blog et produit un plus une solution compatible:

Object.keys = Object.keys || (function () {
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        hasDontEnumBug = !{toString:null}.propertyIsEnumerable("toString"),
        DontEnums = [ 
            'toString', 'toLocaleString', 'valueOf', 'hasOwnProperty',
            'isPrototypeOf', 'propertyIsEnumerable', 'constructor'
        ],
        DontEnumsLength = DontEnums.length;

    return function (o) {
        if (typeof o != "object" && typeof o != "function" || o === null)
            throw new TypeError("Object.keys called on a non-object");

        var result = [];
        for (var name in o) {
            if (hasOwnProperty.call(o, name))
                result.push(name);
        }

        if (hasDontEnumBug) {
            for (var i = 0; i < DontEnumsLength; i++) {
                if (hasOwnProperty.call(o, DontEnums[i]))
                    result.push(DontEnums[i]);
            }   
        }

        return result;
    };
})();

Notez qu'actuellement accepté de répondre à ne pas inclure un chèque pour hasOwnProperty() et sera de retour les propriétés sont héritées par le biais de la chaîne de prototype. Il également ne tiennent pas compte de la célèbre DontEnum bug dans Internet Explorer où non énumérable propriétés sur la chaîne de prototype cause déclarés localement les propriétés avec le même nom d'hériter de leur DontEnum attribut.

La Mise En Œuvre De L'Objet.les touches() va vous donner une solution plus robuste.

EDIT: suite à une récente discussion avec kangax, un contributeur connu Prototype, j'ai mis en place la solution de contournement pour le DontEnum bug basé sur le code pour son Object.forIn() fonction trouvée ici.

36voto

Sam Dutton Points 4638

Notez que l'Objet.les clés et les autres ECMAScript 5 méthodes sont pris en charge par Firefox 4, Chrome 6, Safari 5, IE 9 et au-dessus.

Par exemple:

var o = {"foo": 1, "bar": 2}; 
alert(Object.keys(o));

ECMAScript 5 tableau de compatibilité: http://kangax.github.com/es5-compat-table/

Description de nouvelles méthodes: http://markcaudill.com/index.php/2009/04/javascript-new-features-ecma5/

17voto

Matt Points 3858

Je suis un grand fan de la fonction de vidage.

http://ajaxian.com/archives/javascript-variable-dump-in-coldfusion alt text

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X