Objectifs
- Connaitre les tableaux associatifs en Javascript
Définitions
- Le tableau associatif est un tableau dont l'indice est une chaîne de caractère et non une valeur numérique.
- Le tableau associatif permet d’associer une valeur à une clé autre qu’un indice numérique.
- "Un tableau associatif n’utilise pas la méthode numérique pour indexer les différents éléments, mais des noms".
- Il permet d’associer une valeur à une clé autre qu’un indice numérique.
- Un Object c'est un tableau de clés (ou propriétés) auxquelles sont associées des valeurs. Cela en fait donc un tableau associatif.
- Les tableaux associatifs sont des objets dynamiques que l'utilisateur redéfinit selon ses besoins.
- Contrairement au tableau simple, on utilise des accolades plutôt que des crochets.
- Les tableaux associatifs fonctionnent comme les tableaux numériques, mais la clé ou l’indice n’est pas un entier numérique (0, 1, 2...) mais une étiquette unique qui permettra de référencer la case, par exemple :
Indice ou clé ou étiquette Valeur nom KHAMMASI prenom Mohamed age 65 cp 3100 ville Hammamet Création de tableau
- Javascript autorise deux façons pour créer et peupler un tableau associatif :
- Forme littérale:
var tableau_associatif = {nom: 'SAHLI', prenom: 'Mohamed', age: 52};
- Code:
var tableau_associatif = new Object(); tableau_associatif.nom = 'SAHLI'; tableau_associatif.prenom = 'Mohamed'; tableau_associatif.age = 52;
- Forme littérale:
- Javascript autorise deux façons pour créer et peupler un tableau associatif :
- En effet l'utilisation d'une chaîne ou d'un nombre spécifique pour indexer les valeurs du tableau.
Parcourir un tableau associatif
<!DOCTYPE html > <html lang="fr"> <head> <title>JavaScript</title> <meta ="UTF-8"> <script> var monTab = new Array(); monTab["langage"] = "javascript"; monTab["site web"] = "apcpedagogie.com"; monTab["cours"] = "les tableaux"; monTab["tutoriel"] = "les tableaux associatifs"; //Affichage des éléments du tableau for(var valeur in monTab){ document.write('<strong>'+valeur + ' : </strong>' + monTab[valeur] + '</br>'); } </script> </head> <body> </body> </html>- Résultat:
- langage : javascript
- site web : apcpedagogie.com
- cours : les tableaux
- tutoriel : les tableaux associatifs
- Résultat:
var monTab = new Array();
monTab['langage'] = 'javascript';
monTab['site web'] = 'apcpedagogie.com';
monTab['cours'] = 'les tableaux';
monTab['tutoriel'] = 'les tableaux associatifs';
document.write(monTab.length); // Renvoie 0
document.write(monTab['site web']); // affiche "apcpedagogie.com"
document.write(monTab['cours']); // affiche "les tableaux"
document.write(monTab['tutoriel']); // affiche "les tableaux associatifs"