Parcourir un tableau en javascript

Parent Previous Next


Parcourir un tableau

Soyez attentifs, il s'agit ici d'un gros morceau ! Parcourir un tableau est quelque chose que vous allez faire très fréquemment en Javascript, surtout plus tard, quand nous verrons comment interagir avec les éléments HTML. 

« Parcourir un tableau » signifie passer en revue chaque item du tableau pour, par exemple, afficher les items un à un, leur faire subir des modifications ou exécuter des actions en fonction de leur contenu.



Dans le chapitre sur les boucles nous avons étudié la boucle for. Celle-ci va nous servir à parcourir les tableaux. La boucle while peut aussi être utilisée, mais for est la plus adaptée pour cela. Nous allons voir aussi une variante de for : la boucle for in

Parcourir avec for


Reprenons le tableau avec les prénoms : 

Code : JavaScript 

1

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];



Le principe pour parcourir un tableau est simple : il faut faire autant d'itérations qu'il y a d'items. Le nombre d'items d'un tableau se récupère avec la propriété length, exactement comme pour le nombre de caractères d'une chaîne de caractères. À chaque itération, on va avancer d'un item dans le tableau, en utilisant la variable de boucle i : à chaque itération, elle s'incrémente, ce qui permet d'avancer dans le tableau item par item. Voici un exemple : 

Code : JavaScript 

1

2

3

4

5

for (var i = 0; i < myArray.length; i++) {

       

   alert(myArray[i]);

               

}



On commence par définir la variable de boucle i. Ensuite, on règle la condition pour que la boucle s'exécute tant que l'on n'a pas atteint le nombre d'items. myArray.length représente le nombre d'items du tableau, c'est-à-dire cinq. 

Le nombre d'items est différent des indices. S'il y a cinq items, comme ici, les indices vont de 0 à 4. Autrement dit, le dernier item possède l'indice 4, et non 5. C'est très important pour la condition, car on pourrait croire à tort que le nombre d'items est égal à l'indice du dernier item.




Attention à la condition



Nous avons volontairement mal rédigé le code précédent. En effet, dans le chapitre sur les boucles, nous avons dit que le deuxième bloc d'une boucle for, le bloc de condition, était exécuté à chaque itération. Ici ça veut donc dire que myArray.length est utilisé à chaque itération, ce qui, à part ralentir la boucle, n'a que peu d'intérêt puisque le nombre d'items du tableau ne change normalement pas (dans le cas contraire, n'utilisez pas la solution qui suit). 

L'astuce est de définir une seconde variable, dans le bloc d'initialisation, qui contiendra la valeur de length. On utilisera cette variable pour la condition : 

Code : JavaScript - Sélectionner

1

2

3

4

5

for (var i = 0, c = myArray.length; i < c; i++) {

       

   alert(myArray[i]);

               

}


Nous utilisons c comme nom de variable, qui signifie count (compter), mais vous pouvez utiliser ce que vous voulez.


Créé avec HelpNDoc Personal Edition: Créer des livres électroniques facilement

Site à deux balles