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

Pour trier un tableau d’objets selon l’une de leurs propriétés, transmettez un comparateur à sort(). Celui-ci lit cette propriété dans deux objets et renvoie un nombre négatif si le premier doit venir avant le second, un nombre positif s’il doit venir après, ou zéro si leurs clés sont égales. Utilisez une comparaison de chaînes pour les clés textuelles et une soustraction pour les clés numériques.

Trier un tableau d’objets selon une propriété textuelle

Un comparateur peut normaliser deux chaînes avant de les comparer. L’exemple ne tient ainsi pas compte de la casse, tout en conservant dans les objets chaque valeur lastName d’origine.

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const students = [
  { firstName: 'Rohan', lastName: 'Dalal', age: 19 },
  { firstName: 'Zain', lastName: 'Ahmed', age: 17 },
  { firstName: 'Anadi', lastName: 'Malhotra', age: 19 }
];

students.sort((a, b) => {
  const left = a.lastName.toLowerCase();
  const right = b.lastName.toLowerCase();
  if (left < right) return -1;
  if (left > right) return 1;
  return 0;
});

console.log(students.map(student => student.lastName).join(', '));

Ahmed, Dalal, Malhotra

Le comparateur renvoie le signal de tri dont sort() a besoin : il n’est pas nécessaire de renvoyer exactement -1 ou 1, mais seulement une valeur négative, zéro ou une valeur positive. La conversion en minuscules est utile lorsque la casse ne doit pas influer sur l’ordre. Elle ne modifie pas les noms stockés, car toLowerCase() renvoie une nouvelle chaîne.

Trier des chaînes avec localeCompare()

Pour les propriétés textuelles, localeCompare() fournit un comparateur concis qui tient compte des règles de classement propres à la langue. La méthode renvoie un nombre négatif, zéro ou un nombre positif ; elle s’utilise donc directement avec sort() :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const students = [
  { firstName: 'Rohan', lastName: 'Dalal', age: 19 },
  { firstName: 'Zain', lastName: 'Ahmed', age: 21 },
  { firstName: 'Anadi', lastName: 'Malhotra', age: 16 }
];

students.sort((a, b) => a.lastName.localeCompare(b.lastName));
console.log(students.map(student => student.lastName).join(', '));

Ahmed, Dalal, Malhotra

Choisissez cette méthode lorsque la clé est du texte et qu’une comparaison adaptée à la langue est pertinente. localeCompare() compare des chaînes ; ce n’est pas une méthode de tri numérique. Pour choisir explicitement une langue ou des options, comme la sensibilité à la casse, transmettez à localeCompare() la langue et les options prises en charge par l’environnement d’exécution.

Trier selon une propriété numérique

Soustrayez la clé numérique du deuxième objet de celle du premier. Si le premier âge est inférieur au second, a.age - b.age est négatif, ce qui place a avant b dans l’ordre croissant.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const students = [
  { firstName: 'Rohan', lastName: 'Dalal', age: 19 },
  { firstName: 'Zain', lastName: 'Ahmed', age: 21 },
  { firstName: 'Anadi', lastName: 'Malhotra', age: 16 }
];

students.sort((a, b) => a.age - b.age);
console.log(students.map(student => student.age).join(', '));

16, 19, 21

Cette méthode par soustraction s’applique aux valeurs numériques. Ne l’utilisez pas pour des noms : soustraire des chaînes ne permet pas d’exprimer leur ordre alphabétique. De même, appeler sort() sans comparateur ne lui fait pas examiner une propriété des objets : par défaut, la méthode compare les représentations sous forme de chaîne des éléments du tableau. Il faut donc généralement fournir un comparateur explicite pour trier des objets.

Trier dans l’ordre décroissant

Inversez les opérandes du comparateur pour inverser l’ordre obtenu. Pour des âges numériques, b.age - a.age place les âges les plus élevés en premier. La règle de comparaison reste ainsi liée à la propriété choisie, sans devoir trier dans un sens puis inverser le tableau obtenu.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const students = [
  { firstName: 'Rohan', lastName: 'Dalal', age: 19 },
  { firstName: 'Zain', lastName: 'Ahmed', age: 21 },
  { firstName: 'Anadi', lastName: 'Malhotra', age: 16 }
];

students.sort((a, b) => b.age - a.age);
console.log(students.map(student => student.age).join(', '));

21, 19, 16

Pour trier des chaînes dans l’ordre décroissant, inversez le résultat du comparateur de chaînes, par exemple en niant a.lastName.localeCompare(b.lastName). Veillez à conserver un comparateur cohérent afin que des clés égales renvoient toujours zéro.

Comportement et limites importants de sort()

sort() modifie le tableau en place et renvoie ce même tableau. Si vous devez conserver l’ordre d’origine, copiez d’abord le tableau avec const sortedStudents = [...students], puis triez la copie. Les objets eux-mêmes ne sont pas clonés : le tri change leur position dans le tableau, pas leurs propriétés.

Sans comparateur, sort() convertit les valeurs en chaînes et compare ces chaînes. Le tri par défaut ne convient donc ni à l’ordre numérique ni au choix d’une propriété d’objet. Fournissez un comparateur adapté au type de la clé. Ces exemples supposent que chaque objet possède la propriété textuelle ou numérique indiquée. Ils ne définissent pas de règle pour les clés manquantes ou les types mélangés : validez ces données ou décidez comment comparer ces valeurs avant d’appliquer le comparateur.

Pour consulter la documentation de l’API du tableau, voir la référence de la méthode sort().