Le tableau associatif en javascript
Le tableau associatif en javascript
-
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 :
-
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:
- En effet l’utilisation d’une chaîne ou d’un nombre spécifique pour indexer les valeurs du tableau.
-
Parcourir un tableau associatif
- Résultat:
- langage : javascript
- site web : apcpedagogie.com
- cours : les tableaux
- tutoriel : les tableaux associatifs
| Indice ou clé ou étiquette | Valeur |
|---|---|
| nom | KHAMMASI |
| prenom | Mohamed |
| age | 65 |
| cp | 3100 |
| ville | Hammamet |
var tableau_associatif = new Object();
tableau_associatif.nom = 'SAHLI';
tableau_associatif.prenom = 'Mohamed';
tableau_associatif.age = 52; 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"<!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> 