Le tableau associatif en javascript

Le tableau associatif en javascript

  1. Objectifs

    • Connaitre les tableaux associatifs en Javascript
  2. 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



  3. 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;
    • En effet l’utilisation d’une chaîne ou d’un nombre spécifique pour indexer les valeurs du tableau.
    •  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"
  4. 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



Abonnez vous à notre chaîne YouTube gratuitement