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


Dis je crée un objet ainsi:

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

Quel est le meilleur moyen de récupérer une liste des noms de propriétés? c'est-à-dire que je voudrais me retrouver avec des «clés» variables telles que:

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

718
2017-10-16 10:08


origine


Réponses:


Dans les navigateurs modernes (IE9 +, FF4 +, Chrome5 +, Opera12 +, Safari5 +), vous pouvez utiliser l'intégré Object.keys 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;
}

Alternativement 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 recommanderais pas de le faire.


909
2017-10-16 10:12



Comme Slashnick souligné, vous pouvez utiliser la construction "for in" pour itérer sur un objet pour ses noms d'attributs. Cependant, vous itérez tous les noms d'attributs dans la chaîne prototype de l'objet. Si vous voulez itérer seulement sur les propres attributs de l'objet, vous pouvez utiliser le Objet # hasOwnProperty () méthode. Ayant ainsi ce qui suit.

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

236
2017-10-16 13:00



Comme l'a répondu Sam Dutton, une nouvelle méthode a été introduite dans ECMAScript 5th Edition. Object.keys() fera ce que vous voulez et est pris en charge dans Firefox 4, Chrome 6, Safari 5 et IE 9.

Vous pouvez également implémenter très facilement la méthode dans les navigateurs qui ne la prennent pas en charge. Cependant, certaines implémentations ne sont pas entièrement compatibles avec Internet Explorer. J'ai détaillé ceci sur mon blog et produit 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 pour hasOwnProperty () et retournera les propriétés qui sont héritées à travers la chaîne du prototype. Il ne tient pas non plus compte du fameux bogue DontEnum dans Internet Explorer où des propriétés non énumérables sur la chaîne du prototype provoquent l'héritage de leur attribut DontEnum par des propriétés déclarées localement avec le même nom.

Exécution Object.keys () vous donnera une solution plus robuste.

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


97
2017-10-14 20:35



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 supérieur.

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/


28
2017-09-29 12:34



Object.getOwnPropertyNames(obj)

Cette fonction montre également des propriétés non énumérables en plus de celles montrées par Object.keys(obj).

Dans JS, chaque propriété a quelques propriétés, y compris un booléen enumerable.

En général, les propriétés non énumérables sont plus «internes» et moins souvent utilisées, mais il est utile de les examiner parfois pour voir ce qui se passe réellement.

Exemple:

var o = Object.create({base:0})
Object.defineProperty(o, 'yes', {enumerable: true})
Object.defineProperty(o, 'not', {enumerable: false})

console.log(Object.getOwnPropertyNames(o))
// [ 'yes', 'not' ]

console.log(Object.keys(o))
// [ 'yes' ]

for (var x in o)
    console.log(x)
// yes, base

Notez également comment:

  • Object.getOwnPropertyNameset Object.keys  ne pas remonter la chaîne du prototype pour trouver base
  • for in Est-ce que

Plus d'informations sur la chaîne de prototypes ici: https://stackoverflow.com/a/23877420/895245


17
2017-09-05 12:37



Je suis un grand fan de la fonction de vidage.

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


16
2018-01-13 16:56



Pourrait le faire avec jQuery comme suit:

var objectKeys = $.map(object, function(value, key) {
  return key;
});

14
2017-12-13 23:26



Si vous essayez d'obtenir les éléments seulement, mais pas les fonctions, alors ce code peut vous aider

this.getKeys = function() {

    var keys = new Array();
    for(var key in this) {

        if( typeof this[key] !== 'function') {

            keys.push(key);
        }
    }
    return keys;
}

ceci fait partie de mon implémentation de HashMap et je ne veux que les clés, "this" est l'objet hashmap qui contient les clés


9
2018-03-01 09:21