Comment parcourir un objet en JavaScript : 5 méthodes avec exemples

Comment parcourir un objet en JavaScript : du débutant au pro

Tout développeur se retrouve tôt ou tard confronté à la question : « Comment parcourir toutes les propriétés d'un objet ? ». Cette question est si populaire qu'elle a recueilli des milliers de vues et des centaines de réponses sur Stack Overflow. Et ce n'est pas surprenant : les objets en JavaScript sont la base de tout, des configurations aux données provenant du serveur.

Dans ce tutoriel, nous allons passer en revue toutes les principales méthodes pour parcourir un objet en JavaScript, des classiques aux méthodes modernes. Vous apprendrez quand utiliser for...in, en quoi Object.keys est meilleur, et comment Object.entries simplifie la vie. C'est parti !

Préparation : créons un objet de test

Pour que les exemples soient clairs, prenons un objet utilisateur simple :

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moscou',\n  isAdmin: false\n};

Notre objectif est d'afficher toutes les clés et valeurs. Voyons quels outils sont disponibles dans l'arsenal de JavaScript.

1. La boucle for...in — un grand classique

La méthode la plus ancienne et la plus basique pour parcourir les propriétés d'un objet. Elle existe depuis ES3 et fonctionne dans tous les navigateurs.

for (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// name: Anna\n// age: 28\n// city: Moscou\n// isAdmin: false

Nuance importante : for...in parcourt non seulement les propriétés propres, mais aussi celles héritées via le prototype. Pour les filtrer, utilisez hasOwnProperty :

for (let key in user) {\n  if (user.hasOwnProperty(key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

Les objets modernes ont rarement des propriétés prototypiques superflues, mais prendre l'habitude de vérifier hasOwnProperty vous évitera des bugs lors du travail avec des bibliothèques.

2. Object.keys() — une approche moderne

La méthode Object.keys() retourne un tableau des clés propres d'un objet. Cela élimine les problèmes liés aux prototypes et donne accès à toutes les méthodes des tableaux.

const keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city', 'isAdmin']\n\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

Avantages :

\n
• Fonctionne uniquement avec les propriétés propres (non héritées)
\n
• Retourne un tableau — on peut utiliser forEach, map, filter
\n
• Code lisible et prévisible
\n

C'est ma méthode préférée quand j'ai simplement besoin d'obtenir une liste de clés et de travailler avec.

3. Object.values() — quand seules les valeurs comptent

Parfois, seules les valeurs des propriétés nous intéressent, sans les clés. Par exemple, pour faire des sommes ou afficher des données.

const values = Object.values(user);\nconsole.log(values); // ['Anna', 28, 'Moscou', false]\n\nvalues.forEach(value => {\n  console.log(value);\n});

Cette méthode est apparue avec ES2017 et est parfaite pour travailler avec des collections de données où les clés n'ont pas d'importance.

4. Object.entries() — le roi des méthodes

Object.entries() retourne un tableau de tableaux, où chaque tableau imbriqué est une paire [clé, valeur]. C'est un outil universel pour parcourir un objet en JavaScript.

const entries = Object.entries(user);\nconsole.log(entries);\n// [\n//   ['name', 'Anna'],\n//   ['age', 28],\n//   ['city', 'Moscou'],\n//   ['isAdmin', false]\n// ]\n\nentries.forEach(([key, value]) => {\n  console.log(`${key}: ${value}`);\n});

Remarquez la déstructuration dans les paramètres de forEach : ([key, value]). Cela rend le code propre et concis.

Quand l'utiliser :

\n
• Vous avez besoin à la fois des clés et des valeurs
\n
• Vous voulez transformer un objet en une autre structure (par exemple, en Map)
\n
• Vous écrivez une fonctio