La méthode Object.keys()
renvoie un tableau contenant les noms des propriétés propres à un objet (qui ne sont pas héritées via la chaîne de prototypes) et qui sont énumérables. L'ordre de ce tableau est le même que celui obtenu par une boucle for...in
(à la différence qu'une boucle for-in liste également les propriétés héritées).
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
Object.keys(obj)
Paramètres
obj
- L'objet dont on souhaite lister les propriétés propres et énumérables.
Valeur de retour
Un tableau de chaînes de caractères qui sont les noms des propriétés énumérables de l'objet passé en argument.
Description
Object.keys()
renvoie un tableau dont les éléments sont les chaînes de caractères des noms des propriétés propres et énumérables d'obj
. L'ordre des propriétés obtenu est le même que celui obtenu lorsqu'on boucle manuellement sur les propriétés de l'objet.
Exemples
var arr = ["a", "b", "c"]; console.log(Object.keys(arr)); // affichera ['0', '1', '2'] // un objet semblable à un tableau var obj = { 0 : "a", 1 : "b", 2 : "c"}; console.log(Object.keys(obj)); // affichera ['0', '1', '2'] // un objet semblable à un tableau avec // un ordre de clé aléatoire var an_obj = { 100: "a", 2: "b", 7: "c"}; console.log(Object.keys(an_obj)); // affichera ['2', '7', '100'] // getToto est une propriété non énumérable var monObjet = Object.create({}, { getToto : { value : function () { return this.toto } } }); monObjet.toto = 1; console.log(Object.keys(monObjet)); // affichera ['toto']
Si on souhaite lister toutes les propriétés, y compris celles qui ne sont pas énumérables, on pourra utiliser Object.getOwnPropertyNames()
.
Notes
Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception TypeError
. Pour ES2015 (ES6), un argument qui n'est pas un objet sera d'abord converti en objet.
Object.keys("toto"); // TypeError: "toto" n'est pas un objet (code ES5) Object.keys("toto"); // ["0", "1", "2", "3"] (code ES2015)
Prothèse d'émulation (polyfill)
Afin d'ajouter Object.keys
aux environnements moins récents qui ne supporteraient pas la méthode de façon native, on peut utiliser le fragment de code suivant :
if (!Object.keys) { Object.keys = (function() { 'use strict'; var hasOwnProperty = Object.prototype.hasOwnProperty, hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'), dontEnums = [ 'toString', 'toLocaleString', 'valueOf', 'hasOwnProperty', 'isPrototypeOf', 'propertyIsEnumerable', 'constructor' ], dontEnumsLength = dontEnums.length; return function(obj) { if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) { throw new TypeError('Object.keys called on non-object'); } var result = [], prop, i; for (prop in obj) { if (hasOwnProperty.call(obj, prop)) { result.push(prop); } } if (hasDontEnumBug) { for (i = 0; i < dontEnumsLength; i++) { if (hasOwnProperty.call(obj, dontEnums[i])) { result.push(dontEnums[i]); } } } return result; }; }()); }
On notera que le code ci-dessus comporte les clés non énumérables pour IE7 (et éventuellement IE8), quand l'objet est passé à une fenêtre différente.
Pour d'autres exemples d'émulation (polyfill), voir l'article Javascript - Object.keys Browser Compatibility (en anglais).
Spécifications
Spécification | État | Commentaires |
---|---|---|
ECMAScript 5.1 (ECMA-262) La définition de 'Object.keys' dans cette spécification. |
Standard | Définition initiale. Implémentée avec JavaScript 1.8.5 |
ECMAScript 2015 (6th Edition, ECMA-262) La définition de 'Object.keys' dans cette spécification. |
Standard | |
ECMAScript Latest Draft (ECMA-262) La définition de 'Object.keys' dans cette spécification. |
Projet |
Compatibilité des navigateurs
Ordinateur | Mobile | Serveur | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Support complet 5 | Edge Support complet Oui | Firefox Support complet 4 | IE Support complet 9 | Opera Support complet 12 | Safari Support complet 5 | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet 4 | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android Support complet Oui | nodejs Support complet Oui |
Légende
- Support complet
- Support complet