Trier un tableau d'objets en JavaScript (générateur de comparateur) | We.Inc
Construisez un comparateur en quelques clics : triez des objets par nombre, chaîne, date ou deux clés, avec les options de localeCompare, et voyez le résultat et le code côte à côte.
Trier un tableau d'objets en JavaScript
Passez à sort une fonction de comparaison qui examine la propriété qui vous intéresse. Pour des nombres, renvoyez a.price - b.price. Pour du texte, renvoyez a.name.localeCompare(b.name). Pour des dates, soustrayez les timestamps. Un résultat négatif place a en premier, un résultat positif place b en premier. Utilisez toSorted au lieu de sort quand l'ordre d'origine doit être conservé.
(a, b) => Date.parse(a.joined) - Date.parse(b.joined)
inverser a et b
Booléen (true en premier)
(a, b) => Number(b.active) - Number(a.active)
inverser a et b
Trier des objets piège les développeurs pour trois raisons : le tri par défaut compare tout comme du texte, les majuscules passent avant les minuscules avec une simple comparaison inférieur à, et sort réécrit le tableau que vous lui passez. Le générateur ci-dessous vous permet d'actionner chacun de ces réglages sur une petite liste d'équipe et de voir l'ordre changer, avec le comparateur correspondant prêt à copier.
Choisissez la propriété de tri : nom, âge, date d'arrivée ou un code de ticket mêlant lettres et chiffres.
Choisissez croissant ou décroissant et, pour les clés texte, une comparaison simple ou localeCompare avec l'option numeric.
Ajoutez une seconde clé pour départager les égalités, par exemple l'équipe d'abord, puis le nom.
Copiez le code généré. Le tableau montre l'ordre que produit actuellement votre comparateur.
N'appelez jamais sort() sans fonction sur des nombres ou des objets. Sans comparateur, chaque valeur est convertie en chaîne, si bien que 10 passe avant 9 et que tous les objets deviennent [object Object].
Renvoyez un nombre, pas true ou false. Un résultat booléen est converti en 1 ou 0 et donne un ordre peu fiable.
Vous triez une longue liste avec localeCompare ? Créez un seul Intl.Collator et passez sa méthode compare ; MDN indique que c'est plus rapide pour les grands tableaux.
Placez volontairement en dernier les enregistrements dont une valeur manque, par exemple en testant null avant de soustraire, pour qu'ils ne se dispersent pas dans la liste.
Questions fréquentes
Comment trier un tableau d'objets par propriété ?
Appelez people.sort((a, b) => a.age - b.age) pour une propriété numérique ou people.sort((a, b) => a.name.localeCompare(b.name)) pour une chaîne. Inversez a et b pour changer le sens.
Comment trier sur deux champs ?
Comparez le premier champ et ne passez au second qu'en cas d'égalité sur le premier : (a, b) => a.team.localeCompare(b.team) || a.age - b.age. Le || fonctionne car une égalité renvoie 0, qui compte comme faux.
Le tri JavaScript est-il stable ?
Oui. Depuis ECMAScript 2019, sort doit être stable, donc les éléments considérés comme égaux gardent leur ordre précédent. C'est pourquoi trier d'abord par nom puis par équipe donne une liste groupée par équipe avec les noms dans l'ordre au sein de chaque groupe.
sort modifie-t-il le tableau d'origine ?
Oui. sort réordonne le tableau sur place et renvoie ce même tableau. toSorted prend la même fonction de comparaison mais renvoie un nouveau tableau et laisse l'ordre d'origine intact. Il est disponible dans les principaux navigateurs depuis juillet 2023.
Pourquoi les noms en minuscules sont-ils triés après ceux en majuscules ?
Une simple comparaison < ou > compare les codes de caractères, et chaque majuscule a un code inférieur à celui de chaque minuscule. localeCompare suit plutôt l'alphabet de la langue et, avec { sensitivity: 'base' }, considère aussi accents et casse comme équivalents.
Ce que renvoie réellement la fonction de comparaison
sort ne regarde que le signe du nombre renvoyé. En dessous de zéro, a passe avant b ; au-dessus de zéro, b passe en premier ; et zéro signifie les laisser tels quels. La taille du nombre n'a pas d'importance, c'est pourquoi la soustraction fonctionne pour les nombres et les dates.
La soustraction ne fonctionne pas pour le texte, puisque 'b' - 'a' vaut NaN. localeCompare renvoie un nombre négatif, nul ou positif pour les chaînes, il s'insère donc directement dans le même schéma.
Dates, valeurs manquantes et types mélangés
La soustraction d'objets Date donne un nombre de millisecondes, donc a.joined - b.joined trie du plus ancien au plus récent. Les dates stockées en texte au format ISO (2026-10-14) se trient aussi correctement avec localeCompare, car l'année vient en premier, mais d'autres formats comme 14/10/2026 non.
Les éléments undefined sont toujours déplacés à la fin et ne sont jamais passés à votre fonction. Une propriété undefined sur un objet, c'est différent : l'objet atteint quand même votre comparateur, vérifiez donc ce cas vous-même.
Pourquoi sort() sans argument trie mal les nombres
Sans fonction de comparaison, chaque élément est converti en chaîne et comparé par unités de code UTF-16, donc le premier caractère l'emporte.
Ordre par défaut contre comparateur numérique
Le tri par défaut place 100 avant 25 car le texte '1' vient avant '2'.
Tris multi-clés, sensibles à la langue et sans mutation
Équipe de A à Z, puis du plus ancien, sans toucher à l'original
La chaîne de || ne passe à la clé suivante que si la comparaison précédente vaut 0. toSorted renvoie un nouveau tableau.
Un seul Intl.Collator pour une longue liste
numeric: true place T-2 avant T-10, et sensitivity: 'base' ignore la casse et les accents.
Un helper sortBy réutilisable
Passez les noms des clés dans l'ordre. Un signe moins devant une clé la trie par ordre décroissant.
Générateur de comparateur
Choisissez comment trier la liste d'équipe d'exemple : le tableau et le code se mettent à jour ensemble.
Trier par
Puis par (départage)
Rien
Sens
Croissant
Décroissant
Comparaison de texte
Simples < et >
localeCompare
localeCompare, numérique et insensible à la casse
Liste d'exemple utilisée par le générateur de comparateur (ordre d'origine)