Un tableau (« array » en anglais) est un type de variable spécial qui peut contenir plusieurs valeurs.
Les tableaux vont être gérés par l’objet Array, un objet natif en JavaScript qui possède ses propres propriétés et méthodes.
Lorsque l’on crée un tableau, un indice (ou une clef) numérique unique est automatiquement affectée à chaque valeur de notre tableau.
Ainsi, la première valeur de notre tableau va être associée à l’index 0 (et non pas 1, faites bien attention !), la deuxième valeur va recevoir la clef 1, etc.
L’association automatique d’une clef numérique unique et d’une valeur va s’avérer très pratique pour cibler et travailler précisément sur chaque valeur du tableau par la suite.
Comme pour String et Number, on va pouvoir créer un nouveau tableau en utilisant la syntaxe new Array. Cependant, là encore, il est fortement déconseillé d'utiliser cette syntaxe et on préférera donc la méthode que je vais vous présenter ci-dessous.
Créons donc immédiatement un premier tableau prenoms ensemble afin de voir la syntaxe des tableaux.
Cette variable tableau va tout simplement contenir quatre prénoms :
Observez bien la syntaxe de notre tableau : on utilise des crochets pour créer notre tableau et on sépare chaque valeur par une virgule.
Dans notre exemple ci-dessus, notre tableau contient quatre valeurs, ou quatre éléments. Le premier élément est composé de la valeur Pierre et possède l’indice 0. Le dernier, contenant la valeur Claire, possède l’indice 3.
Vous pouvez comme d’habitude utiliser des guillemets ou des apostrophes pour entourer les différentes valeurs textuelles de notre tableau.
Si vous souhaitez rentrer des nombres dans un tableau, en revanche, vous n'utiliserez ni guillemet ni apostrophe.
Pour récupérer ensuite une valeur dans un tableau, nous allons nous servir de la clef associée à cette valeur.
Il suffit ainsi de préciser le nom du tableau avec la clef associée à la valeur voulue entre crochets, comme on l’a fait dans l’exemple ci-dessus.
On peut ensuite travailler sur cette valeur ou l’afficher avec un alert par exemple.
Si maintenant on souhaite modifier une valeur dans un tableau, on va une nouvelle fois utiliser l’index correspondant à la valeur à modifier et tout simplement préciser une nouvelle valeur :
La propriété length va nous permettre de connaître le nombre d’éléments contenus dans un tableau. Voici comment on va l’utiliser, en reprenant notre exemple précédent :
Une petite astuce : comme length retourne le nombre d’éléments d’un tableau, et comme la première valeur d’un tableau possède toujours la clef 0, on peut utiliser cette propriété pour rajouter des éléments à la fin de notre tableau.
Voici comment on va s’y prendre en pratique :
Comme vous pouvez l’observer, cette propriété est très pratique car on n’a pas à préciser explicitement d’indice pour chaque nouvelle valeur ajoutée : prenoms.length va à chaque fois renvoyer le dernier nombre d’éléments connus de notre tableau.
Ainsi, avant d’ajouter Florian à notre tableau, celui-ci contient quatre éléments. Une fois Florian ajouté, notre tableau contient cinq éléments, et ainsi prenoms.length va renvoyer 5 et non plus 4.
Pour parcourir et afficher les valeurs d’un tableau, nous utiliserons généralement une boucle for, qui va nous permettre de passer en revue notre tableau valeur par valeur.
Nous allons également pouvoir utiliser notre propriété length à l’intérieur de cette boucle afin de sortir de la boucle toujours au bon moment.
Voici ce que ça va donner en pratique :
Ici, on va bien entendu utiliser notre boucle for sur les indices de notre tableau. On commence à 0 en initialisant une variable i = 0 puis on pose i < prenoms.length en condition puisqu’on sait que prenoms.length est égal au plus grand indice de notre tableau + 1.
Ensuite, dans notre boucle for en soi, on parcourt notre tableau élément par élément et on stocke chaque nouvelle valeur trouvée avec une phrase de texte dans une variable p qu’on a initialisée en dehors de la boucle.
Au début, notre variable p est vide puis elle va stocker les prénoms de notre tableau un par un. A chaque nouveau passage dans la boucle, un nouveau prénom avec notre petite ligne de texte est ajouté dans notre variable grâce à l’opérateur +=.
Finalement, on affiche le contenu de notre variable à l’aide d’un alert().
Dans nombre d’autres langages informatique (dont le PhP, par exemple), on peut créer des tableaux en choisissant d’attribuer une clef textuelle à chaque nouvelle valeur. On appelle ces tableaux des tableaux associatifs.
En JavaScript, ce type de tableau n’existe tout simplement pas. Pour créer quelque chose qui ressemble à un tableau associatif, nous allons créer un objet littéral en JavaScript.
Encore une fois attention : un objet littéral n’est pas un objet de type array. Ainsi, les propriétés et méthodes de l’objet Array ne fonctionneront pas avec les objets littéraux.
Pour parcourir un objet littéral et afficher ses éléments, nous allons utiliser une nouvelle boucle spécifiquement créée pour cela : la boucle for…in.
Cette boucle va parcourir notre objet littéral selon ses clefs, en utilisant un alias (un mot choisi qui va ensuite être remplacé par les différentes clefs de notre objet).
Voyons immédiatement comment cela va fonctionner en pratique :
Dans l’exemple précédent, nous utilisons le mot clefs comme alias. Vous devez bien comprendre que ce mot va être remplacé par les différentes clefs effectives de notre tableau à chaque nouveau passage dans la boucle (c’est-à-dire prenom1, prenom2, etc.).
Notez également qu’on utilise, comme pour les tableaux, des crochets pour entourer les clefs de notre objet littéral pour aller récupérer ses valeurs. Cela peut sembler étrange mais c’est la façon normale de procéder.
2015-2017 - Tous droits réservés à Pierre Giraud.
Il est strictement interdit de copier et de distribuer le contenu de ce site sans l'accord express de son propriétaire.
En continuant votre navigation sur ce site, vous acceptez l'utilisation des cookies.
N'oubliez pas de me suivre !
