JavaScript – Les
tableaux associatif
Javascript
Tableaux associatifs
• L’adressage des éléments d’un tableau n’est pas nécessairement un indice ordonné
commençant par 0. Il est possible de définir des indices sous forme de nombres ou de
chaînes de caractères.
Indice "Paul" "André" "Pierre" "Jean-François"
Donnée 16 22 12 25
Création d’un tableau associatif
• Imaginons le tableau ayant comme indice le code monnaie et comme valeur le nom entier
de la monnaie :
• Pour créer notre tableau monnaies en JavaScript, nous ne pouvons plus utiliser le créateur
Array() avec le contenu du tableau en paramètre. Il faut alimenter notre tableau ligne par
ligne :
Parcours d’un tableau associatif
• La longueur du tableau associatif étant vue comme nulle, le parcours du tableau ne peut pas
se réaliser avec la boucle classique. Heureusement, il existe une solution pour accéder à
l’ensemble des éléments. L’instruction for … in parcourt un par un tous les indices d’un
tableau en donnant accès à la donnée stockée :
Vérifier l’existence d’un élément
• Il peut être utile de vérifier la présence ou non d’un élément dans un tableau avant de
l’utiliser. Notre tableau des monnaies n’est pas complet et il est nécessaire de vérifier que
l’indice existe avant de l’utiliser. Pour tester l’existence d’un élément en JavaScript, l’idéal est
d’utiliser l’opérateur typeof pour comparer à l’objet undefined :
Tableau d’objets
• Dans la vie courante, les tableaux sont le plus souvent à deux dimensions. Voici un exemple
de tableau à deux dimensions très classique, présentant des clients et leurs caractéristiques :
• Il est possible de créer un tableau d’objets :
var clients =[
{nom:"Pierre", age:24, nb:5, ca:807.50},
{nom:"Paul", age:37, nb:3, ca:462.35},
{nom:"Jacques", age:43, nb:2, ca:807.50}
];
[Link](clients[0].age);
Parcourir les éléments du tableau
• Voici un exemple pour parcourir les éléments du tableau :
var clients =[
{nom:"Pierre", age:24, nb:5, ca:807.50},
{nom:"Paul", age:37, nb:3, ca:462.35},
{nom:"Jacques", age:43, nb:2, ca:807.50}
];
for(let i=0;i<[Link];i++)
[Link](clients[i].nom);
Exercice d’application
1. Représenter le tableau suivant dans un tableau en JavaScript :
Exercice d’application
2. Ecrire un programme JavaScript qui va permettre d’afficher les données du tableau
précèdent dans un tableau HTML.
a) Les lignes des produits dont la quantité est supérieur a 10 sont affichées en vert.
b) Les lignes des produits dont la quantité est inferieur ou égale a 5 sont affichées en rouge.
2. Ecrire un programme JavaScript qui va permettre d’afficher le nombre d'articles dont la prix
est supérieur à 35.
3. Réaliser un programme qui permet de donner le nombre d'articles total ainsi que le prix
global des produits présents dans le stock.5.
4. Réaliser un programme qui permet de donner la liste des articles dont la prix est compris
entre 20 et 125.