Blog • code, js

Comment trier un tableau d'objets par valeur en JavaScript ?

Trier un tableau en Javascript est simple, mais que se passe-t-il quand on a un tableau d'objets ? Cela rend les choses un peu plus complexes.

Publié le 7 août 2022 2 min de lecture

Trier un tableau en Javascript est simple, mais que se passe-t-il quand on a un tableau d'objets ?

Ça rend les choses un peu plus complexes.

Heureusement, Javascript vient avec la méthode .sort à laquelle on peut passer une fonction de tri.

Voyons comment trier un tableau d'objets par valeur en javascript.

TABLEAU_D_OBJETS.sort((a, b) => a.CLE_DE_LA_PROPRIETE - b.CLE_DE_LA_PROPRIETE);

Trier un tableau d'objets par valeur

Prennons un tableau d'objets contenant une famille.

const famille = [
  { prenom: "Martin", nom: "Hollande", age: 38 },
  { prenom: "Jean", nom: "Dumarais", age: 23 },
  { prenom: "Ophélie", nom: "Dubois", age: 43 },
  { prenom: "François", nom: "Barbier", age: 34 },
];

Pour trier cette liste de manière ordonnée par âge, du plus jeune au plus vieux on peut utiliser une méthode intégrée à Array appelée sort().

famille.sort((a, b) => (a.age > b.age ? 1 : -1));

Notre fonction dans sort va comparer un élément avec un autre. Dans ce cas, elle va voir si a est plus grand que b. Cet exemple va ordonner le tableau par ordre croissant avec l'âge le plus jeune en première position du tableau et la personne la plus agée en dernière position .

En affichant notre array d'objet "famille", on va avoir quelque chose comme ça :

console.log(famille);

// [
//   { prenom: "Jean", nom: "Dumarais", age: 23 },
//   { prenom: "François", nom: "Barbier", age: 34 },
//   { prenom: "Martin", nom: "Hollande", age: 38 },
//   { prenom: "Ophélie", nom: "Dubois", age: 43 },
// ]

Pour inverser l'ordre et le rendre décroissant, il suffit d'inverser la condition :

famille.sort((a, b) => (a.age < b.age ? 1 : -1));

On a maintenant, la personne âgée à l'indice 0 !

Aller plus loin avec la méthode sort en JavaScript

Bravo, vous savez maintenant utiliser la méthode sort sur des tableaux d'objets.

Pour aller plus loin, vous pouvez consulter la documentation mdn sur sort.

En lien avec cet article

Cours JavaScript débutant

Rendez vos pages interactives : variables, conditions, fonctions, boucles et événements. Vous ajoutez l'interactivité à votre portfolio, sans rien installer.

Bases du langageManipulation du DOMÉvénements
Voir le cours
Thomas Collart

Thomas Collart, développeur et formateur depuis plus de 20 ans. J'ai formé 3 700 étudiants à travers mes formations en ligne, cumule plus de 2 700 000 vues et 56 700 abonnés sur YouTube, TikTok et Instagram.