Tri de tableau d'objets par chaîne : 5 méthodes pour JavaScript

Tri d'un tableau d'objets par propriété de type chaîne : décryptage d'une question populaire sur Stack Overflow

Imaginez : vous avez une liste d'utilisateurs, de produits ou d'articles. Chaque élément est un objet avec une multitude de propriétés : nom, prix, date, note. Et vous devez trier le tout, par exemple, par nom de famille dans l'ordre alphabétique. Une tâche qui semble simple, mais qui réserve des surprises en pratique. Il n'est pas étonnant que la question "Sort array of objects by string property value" sur Stack Overflow ait accumulé des milliers de vues et des dizaines de réponses.

Dans cet article, nous ne nous contenterons pas de donner du code prêt à l'emploi. Nous allons analyser 5 méthodes de tri, de la plus basique à la plus avancée, identifier les pièges typiques et montrer comment les éviter. À la fin, vous serez capable de trier n'importe quelles données sans effort.

Qu'est-ce que le tri d'un tableau d'objets en JavaScript ?

En JavaScript, il existe une méthode intégrée Array.prototype.sort(). Mais avec les objets, son fonctionnement n'est pas évident. Si vous appelez sort() sans arguments, il tentera de comparer les éléments comme des chaînes de caractères. Pour les nombres, cela réserve une surprise : [1, 20, 3].sort() renverra [1, 20, 3], et non [1, 3, 20]. Pour les objets, c'est le chaos total.

C'est pourquoi nous avons besoin d'une fonction de comparaison (comparateur). Elle prend deux éléments et renvoie :

\n
• un nombre négatif si le premier élément est inférieur au second ;
\n
• 0 s'ils sont égaux ;
\n
• un nombre positif si le premier est supérieur.
\n

Voici la structure de base pour trier un tableau d'objets par une propriété de type chaîne :

// Tableau initial\nconst users = [\n    { name: 'Иван', age: 25 },\n    { name: 'Анна', age: 30 },\n    { name: 'Борис', age: 22 }\n];\n\n// Tri par le champ name\nusers.sort((a, b) => {\n    if (a.name < b.name) return -1;\n    if (a.name > b.name) return 1;\n    return 0;\n});\n\nconsole.log(users);\n// [{ name: 'Анна', age: 30 }, { name: 'Борис', age: 22 }, { name: 'Иван', age: 25 }]

Ce code fonctionne, mais il est lourd. Voyons comment le rendre plus élégant.

5 méthodes pour trier un tableau d'objets par chaîne

Méthode 1 : Fonction de comparaison classique

La méthode la plus transparente. Convient pour toutes les chaînes, y compris le cyrillique, à condition d'utiliser l'ordre alphabétique correct. La comparaison avec < et > tient compte des codes de caractères en Unicode, ce qui, pour le russe, donne un résultat inattendu : « ё » se retrouvera à la fin de l'alphabet, et « я » près de « а ».

const products = [\n    { title: 'Яблоко', price: 50 },\n    { title: 'Ёлка', price: 200 },\n    { title: 'Ананас', price: 150 }\n];\n\n// Problème : 'Ёлка' se placera après 'Яблоко'\nproducts.sort((a, b) => {\n    if (a.title < b.title) return -1;\n    if (a.title > b.title) return 1;\n    return 0;\n});

Quand l'utiliser : pour les chaînes en anglais, où l'ordre alphabétique correspond à l'Unicode.

Méthode 2 : localeCompare — le sauveur du cyrillique

La méthode String.prototype.localeCompare() prend en compte les règles de tri pour une langue spécifique. Pour le russe, on passe 'ru'.

users.sort((a, b) => a.name.localeCompare(b.name, 'ru'));\n\nconsole.log(users);\n// [{ name: 'Анна', age: 30 }, { name: 'Борис', age: 22 }, { name: 'Иван', age: 25 }]

Ce code est plus propre, plus court et traite correctement « ё », « й » et d'autres lettres. Si vous devez trier par ordre décroissant, il suffit d'inverser a et b :

users.sort((a, b) => b.name.localeCompare(a.name, 'ru'));

Quand l'utiliser : toujours lorsque vous travaillez avec du cyrillique ou des données multilingues.

Méthode 3 : Tri sensible à la casse

Par défaut, localeCompare est sensible à la casse : « apple » se placera avant « Banana », car la lettre minuscule a ```