Cours développement web ESILV

# Les boucles en JavaScript

Les boucles sont des structures qui permettent de répéter une séquence du programme un nombre de fois spécifique qui peut être soit défini, soit lié à une condition. Effectuer une boucle en javascript peut se faire avec les instructions for, for-of, while et do while. Pour les objets, on pourra utiliser la boucle for-in pour lister ses propriétés.

# Un mot sur les itérables

Les itérables sont des objets et des structures de données dont on peut parcourir les valeurs. Les tableaux (Array et TypedArray) en javascript sont évidemment itérables, mais il existe d'autres structures de données itérables. Parmi elles, on retrouve les Set (opens new window) et les Map (opens new window), et aussi ce qu'on nomme les Array-like en JavaScript. Les Array-like sont des objets qui ressemblent à des tableaux mais qui n'en sont pas, comme les listes retournés par certaines méthodes du (DOM). Les Array-like sont cependant facilement transformables en Array avec la méthode statique Array.from() (opens new window).

# La boucle for numérique

La boucle for est la boucle la plus vieille, et si vous pouvez vous en passer, faites-le...

for(compteur initial ; condition compteur ; increment compteur )
{
  bloc de code
}

var jours = [ // jour est un tableau (Array)
 'Lundi',
 'Mardi',
 'Mercredi',
 'Jeudi',
 'Vendredi',
 'Samedi',
 'Dimanche',
]

for (let i = 0; i < jours.length; i++) {
 console.log(jours[i])
}

// Sortie attendue :
// "Lundi"
// "Mardi"
// "Mercredi"
// "Jeudi"
// "Vendredi"
// "Samedi"
// "Dimanche"

# La boucle for-of

La boucle for-of est beaucoup plus lisible :

for (var jour of jours) {
 console.log(jour)
}

# La boucle while

Syntaxe :

while (condition) {
 statement
}

Example :

let i = 0
while (i < jours.length) {
 console.log(jours[i++])
}

# La boucle do...while

Syntaxe :

do {
 statement
}
while (condition)

let i = 0
do {
 console.log(jours[i++])
} while (i < jours.length)

# La boucle for-in pour les objets

La boucle for-in est dédié aux objets et ne doit pas être utilisée sur les itérables :

for (var jour in jours) {
 console.log(jour)
}

Sur un Array, vous obtiendrez en sortie :

0
1
2
3
4
5
6

Ce qui n'est pas très intérressant.

Mais utilisée sur un objet, elle peut être très utile :

var french = {
 jours: jours,
 mois: [
   'Janvier',
   'Février',
   'Mars',
   'Avril',
   'Mai',
   'Juin',
   'Juillet',
   'Août',
   'Septembre',
   'Octobre',
   'Novembre',
   'Décembre',
 ]
}

for (var prop in french) {
 console.log(prop)
}

On obtiendra :

jours
mois

Nous obtiendrons donc les noms des propriétés de l'objet ! La boucle for-in permet donc de faire ce que l'on appelle de la méta-programmation : du code qui analyse du code.

← Premier programme →