Comment parcourir les clés et les valeurs d’un objet en JavaScript

Parfois, vous devrez parcourir un objet en JavaScript pour récupérer plusieurs paires clé-valeur. Dans cet article, nous examinerons quatre façons différentes de boucler les propriétés des objets en JavaScript.

Avant ES6, le seul moyen de parcourir un objet était le for…in boucle. La méthode Object.keys() a été introduite dans ES6 pour faciliter l’itération des objets. Plus tard dans ES8, deux nouvelles méthodes ont été ajoutées, Object.entries() et Object.values(). Les méthodes les plus récentes convertissent l’objet en un tableau, puis utilisent des méthodes de boucle de tableau pour parcourir ce tableau.

Commençons par la première méthode!

for…in Loop

Le moyen le plus simple et le plus simple d’itérer sur les propriétés de l’objet consiste à utiliser l’instruction for...in. Cette méthode fonctionne dans tous les navigateurs modernes et anciens, y compris Internet Explorer 6 et versions ultérieures.

Voici un exemple qui utilise la boucle for...in pour itérer sur un objet:

const user = { name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true};// iterate over the user objectfor (const key in user) { console.log(`${key}: ${user}`);}// name: John Doe// email: [email protected]// age: 25// dob: 08/02/1989// active: true

Le problème avec la boucle for...in est qu’elle parcourt également les propriétés de la chaîne de prototypes. Étant donné que les objets en JavaScript peuvent hériter des propriétés de leurs prototypes, l’instruction fo...in parcourra également ces propriétés.

Pour éviter d’itérer sur les propriétés du prototype lors de la boucle d’un objet, vous devez vérifier explicitement si la propriété appartient à l’objet en utilisant la méthode hasOwnProperty():

for (const key in user) { if (user.hasOwnProperty(key)) { console.log(`${key}: ${user}`); }}

Heureusement, nous n’avons plus besoin de compter sur la méthode for...in et hasOwnProperty() pour parcourir un objet. Il existe de meilleurs moyens disponibles.

Objet.la méthode keys()

La méthode Object.keys() a été introduite dans ES6. Il prend l’objet que vous souhaitez itérer en argument et renvoie un tableau contenant tous les noms de propriétés (ou clés).

Vous pouvez ensuite utiliser n’importe quelle méthode de boucle de tableau, telle que forEach(), pour parcourir le tableau et récupérer la valeur de chaque propriété.

Voici un exemple:

const courses = { java: 10, javascript: 55, nodejs: 5, php: 15};// convert object to key's arrayconst keys = Object.keys(courses);// print all keysconsole.log(keys);// // iterate over objectkeys.forEach((key, index) => { console.log(`${key}: ${courses}`);});// java: 10// javascript: 55// nodejs: 5// php: 15

Dans la déclaration de fonction ci-dessus, j’ai utilisé la syntaxe ES6. Je suppose que vous êtes déjà familier avec ES6, en particulier les fonctions de flèche. Si vous êtes nouveau sur ES6, jetez un œil au guide des fonctions de flèche pour en savoir plus.

Objet.values() Méthode

L’Objet.la méthode values() a été introduite dans ES8 et fait le contraire de Object.key(). Il renvoie les valeurs de toutes les propriétés de l’objet sous forme de tableau. Vous pouvez ensuite parcourir le tableau de valeurs en utilisant l’une des méthodes de boucle de tableau.

Regardons un exemple:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘

Objet.méthode d’entrées()

L’Objet.entries() est une autre méthode qui a été introduite dans ES8 et peut être utilisée pour traverser un objet. Contrairement à Object.values() qui crée un tableau des valeurs de l’objet, Object.entries() produit un tableau de tableaux. Chaque tableau interne a deux éléments. Le premier élément est la propriété ; le deuxième élément est la valeur.

Voici un exemple:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]

Pour parcourir le tableau renvoyé par Object.entries(), vous pouvez utiliser le for…de boucle ou de la méthode forEach() comme indiqué ci-dessous:

// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});

Conclusion

C’est tout pour itérer sur les propriétés de l’objet en JavaScript. Nous avons examiné quatre méthodes différentes pour accomplir cette tâche. for...in est toujours une bonne option si vous souhaitez prendre en charge les anciens navigateurs. Sinon, utilisez simplement l’une des méthodes les plus récentes : Object.keys()Object.values() ou Object.entries().

️️ Vous aimez cet article ? Suivez @attacomsian sur Twitter. Vous pouvez également me suivre sur LinkedIn et DEV. Abonnez-vous au flux RSS.

If Si vous aimez lire mes articles et que vous souhaitez me soutenir pour continuer à créer des tutoriels gratuits, Buy Achetez-moi un café (coût 5 $).