JavaScript forEah
JavaScript

JavaScript forEach : comment les utiliser de manière efficace?

Vous voulez en apprendre plus sur le forEach en JavaScript? Vous êtes au bon endroit. Les boucles en javaScript peuvent paraître extrêmement faciles. C’est même la première chose que l’on apprend quand on démarre le développement web et notamment le javaScript.

A noter qu’il est possible de parcourir des tableaux, éléments HTML(Node HTML) et objets via une simple boucle for. Je vous le recommande d’ailleurs si vous devez traiter avec des gros volumes de données. Ceci pour une question de performance.

forEach

forEach est une function native de JavaScript ES5, à ne pas confondre avec une librarie ou un module. Nous allons commencer par un exemple tout simple avec un tableau(Array).

// La syntaxe d'un forEach
forEach(collection[, callback[, context]]);
// Un simple exemple
var myArray = [10, 20, 30, 40];
myArray.forEach(function (value, index) {
   // vous pouvez taper votre code ici
});

forEach Array

Comme je l’ai dis précédemment, il est possible d’utiliser le forEach sur des Arrays (tableaux). Vous pouvez récupérer les valeurs de votre tableau une par une. Vous pouvez également récupérer l’index.

[10, 20, 30, 40].forEach(function (value, index) {
    console.log(index); // 0, 1, 2, 3
    console.log(value); // 10, 20, 30, 40
});

forEach NodeList

Il est possible de récupérer des éléments HTML (DOM) puis de les parcourir avec forEach. Vous devez les récupérer tout d’abord avec document.querySelector par exemple.

document.querySelectorAll('span').forEach(function (value, index) {
    console.log(index); // 0, 1, 2, 3
    console.log(value); // <div>, <div>, <div>...
});

A noter que j’ai utilisé document.querySelector, il est tout à fait possible d’utiliser document.getbyTagName ou document.getElementsByTagName.

forEach Object

Il faut parcourir avec forEach les propriétés de votre objet. Pour cela vous devez récupérer les propriétés de votre objet avec Object.keys. C’est une façon peu orthodoxe de parcourir les propriétés un objet. Il est plutôt recommandé de parcourir les propriétés un objet avec une boucle for.

var myUser = { firstName:'Pierre', lastName:'Terrat' };
Object.keys(myUser).forEach(function (value, index) {
    console.log(value); // firstName, lastName
  console.log(myUser[value]); // Pierre, Terrat
})

C’est tout pour cet article, j’espère qu’il vous a plu.

Si vous voulez aller plus loin dans votre apprentissage en front-end, je ne peux que vous conseiller de lire ce premier article sur le framework Angular : http://pierreterrat.com/composant-angular

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *