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 d'itération de tableaux JavaScript

Discussion in 'TP en HTML' started by abdelouafi, Nov 6, 2018.

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Les méthodes d'itération de tableau opèrent sur chaque élément de tableau.

      Array.forEach ()
      La méthode forEach () appelle une fonction (une fonction de rappel) une fois pour chaque élément du tableau.

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.forEach()</h2>
      
      <p>Calls a function once for each array element.</p>
      
      <p id="demo"></p>
      
      <script>
      var txt = "";
      var numbers = [45, 4, 9, 16, 25];
      numbers.forEach(myFunction);
      document.getElementById("demo").innerHTML = txt;
      
      function myFunction(value, index, array) {
          txt = txt + value + "<br>";
      }
      </script>
      
      </body>
      </html>
      Notez que la fonction prend 3 arguments:

      • La valeur de l'objet
      • L'index d'article
      • Le tableau lui-même
      • L'exemple ci-dessus utilise uniquement le paramètre value. L'exemple peut être réécrit pour:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.forEach()</h2>
      
      <p>Calls a function once for each array element.</p>
      
      <p id="demo"></p>
      
      <script>
      var txt = "";
      var numbers = [45, 4, 9, 16, 25];
      numbers.forEach(myFunction);
      document.getElementById("demo").innerHTML = txt;
      
      function myFunction(value) {
          txt = txt + value + "<br>";
      }
      </script>
      
      </body>
      </html>
      

      Array.forEach () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure:
      upload_2018-11-6_15-57-1.png

      Array.map ()
      La méthode map () crée un nouveau tableau en effectuant une fonction sur chaque élément du tableau.

      La méthode map () n'exécute pas la fonction pour les éléments de tableau sans valeurs.

      La méthode map () ne modifie pas le tableau d'origine.

      Cet exemple multiplie chaque valeur de tableau par 2:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.map()</h2>
      
      <p>Creates a new array by performing a function on each array element.</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers1 = [45, 4, 9, 16, 25];
      var numbers2 = numbers1.map(myFunction);
      
      document.getElementById("demo").innerHTML = numbers2;
      
      function myFunction(value, index, array) {
          return value * 2;
      }
      </script>
      
      </body>
      </html>
      
      Notez que la fonction prend 3 arguments:

      • La valeur de l'objet
      • L'index d'article
      • Le tableau lui-même
      Lorsqu'une fonction de rappel utilise uniquement le paramètre value, les paramètres index et array peuvent être omis:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.map()</h2>
      
      <p>Creates a new array by performing a function on each array element.</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers1 = [45, 4, 9, 16, 25];
      var numbers2 = numbers1.map(myFunction);
      
      document.getElementById("demo").innerHTML = numbers2;
      
      function myFunction(value) {
          return value * 2;
      }
      </script>
      
      </body>
      </html>
      
      Array.map () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.
      upload_2018-11-6_15-58-37.png

      Array.filter ()
      La méthode filter () crée un nouveau tableau avec des éléments de tableau qui passent un test.

      Cet exemple crée un nouveau tableau à partir d'éléments avec une valeur supérieure à 18:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.filter()</h2>
      
      <p>Creates a new array with all array elements that passes a test.</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var over18 = numbers.filter(myFunction);
      
      document.getElementById("demo").innerHTML = over18;
      
      function myFunction(value, index, array) {
          return value > 18;
      }
      </script>
      
      </body>
      </html>
      
      Notez que la fonction prend 3 arguments:

      • La valeur de l'objet
      • L'index d'article
      • Le tableau lui-même
      Dans l'exemple ci-dessus, la fonction de rappel n'utilise pas les paramètres index et array, ils peuvent donc être omis:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.filter()</h2>
      
      <p>Creates a new array with all array elements that passes a test.</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var over18 = numbers.filter(myFunction);
      
      document.getElementById("demo").innerHTML = over18;
      
      function myFunction(value) {
          return value > 18;
      }
      </script>
      
      </body>
      </html>
      

      Array.filter () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.
      upload_2018-11-6_15-59-58.png

      Array.reduce ()
      La méthode reduction () exécute une fonction sur chaque élément du tableau pour produire (la réduire à) une valeur unique.

      La méthode reduction () fonctionne de gauche à droite dans le tableau. Voir aussi reductionRight ().

      La méthode reduction () ne réduit pas le tableau d'origine.

      Cet exemple trouve la somme de tous les nombres d'un tableau:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.reduce()</h2>
      
      <p>This example finds the sum of all numbers in an array:</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var sum = numbers.reduce(myFunction);
      
      document.getElementById("demo").innerHTML = "The sum is " + sum;
      
      function myFunction(total, value, index, array) {
          return total + value;
      }
      </script>
      
      </body>
      </html>
      

      Notez que la fonction prend 4 arguments:

      Le total (la valeur initiale / la valeur précédemment renvoyée)
      • La valeur de l'objet
      • L'index d'article
      • Le tableau lui-même
      L'exemple ci-dessus n'utilise pas les paramètres index et array. Il peut être réécrit pour:

      Exemple

      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.reduce()</h2>
      
      <p>This example finds the sum of all numbers in an array:</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var sum = numbers.reduce(myFunction);
      
      document.getElementById("demo").innerHTML = "The sum is " + sum;
      
      function myFunction(total, value) {
          return total + value;
      }
      </script>
      
      </body>
      </html>
      

      La méthode reduction () peut accepter une valeur initiale:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.reduce()</h2>
      
      <p>This example finds the sum of all numbers in an array:</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var sum = numbers.reduce(myFunction, 100);
      
      document.getElementById("demo").innerHTML = "The sum is " + sum;
      
      function myFunction(total, value) {
          return total + value;
      }
      </script>
      
      </body>
      </html>
      
      Array.reduce () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.
      upload_2018-11-6_16-1-52.png

      Array.reduceRight ()
      La méthode reductionRight () exécute une fonction sur chaque élément du tableau pour produire (la réduire à) une valeur unique.

      ReductionRight () fonctionne de droite à gauche dans le tableau. Voir aussi réduction ().

      La méthode reductionRight () ne réduit pas le tableau d'origine.

      Cet exemple trouve la somme de tous les nombres d'un tableau:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.reduceRight()</h2>
      
      <p>This example finds the sum of all numbers in an array:</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var sum = numbers.reduceRight(myFunction);
      
      document.getElementById("demo").innerHTML = "The sum is " + sum;
      
      function myFunction(total, value, index, array) {
          return total + value;
      }
      </script>
      
      </body>
      </html>
      
      Notez que la fonction prend 4 arguments:

      Le total (la valeur initiale / la valeur précédemment renvoyée)
      La valeur de l'objet
      L'index d'article
      Le tableau lui-même
      L'exemple ci-dessus n'utilise pas les paramètres index et array. Il peut être réécrit pour:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.reduceRight()</h2>
      
      <p>This example finds the sum of all numbers in an array:</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var sum = numbers.reduceRight(myFunction);
      
      document.getElementById("demo").innerHTML = "The sum is " + sum;
      
      function myFunction(total, value) {
          return total + value;
      }
      </script>
      
      </body>
      </html>
      


      Array.every ()
      La méthode every () vérifie si toutes les valeurs du tableau passent un test.

      Cet exemple vérifie si toutes les valeurs de tableau sont supérieures à 18:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.every()</h2>
      
      <p>The every() method checks if all array values pass a test.</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var allOver18 = numbers.every(myFunction);
      
      document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
      
      function myFunction(value, index, array) {
          return value > 18;
      }
      </script>
      
      </body>
      </html>
      
      Notez que la fonction prend 3 arguments:

      • La valeur de l'objet
      • L'index d'article
      • Le tableau lui-même
      Lorsqu'une fonction de rappel utilise uniquement le premier paramètre (valeur), les autres paramètres peuvent être omis:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.every()</h2>
      
      <p>The every() method checks if all array values pass a test.</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var allOver18 = numbers.every(myFunction);
      
      document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
      
      function myFunction(value) {
          return value > 18;
      }
      </script>
      
      </body>
      </html>
      
      Array.every () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.

      upload_2018-11-6_16-4-24.png

      Array.some ()
      La méthode some () vérifie si certaines valeurs de tableau passent un test.

      Cet exemple vérifie si certaines valeurs de tableau sont supérieures à 18:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.some()</h2>
      
      <p>The some() method checks if some array values pass a test.</p>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [45, 4, 9, 16, 25];
      var allOver18 = numbers.some(myFunction);
      
      document.getElementById("demo").innerHTML = "Some over 18 is " + allOver18;
      
      function myFunction(value, index, array) {
          return value > 18;
      }
      </script>
      
      </body>
      </html>
      
      Notez que la fonction prend 3 arguments:

      • La valeur de l'objet
      • L'index d'article
      • Le tableau lui-même
      Array.some () est pris en charge par tous les navigateurs sauf Internet Explorer 8 ou une version antérieure.
      upload_2018-11-6_16-5-18.png



      Array.indexOf ()
      Recherchez dans un tableau une valeur d'élément et retourne sa position.

      Remarque: le premier élément a la position 0, le deuxième élément a la position 1, etc.

      Exemple
      Rechercher un tableau pour l'élément "Apple":
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.indexOf()</h2>
      
      
      <p id="demo"></p>
      
      <script>
      var fruits = ["Apple", "Orange", "Apple", "Mango"];
      var a = fruits.indexOf("Apple");
      document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
      </script>
      
      <p>The indexOf() does not work in Internet Explorer 8 and earlier versions.</p>
      
      </body>
      </html>
      
      Syntaxe:
      Code:
      array.indexOf(item, start)
      
      • item: requis. L'élément à rechercher.
      • start: facultatif. Où commencer la recherche. Les valeurs négatives commenceront à la position donnée en comptant à partir de la fin et rechercheront jusqu'à la fin.


      array.indexOf () renvoie -1 si l'élément n'est pas trouvé.
      Si l'élément est présent plusieurs fois, il renvoie la position de la première occurrence.


      Array.lastIndexOf ()
      Array.lastIndexOf () est identique à Array.indexOf (), mais effectue une recherche à partir de la fin du tableau.

      Exemple
      Rechercher un tableau pour l'élément "Apple":
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> JavaScript Array.lastIndexOf () </ h2>
      
      
      <p id = "demo"> </ p>
      
      <script>
      var fruits = ["pomme", "orange", "pomme", "mangue"];
      var a = fruits.lastIndexOf ("Apple");
      document.getElementById ("demo"). innerHTML = "Apple se trouve en position" + (a + 1);
      [CODE]array.lastIndexOf(item, start)
      
      </ script>

      <p> lastIndexOf () ne fonctionne pas dans Internet Explorer 8 et les versions antérieures. </ p>

      </ body>
      </ html>[/CODE]

      Syntaxe:
      Code:
      array.lastIndexOf(item, start)
      


      Array.find ()
      La méthode find () renvoie la valeur du premier élément de tableau qui passe une fonction de test.

      Cet exemple trouve (retourne la valeur de) le premier élément supérieur à 18:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.find()</h2>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [4, 9, 16, 25, 29];
      var first = numbers.find(myFunction);
      
      document.getElementById("demo").innerHTML = "First number over 18 is " + first;
      
      function myFunction(value, index, array) {
          return value > 18;
      }
      </script>
      
      </body>
      </html>
      
      Notez que la fonction prend 3 arguments:

      La valeur de l'objet
      L'index d'article
      Le tableau lui-même


      Array.find () n'est pas pris en charge par les anciens navigateurs. Les premières versions de navigateur avec prise en charge complète sont répertoriées ci-dessous.
      upload_2018-11-6_16-9-45.png




      Array.findIndex ()
      La méthode findIndex () renvoie l'index du premier élément de tableau qui passe une fonction de test.

      Cet exemple trouve l'index du premier élément supérieur à 18:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array.findIndex()</h2>
      
      <p id="demo"></p>
      
      <script>
      var numbers = [4, 9, 16, 25, 29];
      var first = numbers.findIndex(myFunction);
      
      document.getElementById("demo").innerHTML = "First number over 18 has index " + first;
      
      function myFunction(value, index, array) {
          return value > 18;
      }
      </script>
      
      </body>
      </html>
      
      Notez que la fonction prend 3 arguments:

      La valeur de l'objet
      L'index d'article
      Le tableau lui-même
      Array.findIndex () n'est pas pris en charge par les anciens navigateurs. Les premières versions de navigateur avec prise en charge complète sont répertoriées ci-dessous.
      upload_2018-11-6_16-10-51.png
       
      Related Threads
      Loading...

Share This Page