sort

Tri d'un tableau de chaînes de caractères

On peut trier avec sort() (sort, mot anglais, se traduit par trier).

Premier exemple.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Un premier tableau </title>
    </head>
    <body>
    
         
    
        <script>
     
        let fruits = ["banane", "orange", "pomme", "mangue", "abricot", "noisette", "myrtille"];
        document.write("Contenu initial du tableau : "); 
        document.write(fruits);
        document.write('<br>'); // br signifie break line (on passe à la ligne)
        document.write('<hr>'); // horizontal rule : ligne horizontale
        
        
        // tri du tableau 
		fruits.sort();
        
         
        document.write("Contenu du tableau après tri : "); 
        document.write(fruits);
         
        </script>
    </body>
</html>

Un autre exemple.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Un second tableau </title>
    </head>
    <body>
    
         
         
    
         <script>
       
        let fruits = ["Banane", "orange", "pomme", "mangue", "abricot", "noisette", "myrtille"];
        document.write("Contenu initial du tableau : "); 
        document.write(fruits);
        document.write('<br>'); // br signifie break line (on passe à la ligne)
        document.write('<hr>'); // horizontal rule : ligne horizontale
        
        
        // tri du tableau 
		fruits.sort();
        
         
        document.write("Contenu du tableau après tri : "); 
        document.write(fruits);
         
        </script>
    </body>
</html>

On constate que les majuscules précèdent les minuscules, ce qui n'est pas nécessairement ce que l'on veut.

Pour obtenir l'ordre alphabétique :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Un second tableau </title>
    </head>
    <body>
    
         
         
    
         <script>
     
        let fruits = ["Banane", "orange", "pomme", "mangue", "abricot", "noisette", "myrtille"];
        document.write("Contenu initial du tableau : "); 
        document.write(fruits);
        document.write('<br>'); // br signifie break line (on passe à la ligne)
        document.write('<hr>'); // horizontal rule : ligne horizontale
        
        
        // tri du tableau 
		fruits.sort(function(a, b) { return a.localeCompare(b); });
        
         
        document.write("Contenu du tableau après tri : "); 
        document.write(fruits);
         
        </script>
    </body>
</html>

Avec une syntaxe légèrement plus concise :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Un second tableau </title>
    </head>
    <body>
    
         
         
    
         <script>
     
        let fruits = ["Banane", "orange", "pomme", "mangue", "abricot", "noisette", "myrtille"];
        document.write("Contenu initial du tableau : "); 
        document.write(fruits);
        document.write('<br>'); // br signifie break line (on passe à la ligne)
        document.write('<hr>'); // horizontal rule : ligne horizontale
        
        
        // tri du tableau 
		fruits.sort( (a, b) => a.localeCompare(b)   );
        
         
        document.write("Contenu du tableau après tri : "); 
        document.write(fruits);
         
        </script>
    </body>
</html>

Tri d'un tableau de nombres

Trier avec sort() ?

Essayons de trier avec sort() :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> sort() </title>
    </head>
    <body>
     
        <script>
        
        let t = [ 221 ,  5, 2 , 8, 3 , 19, 54, 125, 126, 101, 23];
        document.write("Contenu initial du tableau : "); 
        document.write(t);
        document.write('<br>');  
        document.write('<hr>');  
        
        
        // tri du tableau 
		t.sort();
        
         
        document.write("Contenu du tableau après tri : "); 
        document.write(t);
         
        </script>
    </body>
</html>

On est plutôt déçu ! En fait, on voit que la logique alphanumérique s'applique encore : les nombres commençant par 1 sont en premiers, puis les nombres commençant par 2...

Comment trier ?

De même que l'on pouvait trier en ordre alphabétique sans tenir compte de la casse, on peut trier en ordre croissant des nombres (ou décroissant).

Pour cela, on va donner en paramètre de la fonction sort() une fonction donnant le critère de tri.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> trier suivant un critère </title>
    </head>
    <body>
    
         <script>
        
        let t = [ 221 ,  5, 2 , 8, 3 , 19, 54, 125, 126, 101, 23];
        document.write("Contenu initial du tableau : "); 
        document.write(t);
        document.write('<br>');  
        document.write('<hr>');  
        
        
        // tri du tableau 
		t.sort(function(a,b){ return a-b; });
        
         
        document.write("Contenu du tableau après tri : "); 
        document.write(t);
         
        </script>
    </body>
</html>

Pour comparer a et b, le signe de a-b est déterminé : si a-b < 0 alors a vient avant b, sinon b vient avant a.

Avec la seconde syntaxe :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> trier suivant un critère </title>
    </head>
    <body>
    
         <script>
        
        let t = [ 221 ,  5, 2 , 8, 3 , 19, 54, 125, 126, 101, 23];
        document.write("Contenu initial du tableau : "); 
        document.write(t);
        document.write('<br>');  
        document.write('<hr>');  
        
        
        // tri du tableau 
		t.sort( (a,b) => a-b );
        
         
        document.write("Contenu du tableau après tri : "); 
        document.write(t);
         
        </script>
    </body>
</html>

En ordre décroissant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> trier suivant un critère </title>
    </head>
    <body>
    
         <script>
       
        let t = [ 221 ,  5, 2 , 8, 3 , 19, 54, 125, 126, 101, 23];
        document.write("Contenu initial du tableau : "); 
        document.write(t);
        document.write('<br>');  
        document.write('<hr>');  
        
        
        // tri du tableau 
		t.sort( (a,b) => b-a );
        
         
        document.write("Contenu du tableau après tri : "); 
        document.write(t);
         
        </script>
    </body>
</html>

Tri d'objets plus complexes

Comme on peut préciser le critère de tri en paramètre de sort(), cela permet de faire des tris moins habituels.

On dispose par exemple d'un tableau de tableaux de longueur 2 (représentant par exemple les deux notes de contrôle d'une liste d'élèves). On peut les trier suivant plusieurs critères :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> sort() </title>
    </head>
    <body>
     
        <script>
        
        let t = [  [1,6],  [7,2], [8,5], [9,7],[1, 9],[5,6], [4,7]];
        document.write("Contenu initial du tableau : "); 
        for(let paire of t) {
        	document.write( "[" + paire + "]; " );
        }
        document.write('<br>');  
        document.write('<hr>');  
        
        
        // tri 1 du tableau 
		t.sort( (a,b) => a[0]-b[0] );
        
        document.write("Contenu du tableau après tri par ordre croissant des résultats au premier contrôle : "); 
        for(let paire of t) {
        	document.write( "[" + paire + "]; " );        	
        }
        document.write('<br>');  
        document.write('<hr>');  
        
        
        // tri 2 du tableau 
		t.sort( (a,b) => (a[0]+a[1]) -  (b[0] + b[1])  );
         
        document.write("Contenu du tableau après tri par ordre croissant des sommes des notes (ce qui revient à classer par ordre croissant des moyennes)   : "); 
         for(let paire of t) {
        	document.write( "[" + paire + "]; " );
        }
        document.write('<br>');  
        document.write('<hr>');  
        </script>
    </body>
</html>