Trier le tableau d'objets par propriété en JavaScript

Cet article explique comment trier un tableau d’objets en fonction des valeurs des propriétés de l’objet.

En JavaScript, nous utilisons la fonction sort() pour trier un tableau d’objets. La fonction sort() permet de trier les éléments d’un tableau par ordre alphabétique et non numérique. Pour obtenir les éléments dans l’ordre inverse, nous pouvons utiliser la méthode reverse().

Cependant, la fonction traditionnelle sort() peut parfois prendre du retard pour comparer un tableau d’objets basé sur une propriété. Nous pouvons donc créer une fonction de comparaison définie par l’utilisateur à utiliser avec la fonction sort(). Cette méthode compare les propriétés des éléments d’un tableau.

L’exemple ci-dessous montre comment écrire votre propre fonction de comparaison.

let students = [
  {fname: 'Rohan', lname: 'Dalal', age: 19},

  {fname: 'Zain', lname: 'Ahmed', age: 17},

  {fname: 'Anadi', lname: 'Malhotra', age: 19}
];


function compare_lname(a, b) {
  if (a.lname.toLowerCase() < b.lname.toLowerCase()) {
    return -1;
  }
  if (a.lname.toLowerCase() > b.lname.toLowerCase()) {
    return 1;
  }
  return 0;
}

students.sort(compare_lname);
console.log(students)

Production:

[
  { fname: 'Zain', lname: 'Ahmed', age: 17 },
  { fname: 'Rohan', lname: 'Dalal', age: 19 },
  { fname: 'Anadi', lname: 'Malhotra', age: 19 }
]

Dans l’exemple ci-dessus, convertissez d’abord le lname en minuscules, puis nous comparons les noms en fonction de la comparaison de chaînes. Il renvoie le tableau trié des objets en fonction du lname de l’objet. Par ordre décroissant, on peut remplacer la fonction sort() par reverse().

Si nous avons affaire à des chaînes, nous pouvons éliminer le besoin de créer une fonction de comparaison et utiliser simplement la fonction localeCompare() avec la fonction sort() pour obtenir le résultat souhaité.

Voir le code ci-dessous.

let students = [
  {fname: 'Rohan', lname: 'Dalal', age: 19},

  {fname: 'Zain', lname: 'Ahmed', age: 21},

  {fname: 'Anadi', lname: 'Malhotra', age: 16}
];


students.sort((a, b) => a.lname.localeCompare(b.lname));
console.log(students);

Production:

[
  { fname: 'Zain', lname: 'Ahmed', age: 21 },
  { fname: 'Rohan', lname: 'Dalal', age: 19 },
  { fname: 'Anadi', lname: 'Malhotra', age: 16 }
]

Le localeCompare() ne fonctionne que pour les chaînes. Nous ne pouvons pas l’utiliser pour les nombres.

Pour obtenir le tableau trié basé sur une propriété numérique, nous devons fournir une fonction de comparaison dans la méthode sort() car la méthode de tri ne fonctionne normalement pas non plus avec les nombres.

Voir le code ci-dessous.

let students = [
  {fname: 'Rohan', lname: 'Dalal', age: 19},

  {fname: 'Zain', lname: 'Ahmed', age: 21},

  {fname: 'Anadi', lname: 'Malhotra', age: 16}
];

students.sort((a, b) => {
  return a.age - b.age;
});
console.log(students);

L’exemple ci-dessus compare l’âge des objets et les trie en fonction de cet âge. La fonction de comparaison n’est qu’une seule ligne, elle est donc fournie directement avec la méthode sort(). Pour tout obtenir dans l’ordre décroissant, utilisez la fonction reverse().

Alternativement, nous pouvons également décaler l’ordre dans la fonction de comparaison pour obtenir la sortie finale par ordre décroissant.

Par exemple,

let students = [
  {fname: 'Rohan', lname: 'Dalal', age: 19},

  {fname: 'Zain', lname: 'Ahmed', age: 21},

  {fname: 'Anadi', lname: 'Malhotra', age: 16}
];

students.sort((a, b) => {
  return b.age - a.age;
});
console.log(students);

Production:

[
  { fname: 'Zain', lname: 'Ahmed', age: 21 },
  { fname: 'Rohan', lname: 'Dalal', age: 19 },
  { fname: 'Anadi', lname: 'Malhotra', age: 16 }
]