Exam-Lib: Tableaux JavaScript | Exam-Lib
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Dismiss Notice
Welcome to our Education website, plz like our page facebook to support us. Thank You and wish you good navigation

Tableaux JavaScript

abdelouafiNov 6, 2018

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      3,055
      Likes Received:
      14
      Trophy Points:
      38
      Joined
      Sep 13, 2016
      Les tableaux JavaScript sont utilisés pour stocker plusieurs valeurs dans une seule variable.

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p id="demo"></p>
      
      <script>
      var cars = ["Saab", "Volvo", "BMW"];
      document.getElementById("demo").innerHTML = cars;
      </script>
      
      </body>
      </html>
      
      


      Qu'est-ce qu'un tableau?
      Un tableau est une variable spéciale pouvant contenir plusieurs valeurs à la fois.

      Si vous avez une liste d'éléments (une liste de noms de voiture, par exemple), le stockage des voitures dans des variables uniques peut ressembler à ceci:
      Code:
      var car1 = "Saab";
      var car2 = "Volvo";
      var car3 = "BMW";

      Cependant, que se passe-t-il si vous souhaitez parcourir les voitures et en trouver une spécifique? Et si vous n'aviez pas 3 voitures, mais 300?

      La solution est un tableau!

      Un tableau peut contenir plusieurs valeurs sous un même nom. Vous pouvez y accéder en faisant référence à un numéro d'index.

      Créer un tableau
      L'utilisation d'un littéral de tableau est le moyen le plus simple de créer un tableau JavaScript.

      Syntaxe:
      Code:
      var array_name = [item1, item2, ...];       
      
      Exemple:
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p id="demo"></p>
      
      <script>
      var cars = ["Saab", "Volvo", "BMW"];
      document.getElementById("demo").innerHTML = cars;
      </script>
      
      </body>
      </html>
      
      

      Les espaces et les sauts de ligne ne sont pas importants. Une déclaration peut s'étendre sur plusieurs lignes:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p id="demo"></p>
      
      <script>
      var cars = [
          "Saab",
          "Volvo",
          "BMW"
      ];
      document.getElementById("demo").innerHTML = cars;
      </script>
      
      </body>
      </html>
      
      
      Remarque:
      Mettre une virgule après le dernier élément (comme "BMW",) est incohérent entre les navigateurs.

      IE 8 et versions antérieures échoueront.


      Utilisation du mot-clé JavaScript new
      L'exemple suivant crée également un tableau et lui attribue des valeurs:

      Exemple

      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p id="demo"></p>
      
      <script>
      var cars = new Array("Saab", "Volvo", "BMW");
      document.getElementById("demo").innerHTML = cars;
      </script>
      
      </body>
      </html>
      
      
      Remarque:
      Les deux exemples ci-dessus font exactement la même chose. Il n'est pas nécessaire d'utiliser new Array ().
      Pour des raisons de simplicité, de lisibilité et de rapidité d’exécution, utilisez la première méthode (la méthode littérale de tableau).

      Accéder aux éléments d'un tableau
      Vous accédez à un élément de tableau en vous référant au numéro d'index.

      Cette déclaration accède à la valeur du premier élément dans les voitures:
      Code:
      var name = cars[0];
      
      Exemple:
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Tableaux JavaScript </ h2>
      
      <p> Les éléments de tableau JavaScript sont accessibles à l'aide d'index numériques (à partir de 0). </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var cars = ["Saab", "Volvo", "BMW"];
      document.getElementById ("demo"). innerHTML = cars [0];
      </ script>
      
      </ body>
      </ html>

      Remarque:
      Les index de tableaux commencent par 0.

      [0] est le premier élément. [1] est le deuxième élément.


      Changer un élément de tableau
      Cette déclaration modifie la valeur du premier élément dans les voitures:
      Code:
      cars[0] = "Opel";
      
      Exemple:
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Tableaux JavaScript </ h2>
      
      <p> Les éléments de tableau JavaScript sont accessibles à l'aide d'index numériques (à partir de 0). </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var cars = ["Saab", "Volvo", "BMW"];
      voitures [0] = "Opel";
      document.getElementById ("demo"). innerHTML = cars;
      </ script>
      
      </ body>
      </ html>

      Accéder au tableau complet
      Avec JavaScript, le tableau complet est accessible en se référant au nom du tableau:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p id="demo"></p>
      
      <script>
      var cars = ["Saab", "Volvo", "BMW"];
      document.getElementById("demo").innerHTML = cars;
      </script>
      
      </body>
      </html>
      
      

      Les tableaux sont des objets
      Les tableaux sont un type particulier d'objets. L'opérateur typeof dans JavaScript renvoie "objet" pour les tableaux.

      Mais les tableaux JavaScript sont mieux décrits comme des tableaux.

      Les tableaux utilisent des nombres pour accéder à ses "éléments". Dans cet exemple, la personne [0] renvoie John:

      Array:

      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>Arrays use numbers to access its elements.</p>
      
      <p id="demo"></p>
      
      <script>
      var person = ["John", "Doe", 46];
      document.getElementById("demo").innerHTML = person[0];
      </script>
      
      </body>
      </html>
      
      

      Les objets utilisent des noms pour accéder à ses "membres". Dans cet exemple, person.firstName renvoie John:

      Object:

      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Objects</h2>
      <p>JavaScript uses names to access object properties.</p>
      <p id="demo"></p>
      
      <script>
      var person = {firstName:"John", lastName:"Doe", age:46};
      document.getElementById("demo").innerHTML = person["firstName"];
      </script>
      
      </body>
      </html>
      
      

      Les éléments de tableau peuvent être des objets
      Les variables JavaScript peuvent être des objets. Les tableaux sont des types d'objets particuliers.

      De ce fait, vous pouvez avoir des variables de types différents dans le même tableau.

      Vous pouvez avoir des objets dans un tableau. Vous pouvez avoir des fonctions dans un tableau. Vous pouvez avoir des tableaux dans un tableau:
      Code:
      myArray[0] = Date.now;
      myArray[1] = myFunction;
      myArray[2] = myCars;

      Propriétés et méthodes du tableau
      La force réelle des tableaux JavaScript réside dans les propriétés et méthodes de tableau intégrées:

      Exemples
      Code:
      var x = cars.length; // La propriété length renvoie le nombre d'éléments
      var y = cars.sort (); // La méthode sort () trie les tableaux
      Les méthodes de tableau sont traitées dans les chapitres suivants.


      La longueur de la propriété
      La propriété length d'un tableau renvoie la longueur d'un tableau (le nombre d'éléments du tableau).

      Exemple
      Code:
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits.length;                       // the length of fruits is 4


      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      <p>The length property returns the length of an array.</p>
      
      <p id="demo"></p>
      
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits.length;
      </script>
      
      </body>
      </html>
      
      Remarque:
      La propriété length est toujours supérieure à l'index de tableau le plus élevé.



      Accéder au premier élément de tableau
      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Tableaux JavaScript </ h2>
      
      <p> Les éléments de tableau JavaScript sont des accès utilisant des index numériques (à partir de 0). </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      var premier = fruits [0];
      document.getElementById ("demo"). innerHTML = first;
      </ script>
      
      </ body>
      </ html>


      Accéder au dernier élément du tableau
      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Tableaux JavaScript </ h2>
      
      <p> Les éléments de tableau JavaScript sont des accès utilisant des index numériques (à partir de 0). </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      var last = fruits [fruits.length-1];
      document.getElementById ("demo"). innerHTML = last;
      </ script>
      
      </ body>
      </ html>

      Éléments de tableau en boucle
      Le moyen le plus sûr de parcourir un tableau consiste à utiliser une boucle "pour":

      Exemple
      Code:
      var fruits, text, fLen, i;
      fruits = ["Banana", "Orange", "Apple", "Mango"];
      fLen = fruits.length;
      
      text = "<ul>";
      for (i = 0; i < fLen; i++) {
          text += "<li>" + fruits[i] + "</li>";
      }
      text += "</ul>";

      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>The best way to loop through an array is using a standard for loop:</p>
      
      <p id="demo"></p>
      
      <script>
      var fruits, text, fLen, i;
      fruits = ["Banana", "Orange", "Apple", "Mango"];
      fLen = fruits.length;
      
      text = "<ul>";
      for (i = 0; i < fLen; i++) {
          text += "<li>" + fruits[i] + "</li>";
      }
      text += "</ul>";
      
      document.getElementById("demo").innerHTML = text;
      </script>
      
      </body>
      </html>
      

      Vous pouvez également utiliser la fonction Array.forEach ():

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>Array.forEach() calls a function for each array element.</p>
      
      <p>Array.forEach() is not supported in Internet Explorer 8 or earlier.</p>
      
      <p id="demo"></p>
      
      <script>
      var fruits, text;
      fruits = ["Banana", "Orange", "Apple", "Mango"];
      
      text = "<ul>";
      fruits.forEach(myFunction);
      text += "</ul>";
      document.getElementById("demo").innerHTML = text;
      
      function myFunction(value) {
          text += "<li>" + value + "</li>";
      }
      </script>
      
      </body>
      </html>
      

      Ajout d'éléments de tableau
      La méthode la plus simple pour ajouter un nouvel élément à un tableau consiste à utiliser la méthode push:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>The push method appends a new element to an array.</p>
      
      <button onclick="myFunction()">Try it</button>
      
      <p id="demo"></p>
      
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits;
      
      function myFunction() {
          fruits.push("Lemon");
          document.getElementById("demo").innerHTML = fruits;
      }
      </script>
      
      </body>
      </html>
      

      Un nouvel élément peut également être ajouté à un tableau à l'aide de la propriété length:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>The length property provides an easy way to append new elements to an array without using the push() method.</p>
      
      <button onclick="myFunction()">Try it</button>
      
      <p id="demo"></p>
      
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits;
      
      function myFunction() {
          fruits[fruits.length] = "Lemon";
          document.getElementById("demo").innerHTML = fruits;
      }
      </script>
      
      </body>
      </html>
      

      Remarque:
      ATTENTION !
      L'ajout d'éléments avec des index élevés peut créer des "trous" non définis dans un tableau:
      Exemple:
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>Adding elements with high indexes can create undefined "holes" in an array.</p>
      
      <p id="demo"></p>
      
      <script>
      var fruits, text, fLen, i;
      fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits[6] = "Lemon";
      
      fLen = fruits.length;
      text = "";
      for (i = 0; i < fLen; i++) {
          text += fruits[i] + "<br>";
      }
      document.getElementById("demo").innerHTML = text;
      </script>
      
      </body>
      </html>
      



      Tableaux associatifs
      De nombreux langages de programmation prennent en charge les tableaux avec des index nommés.

      Les tableaux avec des index nommés sont appelés tableaux associatifs (ou hachages).

      JavaScript ne prend pas en charge les tableaux avec des index nommés.

      En JavaScript, les tableaux utilisent toujours des index numérotés.

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p id="demo"></p>
      
      <script>
      var person = [];
      person[0] = "John";
      person[1] = "Doe";
      person[2] = 46;
      document.getElementById("demo").innerHTML =
      person[0] + " " + person.length;
      </script>
      
      </body>
      </html>
      
      

      Remarque:
      ATTENTION !!
      Si vous utilisez des index nommés, JavaScript redéfinira le tableau en un objet standard.
      Après cela, certaines méthodes et propriétés de tableaux produiront des résultats incorrects.

      Exemple:
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Tableaux JavaScript </ h2>
      
      <p> Si vous utilisez un index nommé lors de l'accès à un tableau, JavaScript redéfinira le tableau en un objet standard et certaines méthodes et propriétés de tableau produiront des résultats non définis ou incorrects. </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var person = [];
      person ["firstName"] = "John";
      person ["lastName"] = "Doe";
      personne ["âge"] = 46;
      document.getElementById ("demo"). innerHTML =
      personne [0] + "" + personne.longueur;
      </ script>
      
      </ body>
      </ html>

      La différence entre les tableaux et les objets
      En JavaScript, les tableaux utilisent des index numérotés.

      En JavaScript, les objets utilisent des index nommés.

      Remarque: Les tableaux sont un type particulier d’objets, avec des index numérotés.


      Quand utiliser des tableaux. Quand utiliser des objets.

      • JavaScript ne prend pas en charge les tableaux associatifs.
      • Vous devez utiliser des objets lorsque vous souhaitez que les noms d'éléments soient des chaînes (texte).
      • Vous devez utiliser des tableaux lorsque vous souhaitez que les noms d'éléments soient des nombres.
      Eviter les nouveaux tableaux ()
      Il n'est pas nécessaire d'utiliser le nouveau constructeur Array () du constructeur de tableaux en JavaScript.

      Utilisez [] à la place.

      Ces deux instructions différentes créent un nouveau tableau vide appelé points:
      Code:
      var points = new Array();         // Bad
      var points = [];                  // Good 

      Ces deux instructions différentes créent un nouveau tableau contenant 6 nombres:
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>Avoid using new Array(). Use [] instead.</p>
      
      <p id="demo"></p>
      
      <script>
      //var points = new Array(40, 100, 1, 5, 25, 10);
      var points = [40, 100, 1, 5, 25, 10];
      document.getElementById("demo").innerHTML = points[0];   
      </script>
      
      </body>
      </html>
      

      Le mot-clé NEW ne fait que compliquer le code. Il peut également produire des résultats inattendus:
      Code:
      var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)
      

      Et si je supprime un des éléments?
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>Avoid using new Array().</p>
      
      <p id="demo"></p>
      
      <script>
      var points = new Array(40);
      document.getElementById("demo").innerHTML = points[0];   
      </script>
      
      </body>
      </html>
      


      Comment reconnaître un tableau
      Une question commune est: comment savoir si une variable est un tableau?

      Le problème est que l'opérateur JavaScript typeof renvoie "objet":
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>The typeof operator, when used on an array, returns object:</p>
      
      <p id="demo"></p>
      
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = typeof fruits;
      </script>
      
      </body>
      </html>
      

      L'opérateur typeof renvoie object car un tableau JavaScript est un objet.

      Solution 1:
      Pour résoudre ce problème, ECMAScript 5 définit une nouvelle méthode, Array.isArray ():
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>The new ECMASCRIPT 5 method isArray returns true when used on an array:</p>
      
      <p id="demo"></p>
      
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = Array.isArray(fruits);
      </script>
      
      </body>
      </html>
      
      Le problème de cette solution est qu’ECMAScript 5 n’est pas pris en charge par les anciens navigateurs.

      Solution 2:
      Pour résoudre ce problème, vous pouvez créer votre propre fonction isArray ():
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>This "home made" isArray() function returns true when used on an array:</p>
      
      <p id="demo"></p>
      
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = isArray(fruits);
      
      function isArray(myArray) {
          return myArray.constructor.toString().indexOf("Array") > -1;
      }
      </script>
      
      </body>
      </html>
      

      La fonction ci-dessus retourne toujours true si l'argument est un tableau.

      Ou plus précisément: la valeur renvoyée est vraie si le prototype d'objet contient le mot "Array".

      Solution 3:
      L'opérateur instanceof renvoie true si un objet est créé par un constructeur donné:
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Arrays</h2>
      
      <p>The instanceof operator returns true when used on an array:</p>
      
      <p id="demo"></p>
      
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits instanceof Array;
      </script>
      
      </body>
      </html>
      
       
      Latest Threads
      Related Threads
      Loading...

      Merci de partager ce post sur facebook

    2. Merci d'aimer notre facebook page

Share This Page