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 "array" une variable pouvant contenir une liste de données simples.
On parle aussi de "tableaux indicés". Un tableau peut être à une ou plusieurs dimensions.

Depuis la dernière version de JavaScript, on désigne par "map" une liste de paires clé-valeur.
On parle aussi de "tableaux associatifs" ou "dictionnaires (en Python).

Le concept de "set" (liste sans doublons possibles) bien connu des développeurs Python est désormais introduit par ECMAScript 6 - dernière version de JS. Et c'est heureux.

Les "array" ou tableaux indicés

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

Création et manipulation d'un array à une dimension

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.

Après avoir créé un tableau indicé, j'ai 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 existe d'autres méthodes que l'on peut appliquer à un tableau.

Programme manipulant un tableau indicé

Nous allons voir désormais comment parcourir un tableau mais aussi comment insérer un élement sans utiliser les méthodes unshift() & push().

Ce tableau a initialement 4 items ayant respectivement les rangs 0 à 3.
Puis j'ajoute un élément en précisant son indice ... 6 !
Il s'agit alors d'un tableau avec 7 éléments dont deux non définis.
Oui c'est possible mais ce n'est pas conseillé.

Le rendu du script :

Analyse du script

On accède à un item avec la syntaxe nomTableau[indice].
On peut insérer un nouvel item en précisant son indice avec la syntaxe : nomTableau[indice] = valeur

La structure for ... in permet de parcourir un tableau avec une syntaxe simplifiée.
De plus les "trous" dans la liste n'apparaissent pas !

Les "array" à deux dimensions

Rien n'interdit de créer des tableaux indicés à deux dimensions.

Théme: 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

Il s'agit d'un tableau à double entrée (plusieurs colonnes et plusieurs lignes).

Le script correspondant

Le script pour créer ce tableau indicé à deux dimensions et le manipuler est le suivant.

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

Des instructions méritent une explication :
...distance[1][2] : pour récupérer un élément il faut préciser ses deux indices : rang colonne, rang ligne.

Le rendu du script (qui s'exécute automatiquement) :

Exercice : script à produire et à tester

Un tableau indicé est un objet de type ARRAY. Donc pour créer un tableau je peux utiliser la syntaxe POO : var nomTableau = new Array()
Ce script a aussi pour objet de vous familiariser avec toutes les méthodes (et elles sont nombreuses) d'un objet de type Array.

Dans ce script révision sur des méthodes de Array déjà présentées plus avant : push(), unshift(), sort(), reverse().

Il existe d'autres méthodes de l'objet Array : concat(), slice(),pop(), shift() pour respectivement concaténer plusieurs tableaux en un seul, extraire une partie de tableau, supprimer en fin et début de tableau.

Le rendu de ce script :

Tableaux avec clés

Les tableaux avec clés (appelés aussi tableaux "clé-valeur", tableaux associatifs en PHP, dictionnaires en Python) ça existe enfin dans JavaScript grâce à la dernière version stable : EcmaScript 6.
Auparavant on pouvait simuler des tableaux associatifs avec des objets de type string mais c'était de la "bidouille".
Dans le jargon JS on parle de "map". Dans un "map" on associe à chaque valeur non pas un indice mais une clé (une chaine). A la différence de l'indice, la clé doit toujours être saisie !

Exemple de tableau "clé/valeur"

Pour créer un tableau associatif il faut utiliser le constructeur Map.
Exemple de script :

Commentaires

Il y a beaucoup à dire sur ce code.
Pour déclarer des variables (simples ou tableaux) il est préconisé d'utiliser désormais le mot réservé let et non pas var.
Pour créer un tableau associatif il faut utiliser le constructeur Map().

La propriété size (et non pas length) indique le nombre de paires "clé-valeur" dans le tableau.

Pour parcourir un tableau associatif il faut utiliser la structure for (let ... of nomMap.méthode())

Notez aussi que pour afficher les clés et les valeurs il y a deux solutions possibles.

Le rendu

Les ensembles ou "set"

Si vous connaissez le langage Python, vous savez qu'il existe une structure de données qui s'appelle "set" ("ensemble" en français).
Ce qui caractérise un set par rapport à une liste c'est qu'il ne peut pas y avoir de doublons.
La dernière version de JavaScript propose désormais ce type de données.

Script à produire

Commentaire

Pour créer un nouvel ensemble, il faut utiliser le constructeur Set().
La taille de l'ensemble est de 8 (l'ajout de 7 n'ayant pas été pris en compte) ; cependant il n'y a pas plantage du programme.

Pour parcourir un "set" on utilise la même syntaxe que pour un "map".
Notez qu'il existe aussi les méthodes has(),clear(), delete() (comme pour pour le type "map'). Par contre l'ajout d'un item se fait avec la méthode add() (et non pas set()) et on comprend pourquoi ...

La tentative d'ajout d'un 8 échoue puisque cette valeur existe déjà. La taille de l'ensemble fait désormais 13.

Il ne peut jamais y avoir de doublons dans un ensemble.

Utilité de la structure Set

Dans le script ci-dessous le joueur obtient une "main" de 5 cartes toutes différentes car cette "main" est stockée dans un tableau de type "set".
La simplicité du programme est dû à l'emploi d'un objet de type "set" qui interdit les doublons.

Le code la page

La boucle FOR infinie va être exécutée au moins 5 fois.
Dans l'instruction ma_main = ma_main.add(carte) l'ajout à "ma_main" n'est pas automatique ; il se fait seulement si la valeur de "carte" n'existe pas encore dans "ma_main".
Si "ma_main" était un tableau "array" (et non pas un "set") le code serait beaucoup plus complexe ; vous devriez alors programmer des tests pour éviter les doublons.

Le rendu

Actualisez la page pour afficher de nouveau le bouton de commande.

Pour vérifier si vous avez compris le code, créez une nouvelle version : tirage dans un jeu de 52 cartes et la "main" doit être une combinaison de 7 cartes toutes différentes.