Exam-Lib: Tableaux de tri 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 de tri JavaScript

abdelouafiNov 6, 2018

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      728
      Likes Received:
      14
      Trophy Points:
      38
      Joined
      Sep 13, 2016
      Tri d'un tableau
      La méthode sort () trie un tableau par ordre alphabétique:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Tri des tableaux JavaScript </ h2>
      
      <p> La méthode sort () trie un tableau par ordre alphabétique. </ 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.sort ();
           document.getElementById ("demo"). innerHTML = fruits;
      }
      </ script>
      
      </ body>
      </ html>

      Inverser un tableau
      La méthode reverse () inverse les éléments d'un tableau.

      Vous pouvez l'utiliser pour trier un tableau par ordre décroissant:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Inverser le tri des tableaux JavaScript </ h2>
      
      <p> La méthode reverse () inverse les éléments d'un tableau. </ p>
      <p> En combinant sort () et reverse (), vous pouvez trier un tableau par ordre décroissant. </ p>
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo"> </ p>
      
      <script>
      // Crée et affiche un tableau:
      var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
      document.getElementById ("demo"). innerHTML = fruits;
      
      function maFonction () {
           // commence par trier le tableau
           fruits.sort ();
           // Puis l'inverser:
           fruits.reverse ();
           document.getElementById ("demo"). innerHTML = fruits;
      }
      </ script>
      
      </ body>
      </ html>
      


      Tri numérique
      Par défaut, la fonction sort () trie les valeurs sous forme de chaînes.

      Cela fonctionne bien pour les chaînes ("Apple" vient avant "Banana").

      Toutefois, si les nombres sont triés sous forme de chaînes, "25" est supérieur à "100", car "2" est supérieur à "1".

      Pour cette raison, la méthode sort () produira un résultat incorrect lors du tri des nombres.

      Vous pouvez résoudre ce problème en fournissant une fonction de comparaison:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Tri des tableaux JavaScript </ h2>
      
      <p> Cliquez sur le bouton pour trier le tableau par ordre croissant. </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo"> </ p>
      
      <script>
      points var = [40, 100, 1, 5, 25, 10];
      document.getElementById ("demo"). innerHTML = points;
      
      function maFonction () {
           points.sort (fonction (a, b) {retour a - b});
           document.getElementById ("demo"). innerHTML = points;
      }
      </ script>
      
      </ body>
      </ html>

      Utilisez la même astuce pour trier un tableau par ordre décroissant:

      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Tri des tableaux JavaScript </ h2>
      
      <p> Cliquez sur le bouton pour trier le tableau par ordre décroissant. </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo"> </ p>
      
      <script>
      points var = [40, 100, 1, 5, 25, 10];
      document.getElementById ("demo"). innerHTML = points;
      
      function maFonction () {
           points.sort (fonction (a, b) {retour b - a});
           document.getElementById ("demo"). innerHTML = points;
      }
      </ script>
      
      </ body>
      </ html>


      La fonction de comparaison
      Le but de la fonction de comparaison est de définir un ordre de tri alternatif.

      La fonction de comparaison doit renvoyer une valeur négative, nulle ou positive en fonction des arguments:
      Code:
      function(a, b){return a-b}
      

      Lorsque la fonction sort () compare deux valeurs, elle envoie les valeurs à la fonction de comparaison et trie les valeurs en fonction de la valeur renvoyée (négative, nulle, positive).

      Exemple:

      Lors de la comparaison entre 40 et 100, la méthode sort () appelle la fonction de comparaison (40,100).

      La fonction calcule 40-100 et renvoie -60 (une valeur négative).

      La fonction de tri va trier 40 avec une valeur inférieure à 100.

      Vous pouvez utiliser cet extrait de code pour expérimenter le tri numérique et alphabétique:
      Code:
      <button onclick="myFunction1()">Sort Alphabetically</button>
      <button onclick="myFunction2()">Sort Numerically</button>
      
      <p id="demo"></p>
      
      <script>
      var points = [40, 100, 1, 5, 25, 10];
      document.getElementById("demo").innerHTML = points;
      
      function myFunction1() {
          points.sort();
          document.getElementById("demo").innerHTML = points;
      }
      function myFunction2() {
          points.sort(function(a, b){return a - b});
          document.getElementById("demo").innerHTML = points;
      }
      </script>
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Sort</h2>
      
      <p>Click the buttons to sort the array alphabetically or numerically.</p>
      
      <button onclick="myFunction1()">Sort Alphabetically</button>
      <button onclick="myFunction2()">Sort Numerically</button>
      
      <p id="demo"></p>
      
      <script>
      var points = [40, 100, 1, 5, 25, 10];
      document.getElementById("demo").innerHTML = points;   
      
      function myFunction1() {
          points.sort();
          document.getElementById("demo").innerHTML = points;
      }
      function myFunction2() {
          points.sort(function(a, b){return a - b});
          document.getElementById("demo").innerHTML = points;
      }
      </script>
      
      </body>
      </html>
      



      Tri d'un tableau dans un ordre aléatoire
      Exemple
      Code:
      <! DOCTYPE html>
      <html>
      <body>
      
      <h2> Tri des tableaux JavaScript </ h2>
      
      <p> Cliquez sur le bouton (encore et encore) pour trier le tableau dans un ordre aléatoire. </ p>
      
      <button onclick = "myFunction ()"> Essayez-le </ button>
      
      <p id = "demo"> </ p>
      
      <script>
      points var = [40, 100, 1, 5, 25, 10];
      document.getElementById ("demo"). innerHTML = points;
      
      function maFonction () {
           points.sort (fonction (a, b) {return 0.5 - Math.random ()});
           document.getElementById ("demo"). innerHTML = points;
      }
      </ script>
      
      </ body>
      </ html>



      Trouver la valeur de tableau la plus élevée (ou la plus basse)
      Il n'y a pas de fonctions intégrées pour trouver la valeur max ou min dans un tableau.

      Cependant, après avoir trié un tableau, vous pouvez utiliser l'index pour obtenir les valeurs les plus élevées et les plus basses.

      Tri croissant:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Sort</h2>
      
      <p>The lowest number is <span id="demo"></span>.</p>
      
      <script>
      var points = [40, 100, 1, 5, 25, 10];
      points.sort(function(a, b){return a-b});
      document.getElementById("demo").innerHTML = points[0];
      </script>
      
      </body>
      </html>
      
      


      Tri décroissant:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Sort</h2>
      
      <p>The highest number is <span id="demo"></span>.</p>
      
      <script>
      var points = [40, 100, 1, 5, 25, 10];
      points.sort(function(a, b){return b-a});
      document.getElementById("demo").innerHTML = points[0];
      </script>
      
      </body>
      </html>
      
      
      Le tri de tout un tableau est une méthode très inefficace si vous souhaitez uniquement rechercher la valeur la plus élevée (ou la plus faible).



      Utilisation de Math.max () sur un tableau
      Vous pouvez utiliser Math.max.apply pour trouver le nombre le plus élevé dans un tableau:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Sort</h2>
      
      <p>The highest number is <span id="demo"></span>.</p>
      
      <script>
      var points = [40, 100, 1, 5, 25, 10];
      document.getElementById("demo").innerHTML = myArrayMax(points);
      
      function myArrayMax(arr) {
          return Math.max.apply(null, arr);
      }
      </script>
      
      </body>
      </html>
      
      

      Math.max.apply ([1, 2, 3]) équivaut à Math.max (1, 2, 3).

      Utilisation de Math.min () sur un tableau
      Vous pouvez utiliser Math.min.apply pour trouver le plus petit nombre dans un tableau:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Sort</h2>
      
      <p>The lowest number is <span id="demo"></span>.</p>
      
      <script>
      var points = [40, 100, 1, 5, 25, 10];
      document.getElementById("demo").innerHTML = myArrayMin(points);
      
      function myArrayMin(arr) {
          return Math.min.apply(null, arr);
      }
      </script>
      
      </body>
      </html>
      
      



      Math.min.apply ([1, 2, 3]) équivaut à Math.min (1, 2, 3).

      Mes méthodes JavaScript Min / Max
      La solution la plus rapide consiste à utiliser une méthode "maison".

      Cette fonction parcourt un tableau en comparant chaque valeur avec la valeur la plus élevée trouvée:

      Exemple (Trouver Max)
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Sort</h2>
      
      <p>The highest number is <span id="demo"></span>.</p>
      
      <script>
      var points = [40, 100, 1, 5, 25, 10];
      document.getElementById("demo").innerHTML = myArrayMax(points);
      
      function myArrayMax(arr) {
          var len = arr.length;
          var max = -Infinity;
          while (len--) {
            if (arr[len] > max) {
              max = arr[len];
            }
          }
          return max;
      }
      </script>
      
      </body>
      </html>
      
      



      Cette fonction parcourt un tableau en comparant chaque valeur avec la valeur la plus basse trouvée:

      Exemple (Trouver Min)
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Sort</h2>
      
      <p>The lowest number is <span id="demo"></span>.</p>
      
      <script>
      var points = [40, 100, 1, 5, 25, 10];
      document.getElementById("demo").innerHTML = myArrayMin(points);
      
      function myArrayMin(arr) {
          var len = arr.length;
          var min = Infinity;
          while (len--) {
            if (arr[len] < min) {
              min = arr[len];
            }
          }
          return min;
      }
      </script>
      
      </body>
      </html>
      
      



      Tri des tableaux d'objets
      Les tableaux JavaScript contiennent souvent des objets:

      Exemple
      Code:
      var cars = [
      {type:"Volvo", year:2016},
      {type:"Saab", year:2001},
      {type:"BMW", year:2010}];
      Même si les objets ont des propriétés de types de données différents, la méthode sort () peut être utilisée pour trier le tableau.

      La solution consiste à écrire une fonction de comparaison pour comparer les valeurs de propriété:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Sort</h2>
      
      <p>Click the buttons to sort car objects on age.</p>
      
      <button onclick="myFunction()">Sort</button>
      
      <p id="demo"></p>
      
      <script>
      var cars = [
      {type:"Volvo", year:2016},
      {type:"Saab", year:2001},
      {type:"BMW", year:2010}]
      
      displayCars();
      
      function myFunction() {
          cars.sort(function(a, b){return a.year - b.year});
          displayCars();
      }
      
      function displayCars() {
        document.getElementById("demo").innerHTML =
        cars[0].type + " " + cars[0].year + "<br>" +
        cars[1].type + " " + cars[1].year + "<br>" +
        cars[2].type + " " + cars[2].year;
      }
      </script>
      
      </body>
      </html>
      

      La comparaison des propriétés de chaîne est un peu plus complexe:

      Exemple
      Code:
      <!DOCTYPE html>
      <html>
      <body>
      
      <h2>JavaScript Array Sort</h2>
      
      <p>Click the buttons to sort car objects on type.</p>
      
      <button onclick="myFunction()">Sort</button>
      
      <p id="demo"></p>
      
      <script>
      var cars = [
      {type:"Volvo", year:2016},
      {type:"Saab", year:2001},
      {type:"BMW", year:2010}]
      
      displayCars();
      
      function myFunction() {
          cars.sort(function(a, b){
              var x = a.type.toLowerCase();
              var y = b.type.toLowerCase();
              if (x < y) {return -1;}
              if (x > y) {return 1;}
              return 0;
          });
          displayCars();
      }
      
      function displayCars() {
        document.getElementById("demo").innerHTML =
        cars[0].type + " " + cars[0].year + "<br>" +
        cars[1].type + " " + cars[1].year + "<br>" +
        cars[2].type + " " + cars[2].year;
      }
      </script>
      
      </body>
      </html>
      
       
      Related Threads
      Loading...

      Merci de partager ce post sur facebook

    2. Merci d'aimer notre facebook page

Share This Page