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 ?

Ç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.