Développement web

Cours 13

JavaScript

Boucles

Les boucles permettent d'accomplir une action un certain nombre de fois ou alors de parcourir un tableau en accomplissant une action pour chacun des éléments

La plus utilisée en JS est le for

(while et do while sont des boucles que nous ne verrons pas dans ce cours)

For classique


for(let i = 0; i < 10; i++)
{
    console.log(i)
}
  • let i = 0 correspond à l'initialisation
  • i < 10 correspond à la condition
  • i++ est executé à chaque boucle

Comme pour le if les accolades sont inutiles s'il n'y a qu'une seule instruction


for(let i = 0; i < 10; i++)
    console.log(i)

En sens inverse


for(let i = 9; i >= 0; i--)
    console.log(i)

Deux par deux


for(let i = 0; i < 10; i += 2)
    console.log(i)

Boucler sur un tableau

Nous allons partir d'un tableau


const familyMembers = ['toto', 'tata', 'titi', 'tutu']

Et tenter de faire un console.log de chacune de ses valeurs

☝️ pour récupérer la longueur d'un tableau, il suffit d'appeler sa propriété length comme s'il s'agissait d'un objet


console.log(familyMembers.length)

Avec un for classique en utilisant sa longueur


const familyMembers = ['toto', 'tata', 'titi', 'tutu']

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

Avec un for ... in ... qui renvoie les clés du tableau


const familyMembers = ['toto', 'tata', 'titi', 'tutu']

for(const key in familyMembers)
{
    const member = familyMembers[key]
    console.log(member)
}

Avec un for ... of ... qui renvoie directement les valeurs du tableau (ne fonctionne pas sur Internet Explorer)


const familyMembers = ['toto', 'tata', 'titi', 'tutu']

for(const member of familyMembers)
{
    console.log(member)
}

Avec la méthode forEach() directement sur le tableau


const familyMembers = ['toto', 'tata', 'titi', 'tutu']

familyMembers.forEach(function(member, key) {
    console.log(key)
    console.log(member)
})

☝️ cette méthode implique des notions que nous n'avons pas encore étudiés; nous n'allons donc pas nous attarder dessus

☝️ Boucler sur un tableau n'est pas évident quand on débute, mais c'est un élément très important que l'on utilisera beaucoup par la suite