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

Question

Disons que je crée un objet ainsi :

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

Quelle est la meilleure façon de récupérer une liste de noms de propriétés ? Par exemple, j'aimerais obtenir des variables "clés" telles que.. :

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

Answer 1

Dans les navigateurs modernes (IE9+, FF4+, Chrome5+, Opera12+, Safari5+), vous pouvez utiliser le module intégré Clé d'objet méthode :

var keys = Object.keys(myObject);

Ce qui précède a un polyfill complet mais une version simplifiée est :

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

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

Answer 2

Comme slashnick a souligné, vous pouvez utiliser la construction "for in" pour itérer sur un objet pour ses noms d'attributs. Cependant, vous devrez itérer sur tous les noms d'attributs dans la chaîne de prototypes de l'objet. Si vous voulez itérer seulement sur les attributs propres de l'objet, vous pouvez utiliser la fonction Objet#hasOwnProperty() méthode. Il s'agit donc de ce qui suit.

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

Answer 3

Comme l'a répondu Sam Dutton, une nouvelle méthode à cette fin a été introduite dans la 5e édition d'ECMAScript. Object.keys() fera ce que vous voulez et est soutenu dans Firefox 4 Chrome 6, Safari 5 et IE 9 .

Vous pouvez aussi très facilement mettre en œuvre cette méthode dans les navigateurs qui ne la prennent pas en charge. Cependant, certaines des implémentations existantes ne sont pas entièrement compatibles avec Internet Explorer. Voici une solution plus 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 que la réponse actuellement acceptée n'inclut pas de vérification de la présence de hasOwnProperty() et renverra les propriétés qui sont héritées par la chaîne de prototypes. Elle ne tient pas compte non plus du fameux bogue DontEnum d'Internet Explorer, qui fait que les propriétés non dénombrables de la chaîne de prototypes font que les propriétés déclarées localement et portant le même nom héritent de leur attribut DontEnum.

Mise en œuvre de Objet.keys() vous donnera une solution plus robuste.

EDITAR: suite à une discussion récente avec kangax un contributeur bien connu de Prototype, j'ai mis en œuvre la solution de contournement pour le bogue DontEnum en me basant sur le code de son fichier Object.forIn() fonction trouvée ici .

Answer 4

Notez que Object.keys et les autres méthodes ECMAScript 5 sont prises en charge par Firefox 4, Chrome 6, Safari 5, IE 9 et plus.

Par exemple :

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

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

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

Answer 5

Je suis un grand fan de la fonction de vidage.

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