Parcourir un objet : for…in, Object.keys, Object.values et Object.entries

Chapitre 9 — Les objets littéraux, JSON et les collections · Parcourir un objet : for…in, Object.keys, Object.values et Object.entries

1. Trois tableaux à partir d'un objet

Figure 1 — Les trois méthodes renvoient des tableaux, que l'on peut parcourir et transformer.

const produit = { nom: "Clavier", prix: 249, stock: 12, categorie: "Informatique" };

// 1. for...in : parcourt les clés
for (const cle in produit) {
  console.log(`for...in → ${cle} = ${produit[cle]}`);
}

// 2. Object.keys, Object.values, Object.entries : des tableaux
console.log("keys    :", Object.keys(produit));
console.log("values  :", Object.values(produit));
console.log("entries :", Object.entries(produit));

// 3. for...of sur entries avec déstructuration
for (const [cle, valeur] of Object.entries(produit)) {
  console.log(`${cle.padEnd(10)} ${valeur}`);
}

// 4. Profiter des méthodes des tableaux
const panier = { clavier: 249, souris: 89, ecran: 1490, tapis: 35 };
const total = Object.values(panier).reduce((s, p) => s + p, 0);
const chers = Object.entries(panier).filter(([, prix]) => prix > 100).map(([article]) => article);
console.log("Total :", total, "DH | Articles > 100 DH :", chers.join(", "));

// 5. Transformer un objet : entries → map → fromEntries
const panierTTC = Object.fromEntries(Object.entries(panier).map(([a, p]) => [a, Math.round(p * 1.2)]));
console.log("TTC :", panierTTC);

// 6. Trier les entrées d'un objet
const classement = Object.entries(panier).sort(([, a], [, b]) => b - a);
console.log("Du plus cher au moins cher :", classement.map(([a, p]) => `${a} (${p})`).join(" > "));

// 7. for...in voit aussi les propriétés héritées ; Object.keys seulement les propres
const base = { couleur: "noir" };
const modele = Object.create(base);
modele.taille = "M";
const vuesParForIn = [];
for (const c in modele) vuesParForIn.push(c);
console.log("for...in :", vuesParForIn, "| Object.keys :", Object.keys(modele));

Résultat dans la console

for...in → nom = Clavier
for...in → prix = 249
for...in → stock = 12
for...in → categorie = Informatique
keys    : [ 'nom', 'prix', 'stock', 'categorie' ]
values  : [ 'Clavier', 249, 12, 'Informatique' ]
entries : [
  [ 'nom', 'Clavier' ],
  [ 'prix', 249 ],
  [ 'stock', 12 ],
  [ 'categorie', 'Informatique' ]
]
nom        Clavier
prix       249
stock      12
categorie  Informatique
Total : 1863 DH | Articles > 100 DH : clavier, ecran
TTC : { clavier: 299, souris: 107, ecran: 1788, tapis: 42 }
Du plus cher au moins cher : ecran (1490) > clavier (249) > souris (89) > tapis (35)
for...in : [ 'taille', 'couleur' ] | Object.keys : [ 'taille' ]

2. Quelle méthode choisir ?

• for (const cle in objet): la boucle historique, qui donne les clés une à une. Elle parcourt aussi les propriétés héritées (dernier exemple), ce qui peut surprendre.
• Object.keys(o), Object.values(o), Object.entries(o): seulement les propriétés propres de l'objet, sous forme de tableau. On peut alors utiliser for…of, map, filter, reduce, sort… C'est la méthode recommandée.
• for (const [cle, valeur] of Object.entries(o)): la déstructuration donne la clé et la valeur dans deux variables (leçon 9.4).
• Object.fromEntries(paires) fait l'inverse de entries: on transforme les paires, puis on reconstruit un objet.

N'utilisez pas for…in sur un tableau : préférez for…of (leçon 8.3).

← Le tableau associatif en JavaScriptLa déstructuration et l'opérateur spread sur les objets →