JavaScript : Comment trier une liste ?

Trier le contenu de listes est un exercice courant lorsqu’on développe des applications ou un site web. Aussi, si vous travaillez avec JavaScript, vous serez amené à utiliser la méthode sort() qui permet de trier les éléments d’un tableau. Ceci étant dit, trier des nombres fonctionne très bien avec cette méthode. Mais trier des chaînes de caractères peut vous apporter quelques surprises.

Je vous propose dans ce billet de vous présenter les deux possibilités : trier des nombres (facile) puis trier des chaînes de caractère.

On plante le décor

Avant de pouvoir s’amuser follement à trier en JavaScript, on besoin d’un peu de matière à manipuler. Imaginons un jeux de rôle avec de fiers guerriers caractérisés par un nom, un age et une arme :

var warriors= [
  { name: "Kraken", age: 21, weapon: "arc" },
  { name: "Améria", age: 27, weapon: "fusil" },
  { name: "Narfy", age: 25, weapon: "couteau" },
  { name: "Golïm", age: 17, weapon: "poignard" },
  { name: "Fôrfiot", age: 18, weapon: "lance-flamme" },
  { name: "Joliett", age: 22, weapon: "bazooka" }
];

Nous allons utiliser un affichage du résultat directement sur la console : je vous entends déjà vous esclaffer : “il ne se foule pas trop le gars ;-)”.
Et bien oui, et j’en suis fière.

De toute façon, une fois la méthode comprise, vous pouvez adapter ce script pour répondre à vos souhaits les plus fous…

Bref, revenons à nos lignes de codes : je vous propose d’utiliser une fonction qui aura pour mission d’afficher le résultat du tri.
L’utilisation d’une fonction permet d’éviter de recopier la même portion de code à de nombreux endroits (Cool !) :

function display(i) {
    console.log(i);
    for (i = 0; i < warriors.length; i++) {
        console.log(warriors[i].name + " a " + warriors[i].age + " ans et est équipé d'un " + warriors[i].weapon);
    }
}

Dans le corps de votre page HTML, on va ajouter deux boutons qui permettrons de lancer le tri par age et le tri par nom. A chaque bouton on associe une action qui lance la fonction ad hoc.
Jusque là tout va bien…

<h2>Trier en javaScript</h2> 
<button type="button">Par Prénom</button> 
<button type="button">Par Age</button>

Voyons de plus près ces jolies fonctions :

Trier des nombres

Comme annoncé en début de billet, la méthode sort() fait très bien le boulot et trier l’age de nos valeureux guerriers est un jeux d’enfants :

function sortAge() {
    warriors.sort(function (a, b) {
        return a.age - b.age;
    });
    display(intro);
}

Trier des chaînes de caractères (String)

Trier des chaînes de caractères (String) pose des soucis car le tri s’effectue par défaut selon les points de code Unicode de la chaine de caractères.
Oui mais encore…

Typiquement, cela veut dire que chaque caractère est converti en son code Unicode qui sert à faire le tri.
On peut se retrouver devant un résultat retourner par la machine qui peut laisser perplexe l’être humain que nous sommes : “Cian” sera trié avant “bleu”. Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, “80” arrive avant “9” selon l’ordre Unicode.

Notre fonction qui tri par nom les courageux guerriers se traduit comme suit :

function sortName() {
    warriors.sort(function (a, b) {
        var nameA = a.name.toUpperCase();
        var nameB = b.name.toUpperCase();
        if (nameA < nameB) {
            return -1;
        }
        if (nameA > nameB) {
            return 1;
        }
        return 0;
    });
    display(intro);
}

Pour donner un coup de main à la fonction de tri, on passe par une transformation des lettres en majuscules (tous les mots sont logés à la même enseigne…).

reTada ! Quel beau tri par nom, n’est-ce pas ?

Et voilà le tour est joué !
Alors sautez sur votre éditeur de code préféré pour mettre en application le trie de données en JavaScript.

Cette proposition de solution pour trier des données en JavaScript n’est évidemment pas la seule et unique possibilité. Vous pouvez très bien développer d’autres méthodes ou fonctions pour arriver au même résultat. Comme j’adore échanger, vous pouvez laisser un commentaire ou partager votre avis ou méthode.