Tuto Js : les boucles forEach VS For .. In VS For Of

in #javascript5 years ago (edited)

Dans ce mini tutoriel on va voir les différences entre forEach, for..In et for..Of.

ForEach

forEach est une méthode disponible seulement sur les objets de type Array.
Cette méthode permet d'itérer (de passer par chacun) sur chacune des valeurs du tableau.
Pour chaque valeur du tableau, elle le passe à une fonction de callback.
La fonction de callback peut accéder à l'index et la valeur de l'élément dans le tableau.

[2, 5, 4, 9].forEach(function(element, index) {
  console.log('a[' + index + '] = ' + element);
});

For .. In

For..In est une fonction globale permettant de parcourir les propriétés énumérable d'un objet (String, Array, Object... tous ces types sont des objets).

var object = {a: 2, b: 1, c: 8};
// var object = 'Hello'; // fonctionne aussi avec les strings
// var object = [7, 5, 3]; // fonctionne aussi avec les arrays

for (var property in object) {
  console.log(property + ' --> ' + object[property])
}

For .. Of

For..Of est une fonction globale permettant de parcourir un objet énumérable (String, Array, Map et Set sont énumérables).

Ps : Object n'est pas un objet énumérable, il faut passer par une Map

var enumerableArr = [3, 4, 7];

for (var value of enumerableArr) {
  console.log(value)
}

Conclusion

Pour parcourir un tableau (array) on peut utiliser n'importe quelle méthode mais on favorise forEach et depuis ES6 For..Of.

Pour parcourir un objet on ne peut utiliser que For..In.

Ressources complémentaires :

Sort:  

Congratulations @palisanka! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!