Exam-Lib: Méthodes de tableau 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

Méthodes de tableau JavaScript

abdelouafiNov 6, 2018

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      3,055
      Likes Received:
      14
      Trophy Points:
      38
      Joined
      Sep 13, 2016
      Conversion de tableaux en chaînes
      La méthode JavaScript toString () convertit un tableau en une chaîne de valeurs de tableau (séparées par des virgules).

      Exemple
      Code:
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits.toString();

      résultat:
      Code:
      Banana,Orange,Apple,Mango
      
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Methods</h2>
      
      <h2>toString()</h2>
      
      <p>The toString() method returns an array as a comma separated string:</p>
      
      <p id="demo"></p>
      
      <script>
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits.toString();
      </script>
      
      </body>
      </html>
      
      La méthode join () joint également tous les éléments du tableau en une chaîne.

      Il se comporte comme toString (), mais vous pouvez également spécifier le séparateur:

      Exemple
      Code:
      ar fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("demo").innerHTML = fruits.join(" * ");
      Résultat:
      Code:
      Banana * Orange * Apple * Mango
      
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> join () </ h2>
      
      <p> La méthode join () joint des éléments de tableau à une chaîne. </ p>
      
      <p> Dans cet exemple, nous avons utilisé "*" comme séparateur entre les éléments: </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo"). innerHTML = fruits.join ("*");
      </ script>
      
      </ body>
      </ html>


      Sauter et pousser
      Lorsque vous travaillez avec des tableaux, il est facile de supprimer des éléments et d’ajouter de nouveaux éléments.

      C’est ce qu’on entend pousser et pousser:

      Supprimer des éléments d'un tableau ou les placer dans un tableau.


      Sauter
      La méthode pop () supprime le dernier élément d'un tableau:

      Exemple
      Code:
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      fruits.pop (); // Supprime le dernier élément ("Mango") des fruits
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> pop () </ h2>
      
      <p> La méthode pop () supprime le dernier élément d'un tableau. </ p>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML = fruits;
      fruits.pop ();
      document.getElementById ("demo2"). innerHTML = fruits;
      </ script>
      
      </ body>
      </ html>
      La méthode pop () renvoie la valeur "sortie":

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> pop () </ h2>
      
      <p> La méthode pop () supprime le dernier élément d'un tableau. </ p>
      
      <p> La valeur renvoyée par la méthode pop () est l'élément supprimé. </ p>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      <p id = "demo3"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML = fruits;
      document.getElementById ("demo2"). innerHTML = fruits.pop ();
      document.getElementById ("demo3"). innerHTML = fruits;
      </ script>
      
      </ body>
      </ html>


      Poussant
      La méthode push () ajoute un nouvel élément à un tableau (à la fin):

      Exemple

      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> push () </ h2>
      
      <p> La méthode push () ajoute un nouvel élément à un tableau. </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo"). innerHTML = fruits;
      
      function maFonction () {
           fruits.push ("Kiwi");
           document.getElementById ("demo"). innerHTML = fruits;
      }
      </ script>
      
      </ body>
      </ html>
      La méthode push () renvoie la nouvelle longueur du tableau:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> push () </ h2>
      
      <p> La méthode push () renvoie la nouvelle longueur du tableau. </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML = fruits;
      
      function maFonction () {
           document.getElementById ("demo2"). innerHTML = fruits.push ("Kiwi");
           document.getElementById ("demo1"). innerHTML = fruits;
      }
      </ script>
      
      </ body>
      </ html>


      Éléments changeants
      Décaler équivaut à sauter, travailler sur le premier élément au lieu du dernier.

      La méthode shift () supprime le premier élément du tableau et "décale" tous les autres éléments vers un index inférieur.

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> shift () </ h2>
      
      <p> La méthode shift () supprime le premier élément d'un tableau (et "décale" tous les autres éléments vers la gauche): </ p>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML = fruits;
      fruits.shift ();
      document.getElementById ("demo2"). innerHTML = fruits;
      </ script>
      
      </ body>
      </ html>
      La méthode shift () renvoie la chaîne qui a été "décalée":

      Exemple

      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> shift () </ h2>
      
      <p> La méthode shift () renvoie l'élément qui a été déplacé. </ p>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      <p id = "demo3"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML = fruits;
      document.getElementById ("demo2"). innerHTML = fruits.shift ();
      document.getElementById ("demo3"). innerHTML = fruits;
      </ script>
      
      </ body>
      </ html>

      La méthode unshift () ajoute un nouvel élément à un tableau (au début) et "décale" les éléments plus anciens:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> unshift () </ h2>
      
      <p> La méthode unshift () ajoute de nouveaux éléments au début d'un tableau. </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo"). innerHTML = fruits;
      
      function maFonction () {
           fruits.unshift ("citron");
           document.getElementById ("demo"). innerHTML = fruits;
      }
      </ script>
      
      </ body>
      </ html>


      La méthode unshift () renvoie la nouvelle longueur du tableau.

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> unshift () </ h2>
      
      <p> La méthode unshift () renvoie la longueur du nouveau tableau: </ p>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      <p id = "demo3"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML = fruits;
      document.getElementById ("demo2"). innerHTML = fruits.unshift ("Lemon");
      document.getElementById ("demo3"). innerHTML = fruits;
      </ script>
      
      <p> <b> Remarque: </ b> La méthode unshift () ne fonctionne pas correctement dans Internet Explorer 8 et les versions antérieures, les valeurs seront insérées, mais la valeur renvoyée sera <em> undefined </ em>. < / p>
      
      </ body>
      </ html>


      Éléments changeants
      Les éléments de tableau sont accessibles en utilisant leur numéro d'index:

      Les index de tableaux commencent par 0. [0] est le premier élément du tableau, [1] est le deuxième, [2] est le troisième ...

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <p> Les éléments de tableau sont accessibles à l'aide de leur numéro d'index: </ p>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML = fruits;
      fruits [0] = "Kiwi";
      document.getElementById ("demo2"). innerHTML = fruits;
      </ script>
      
      </ body>
      </ html>
      La propriété length permet d'ajouter facilement un nouvel élément à un tableau:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <p> La propriété length permet d'ajouter facilement de nouveaux éléments à un tableau sans utiliser la méthode push (). </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo"). innerHTML = fruits;
      
      function maFonction () {
           fruits [fruits.length] = "Kiwi";
           document.getElementById ("demo"). innerHTML = fruits;
      }
      </ script>
      
      </ body>
      </ html>

      Supprimer des éléments
      Étant donné que les tableaux JavaScript sont des objets, les éléments peuvent être supprimés à l'aide de l'opérateur JavaScript delete:

      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <p> La suppression d'éléments laisse des trous indéfinis dans un tableau. </ p>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML =
      "Le premier fruit est:" + fruits [0];
      supprimer des fruits [0];
      document.getElementById ("demo2"). innerHTML =
      "Le premier fruit est:" + fruits [0];
      </ script>
      
      </ body>
      </ html>

      Utiliser delete peut laisser des trous non définis dans le tableau. Utilisez pop () ou shift () à la place.

      Épissage d'un tableau
      La méthode splice () peut être utilisée pour ajouter de nouveaux éléments à un tableau:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> splice () </ h2>
      
      <p> La méthode splice () ajoute de nouveaux éléments à un tableau. </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML = "Tableau original: <br>" + fruits;
      function maFonction () {
           fruits.splice (2, 0, "citron", "kiwi");
           document.getElementById ("demo2"). innerHTML = "Nouveau tableau: <br>" + fruits;
      }
      </ script>
      
      </ body>
      </ html>

      Le premier paramètre (2) définit la position à laquelle les nouveaux éléments doivent être ajoutés (raccordés).

      Le deuxième paramètre (0) définit le nombre d'éléments à supprimer.

      Les autres paramètres ("Lemon", "Kiwi") définissent les nouveaux éléments à ajouter.

      La méthode splice () renvoie un tableau avec les éléments supprimés:

      Exemple

      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> splice () </ h2>
      
      <p> La méthode splice () ajoute de nouveaux éléments à un tableau et renvoie un tableau avec les éléments supprimés (le cas échéant). </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo1"> </ p>
      <p id = "demo2"> </ p>
      <p id = "demo3"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo1"). innerHTML = "Tableau original: <br>" + fruits;
      function maFonction () {
           var enlevé = fruits.splice (2, 2, "citron", "kiwi");
           document.getElementById ("demo2"). innerHTML = "Nouveau tableau: <br>" + fruits;
           document.getElementById ("demo3"). innerHTML = "Éléments supprimés: <br>" + enlevé;
      
      }
      </ script>
      
      </ body>
      </ html>

      Utilisation de splice () pour supprimer des éléments
      Avec un paramétrage intelligent, vous pouvez utiliser splice () pour supprimer des éléments sans laisser de "trous" dans le tableau:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> splice () </ h2>
      
      <p> Les méthodes splice () peuvent être utilisées pour supprimer des éléments de tableau. </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo"). innerHTML = fruits;
      function maFonction () {
           fruits.splice (0, 1);
           document.getElementById ("demo"). innerHTML = fruits;
      }
      </ script>
      
      </ body>
      </ html>
      Le premier paramètre (0) définit la position à laquelle les nouveaux éléments doivent être ajoutés (raccordés).

      Le deuxième paramètre (1) définit le nombre d'éléments à supprimer.

      Les autres paramètres sont omis. Aucun nouvel élément ne sera ajouté.


      Fusion (concaténation) de tableaux
      La méthode concat () crée un nouveau tableau en fusionnant (concaténant) des tableaux existants:

      Exemple (fusion de deux tableaux)
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> concat () </ h2>
      
      <p> La méthode concat () est utilisée pour fusionner (concaténer) des tableaux: </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var myGirls = ["Cecilie", "Lone"];
      var myBoys = ["Emil", "Tobias", "Linus"];
      var myChildren = myGirls.concat (myBoys);
      
      document.getElementById ("demo"). innerHTML = myChildren;
      </ script>
      
      </ body>
      </ html>

      La méthode concat () ne modifie pas les tableaux existants. Il retourne toujours un nouveau tableau.

      La méthode concat () peut prendre n'importe quel nombre d'arguments de tableau:

      Exemple (fusion de trois tableaux)
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Methods</h2>
      
      <h2>concat()</h2>
      
      <p>The concat() method is used to merge (concatenate) arrays:</p>
      
      <p id="demo"></p>
      
      <script>
      var arr1 = ["Cecilie", "Lone"];
      var arr2 = ["Emil", "Tobias", "Linus"];
      var arr3 = ["Robin", "Morgan"];
      
      var myChildren = arr1.concat(arr2, arr3);
      
      document.getElementById("demo").innerHTML = myChildren;
      </script>
      
      </body>
      </html>
      
      La méthode concat () peut également prendre des valeurs comme arguments:

      Exemple (Fusion d'un tableau avec des valeurs)
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> concat () </ h2>
      
      <p> La méthode concat () peut également fusionner des valeurs dans des tableaux: </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var arr1 = ["Cecilie", "Lone"];
      var myChildren = arr1.concat (["Emil", "Tobias", "Linus"]);
      document.getElementById ("demo"). innerHTML = myChildren;
      </ script>
      
      </ body>
      </ html>


      Trancher un tableau
      La méthode slice () divise une partie d'un tableau en un nouveau tableau.

      Cet exemple découpe une partie d'un tableau à partir de l'élément de tableau 1 ("Orange"):

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> slice () </ h2>
      
      <p> Cet exemple découpe une partie d'un tableau à partir de l'élément de tableau 1 ("Orange"): </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
      var citrus = fruits.slice (1);
      document.getElementById ("demo"). innerHTML = fruits + "<br> <br>" + citrus;
      </ script>
      
      </ body>
      </ html>
      La méthode slice () crée un nouveau tableau. Il ne supprime aucun élément du tableau source.

      Cet exemple découpe une partie d'un tableau à partir de l'élément de tableau 3 ("Apple"):

      Exemple

      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> slice () </ h2>
      
      <p> Cet exemple découpe une partie d'un tableau à partir de l'élément de tableau 3 ("Apple") </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
      var citrus = fruits.slice (3);
      document.getElementById ("demo"). innerHTML = fruits + "<br> <br>" + citrus;
      </ script>
      
      </ body>
      </ html>

      La méthode slice () peut prendre deux arguments comme slice (1, 3).

      La méthode sélectionne ensuite les éléments à partir de l'argument de début et jusqu'à (sans l'inclure) l'argument de fin.

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> slice () </ h2>
      
      <p> Lorsque la méthode slice () reçoit deux arguments, elle sélectionne des éléments de tableau à partir de l'argument de début et jusqu'à (mais non inclus) l'argument de fin: </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
      var citrus = fruits.slice (1,3);
      document.getElementById ("demo"). innerHTML = fruits + "<br> <br>" + citrus;
      </ script>
      
      </ body>
      </ html>
      Si l'argument de fin est omis, comme dans les premiers exemples, la méthode slice () découpe le reste du tableau en tranches.

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> slice () </ h2>
      
      <p> Cet exemple découpe une partie d'un tableau à partir de l'élément de tableau 2 ("Lemon"): </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
      var citrus = fruits.slice (2);
      document.getElementById ("demo"). innerHTML = fruits + "<br> <br>" + citrus;
      </ script>
      
      </ body>
      </ html>



      ToString automatique ()
      JavaScript convertit automatiquement un tableau en chaîne séparée par des virgules lorsqu'une valeur primitive est attendue.

      C'est toujours le cas lorsque vous essayez de générer un tableau.

      Ces deux exemples produiront le même résultat:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <h2> toString () </ h2>
      
      <p> La méthode toString () renvoie un tableau sous forme de chaîne séparée par des virgules: </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo"). innerHTML = fruits.toString ();
      </ script>
      
      </ body>
      </ html>
      Exemple 2:
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Méthodes de matrice JavaScript </ h2>
      
      <p> JavaScript convertit automatiquement un tableau en une chaîne séparée par des virgules lorsqu'une valeur simple est attendue: </ p>
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo"). innerHTML = fruits;
      </ script>
      
      </ body>
      </ html>
      Remarque: Tous les objets JavaScript ont une méthode toString ().

      Recherche des valeurs maximales et minimales dans un tableau
      Il n'y a pas de fonctions intégrées pour trouver la valeur la plus élevée ou la plus basse dans un tableau JavaScript.

      Vous apprendrez comment résoudre ce problème dans le prochain chapitre de ce didacticiel.


      Tri des tableaux
      Les tableaux de tri sont décrits dans le chapitre suivant de ce didacticiel.

      Référence complète du tableau
      Pour une référence complète, consultez notre référence complète sur les tableaux JavaScript.

      La référence contient des descriptions et des exemples de toutes les propriétés et méthodes de Array.
       
      Last edited: Nov 6, 2018
      Latest Threads
      Related Threads
      Loading...

      Merci de partager ce post sur facebook

    2. Merci d'aimer notre facebook page

Share This Page