Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

JavaScript : les tableaux

En JavaScript on désigne par "tableau" une variable pouvant contenir une liste de données.
Un tableau peut être à une ou plusieurs dimensions.

Tableaux à une dimension

Dans un tableau à une dimension chaque valeur est repérée par son rang (ou indice).
Attention la première valeur a le rang (ou indice) zéro !

Un tableau JavaScript est l'équivalent d'une liste en Python.

Création et manipulation d'un tableau

Nous allons nous familiariser avec la syntaxe en produisant des commandes dans la console.
Consigne : saisir les lignes précédées de ">".
Les autres lignes sont les réponses de la console.

Pour créer un tableau il faut que les différents éléments soient séparés par des virgules et le tout encadré par des parenthèses.

J'ai ensuite appliqué différentes méthodes qui modifient le tableau.

Pour connaitre le nombre d'éléments d'un tableau il faut utiliser la propriété length
Pour afficher le contenu du tableau il suffit de saisir son nom.

Il y a d'autres méthodes applicables à un objet de type "array" (tableau).
Je reviendrai sur les tableaux dans le chapitre "objets natifs en JS".

Script pour parcourir un tableau

Testez ce script !

Le rendu

Analyse du script

Je crée un tableau composé de 4 chaines (4 villes)

On accède à un item avec la syntaxe tableau[indice].

La structure for ... in permet de parcourir un tableau avec une syntaxe simplifiée ; le comptage du nombre de termes du tableau est implicite !

Les tableaux bidimensionnels

Utilisation de la console

Commandes à saisir dans la console :

Notez que j'ai utilisé la méthode table() de l'objet console pour afficher le tableau à deux dimensions.

Programme qui manipule un tableau à deux dimensions

Thématique : l'ULCO (Université de La Côte d'Opale) est une université multipolaire : quatre sites. Des personnels doivent faire des déplacements entre ces différents pôles. Afin de les indemniser il est important de connaitre les distance entre les pôles.

Tableau des distances :

****calaisboulognedunkerquesaint omer
calais0344644
boulogne3407654
dunkerque4676047
saint omer4454470

Le script correspondant

En fait un tableau à deux dimensions et un tableau dont chaque élément est lui-même un tableau.
Dans l'exemple le tableau principal comprend cinq sous-tableaux. Chaque sous-tableau comprend 5 éléments.

Quatre instructions méritent une explication :
...distance[1][2] : dans sous-tableau d'indice 1 (donc le deuxième) sélectionner item de rang 2 (donc le troisième)

Test

Essayez ce script !

Le rendu du programme :

Tableaux avec clés (identifiants textuels)

Il peut être plus pratique d'identifier une donnée par un identifiant textuel (on dit aussi une clé ou propriété) plutôt que par un indice. On parle alors de tableaux avec clés ou tableaux associatifs (pour reprendre la terminologie PHP).
Attention les "tableaux associatifs" en JavaScript c'est un peu de la "bidouille programmatique" : création d'objets littéraux.

Exemple de tableau associatif en JS

Le script

On crée deux objets littéraux : "jean_auto" et "paul_auto". Chaque objet a des propriétés.
Ces objets ne sont pas considérés comme de véritables tableau par JavaScript. Donc vous ne pourrez utilisez les méthodes telles sort(), push(), pop(), etc. ni la propriété length.
Pour décrire les deux "tableaux associatifs" j'ai utilisé la notation JSON(JavaScript Object Notation).

Examinons quelques instructions du script :
document.write(jean_auto.modele) : affiche la donnée ayant pour clé modele dans le tableau jean_auto. On utilise donc la notation pointée.
jean_auto.p_reelle = "100cv" : ajout d'une donnée identifiée par la clé p_reelle dans le tableau jean_auto
for (var cle in jean_auto) : parcours du tableau jean_auto

Pour parcourir un "tableau associatif" il faut utiliser obligatoirement la structure for ... in , la propriété length n'étant pas disponible.

Test du script

Exécutez ce script !

Le rendu :

Applications pratiques de la notion de tableau

Sous JavaScript vous pouvez créer une fonction qui retourne un tableau, donc plusieurs valeurs.

Vous pouvez aussi créer une fonction qui admet en paramètre un tableau donc lorqu'on l'appelle un nombre variable d'arguments.

Pour en savoir plus sur les fonctions en JS