Comment parcourir un objet en Javascript

Dans ce tutoriel nous allons découvrir comment parcourir un objet en Javascript. Object est l’élément de base du javascript et presque tout ce qu’il contient est objet. Si nous voulons parcourir les objets en javascript, nous pouvons utiliser la boucle for…in.
 
 

En utilisant la boucle for…in

let obj = {
   e1: 10,
   e2: 'Lorem Ipsum',
   e3: function () {
	console.log('Lorem Ipsum!');
   }
};

for(let i in obj){
   console.log(obj[i]);
}

La sortie :

10
Lorem Ipsum
ƒ () {
	console.log('Lorem Ipsum!');
   }

Le seul problème avec la boucle for…in est l’ordre dans lequel la clé n’est pas décidée, elle extraira également les clés de la hiérarchie des propriétés. Pour éviter cela, nous pouvons utiliser la méthode hasOwnProperty().

for (var property in object) {
  if (object.hasOwnProperty(property)) {
    // Mettez votre code ici
  }
}

 

Meilleure façon de parcourir des objets

La meilleure façon de parcourir des objets est d’abord de convertir l’objet en tableau. Ensuite, vous parcourez le tableau.

Vous pouvez convertir un objet en tableau avec les méthodes suivantes:

• Object.keys
• Object.values
• Object.entries

 
 

Object.keys

La méthode Object.keys crée un tableau contenant les clés d’un objet.

const languages = {
  JavaScript: 50,
  Python: 45,
  Java: 30,
  PHP: 10,
}

const keys = Object.keys(languages)
console.log(keys)

La sortie :

["JavaScript", "Python", "Java", "PHP"]

 

Object.values

Object.values crée un tableau contenant les valeurs de chaque propriété d’un objet.

const languages = {
  JavaScript: 50,
  Python: 45,
  Java: 30,
  PHP: 10,
}

const values = Object.values(languages)
console.log(values)

La sortie :

[50, 45, 30, 10]

 
 

Object.entries

Object.entries crée un tableau de tableaux. Chaque tableau interne a deux éléments. Le premier est la clé et le deuxième est la valeur.

const languages = {
  JavaScript: 50,
  Python: 45,
  Java: 30,
  PHP: 10,
}

const tab = Object.entries(languages)
console.log(tab)

La sortie :

[
    [JavaScript, 50],
    [Python, 45],
    [Java, 30],
    [PHP, 10]
 ]