JavaScript Object.keys, values, entries

Itérer sur les objets en JavaScript

Les objets simples sont la structure privilégiée de JavaScript pour les données clé-valeur, mais contrairement aux arrays, les objets ne sont pas directement itérables — impossible de les parcourir avec for...of ou de les passer directement à des méthodes d'array comme map et filter. Pour combler cet écart, JavaScript fournit trois méthodes complémentaires qui convertissent les propriétés propres d'un object en un array classique :

Object.keys(obj) — un array des noms de propriétés.
Object.values(obj) — un array des valeurs de propriétés.
Object.entries(obj) — un array de paires [key, value].

Une fois la liste des propriétés convertie en array, tous les outils d'array deviennent disponibles. Une quatrième méthode, Object.fromEntries, effectue l'opération inverse en reconstruisant un object à partir d'une liste de paires. Cette page couvre chaque méthode, la façon d'itérer proprement avec for...of et la déstructuration, les règles qui déterminent l'ordre des propriétés, et la différence entre ces méthodes et leurs équivalents sur un Map.

Ces trois méthodes retournent uniquement les propriétés propres (non héritées) et énumérables à clé string de l'object. Elles ignorent les propriétés héritées du prototype et les clés Symbol.

Comprendre Object.keys

Object.keys(obj) retourne un array des noms de propriétés énumérables propres d'un object donné. C'est utile lorsque vous avez besoin de compter les propriétés, de vérifier qu'une clé existe, ou de parcourir les clés.

Exemple d'utilisation de Object.keys

javascript— editable

Explorer Object.values

Object.values(obj) retourne un array des valeurs de propriétés énumérables propres d'un object donné, dans le même ordre que les clés retournées par Object.keys.

Exemple d'utilisation de Object.values

javascript— editable

Exploiter Object.entries

Object.entries(obj) retourne un array des paires [key, value] à clé string énumérables propres d'un object donné. C'est la plus flexible des trois méthodes, car chaque élément contient les deux informations.

Exemple d'utilisation de Object.entries

javascript— editable

Itérer avec for...of et la déstructuration

Puisque Object.entries retourne un array, vous pouvez le parcourir avec for...of et décompresser chaque paire grâce à la déstructuration. C'est la façon la plus claire et la plus lisible de parcourir les propriétés d'un object :

javascript— editable

Vous pouvez également itérer uniquement sur les clés ou sur les valeurs :

javascript— editable

Astuce : for...of sur Object.entries est préférable à une simple boucle for...in, car for...in parcourt également les propriétés énumérables héritées de la chaîne de prototypes, ce que Object.entries ne fait pas.

Transformer des objets avec Object.fromEntries

Object.fromEntries inverse Object.entries : il prend une liste de paires [key, value] et construit un object. Ensemble, ils forment un aller-retour — convertir un object en paires, transformer les paires avec des méthodes d'array, puis les reconvertir en object.

Exemple : conversion aller-retour

javascript— editable

Object.fromEntries accepte également tout itérable de paires — y compris un Map — ce qui en fait un moyen rapide de convertir un Map en object simple. Consultez Map et Set pour en savoir plus sur les maps. Cette méthode permet une conversion transparente entre les structures d'array et d'object, facilitant une manipulation des données plus flexible.

Règles d'ordre des propriétés

L'ordre des clés retournées par ces méthodes n'est pas arbitraire — JavaScript suit une règle définie :

Les clés de type entier (clés qui ressemblent à des entiers non négatifs, par exemple "1", "42") viennent en premier, triées par ordre numérique croissant.
Les clés string suivent, dans l'ordre où elles ont été insérées.
Les clés Symbol viennent en dernier (mais rappelons que ces méthodes ignorent de toute façon les symboles).

Ce comportement « les clés entières sont triées » surprend de nombreux développeurs :

javascript— editable

Si vous devez préserver l'ordre d'insertion pour des clés numériques, rendez les clés non entières — par exemple en les préfixant d'un + pour qu'elles ne soient plus de type entier :

javascript— editable

Différences avec les méthodes de Map

Un Map possède également les méthodes keys(), values() et entries(), mais elles se comportent différemment des versions statiques Object.* sur deux points importants :

Syntaxe : les méthodes de Map sont appelées sur l'instance — map.keys() — tandis que les méthodes d'object sont statiques et prennent l'object en argument — Object.keys(obj).
Type de retour : les méthodes de Map retournent un itérateur (on peut le parcourir avec for...of, mais ce n'est pas un array). Les méthodes Object.* retournent toujours un vrai array, ce qui permet d'utiliser immédiatement les méthodes d'array comme map, filter et reduce.

javascript— editable

Un Map préserve également l'ordre d'insertion pour toutes les clés (y compris les clés numériques) et accepte des clés de tout type, tandis que les objets simples convertissent les clés en strings et trient les clés de type entier. Lorsque l'ordre d'itération ou les clés non-string sont importants, préférez un Map.

Techniques avancées de manipulation d'objets

Filtrer les propriétés d'un object

La combinaison des méthodes d'array avec Object.entries et Object.fromEntries permet des transformations puissantes — comme ne conserver que les propriétés qui passent un test.

Exemple de filtrage

javascript— editable

Transformer les propriétés d'un object

De même, Object.entries combiné avec map permet de transformer chaque valeur (ou clé) et de reconstruire l'object.

Exemple de transformation

javascript— editable

Conclusion

Object.keys, Object.values et Object.entries constituent le pont entre les objets simples et le riche ensemble d'outils d'array en JavaScript, tandis que Object.fromEntries boucle la boucle en reconvertissant les paires en objets. Combinés avec for...of et la déstructuration, ils rendent l'itération, le filtrage et la transformation des données d'un object clairs et lisibles. Gardez à l'esprit les règles d'ordre des propriétés, et optez pour un Map lorsque vous avez besoin d'un ordre d'insertion garanti ou de clés non-string.

Pratique

Que fait la méthode Object.keys(obj) en JavaScript ?

Elle retourne un array des noms de propriétés de l'object.Elle modifie directement l'object original.Elle supprime les objets dans un array.Elle calcule la longueur d'un object.Elle fournit un moyen d'obtenir un array de clés.