Comment trier une liste en JavaScript ?

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 :

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 trie.
L’utilisation d’une fonction permet d’éviter de recopier la même portion de code à de nombreux endroits (Cool !) :

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

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 :

Tada ! Voilà ce que nous retourne la console lorsqu’on lance le trie par age :

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 trie.
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 trie par nom les courageux guerriers se traduit comme suit :

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

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

Trier des chaînes de caractère (String) avec JavaScript

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.

Pour aller plus loin dans le développement JavaScript, je vous conseille un peu de lecture :

Apprendre à développer avec JavaScript (2e édition)

Ce livre sur l’apprentissage du développement avec JavaScript s’adresse à des lecteurs qui souhaitent maîtriser cette brique incontournable des développements Web. En effet, même si des solutions logicielles existent pour contourner la connaissance du langage JavaScript, sa maîtrise est un atout essentiel pour acquérir une expertise dans le domaine des technologies du Web 2.0.

2 Replies to “Comment trier une liste en JavaScript ?”

  1. Quelques améliorations pour deux fonctions :
    function display(i) {
    console.log(i);
    warriors.forEach(function(warrior) {
    console.log(warrior.name +  » a  » + warrior.age +  » ans et est équipé d’un  » + warrior.weapon);
    }
    }

    function sortName() {
    warriors.sort(function(a, b) {
    return a.name.localeCompare(b.name);
    }
    }

    1. Merci Rémi pour cette optimisation de mon code.
      J’aime bien version

Laisser un commentaire