Comment trier des données en JavaScript ?

📋 Présentation des méthodes de tri

JavaScript propose plusieurs outils pour trier des tableaux :

• sort() : modifie le tableau directement en place.
• toSorted() : retourne une nouvelle copie triée sans modifier l'original.
• reverse() : inverse directement l'ordre des éléments dans le tableau d'origine.
• toReversed() : crée une version inversée du tableau.

Ces méthodes s'adaptent à des cas variés : nombres, dates, objets ou encore chaînes de caractères. Regardons des exemples pratiques.

🔢 Trier des nombres

La méthode sort() trie par défaut en comparant les éléments comme des chaînes. Cela peut donner des résultats inattendus pour des nombres :

// Mauvais tri (par défaut)
const numbers = [100, 5, 20, 50];
numbers.sort();
console.log(numbers); // ["100", "20", "5", "50"];

// Bon tri (croissant)
numbers.sort((a, b) => a - b);
console.log(numbers); // [5, 20, 50, 100]

Avec toSorted(), vous obtenez une copie triée sans altérer l'original :

const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(sortedNumbers); // [5, 20, 50, 100]
console.log(numbers); // [100, 5, 20, 50] (inchangé)

📅 Trier des dates

Les dates peuvent être triées directement si elles sont des objets Date. Si elles sont au format texte (par exemple, "15/06/2024"), il est nécessaire de les convertir en Date avant le tri.

Dates sous forme d'objets Date

// Tableau d'objets Date
const dates = [
    new Date(2025, 0, 1),
    new Date(2023, 5, 15),
    new Date(2024, 7, 20)
];

// Tri croissant
dates.sort((a, b) => a - b);
console.log(dates);

Dates sous différents formats de chaînes

Si les dates sont sous forme de chaînes comme "DD/MM/YYYY", "YYYY-MM-DD" ou "MM-DD-YYYY", vous pouvez les normaliser avant le tri.

// Tableau de dates en format texte
const dateStrings = ["2023-07-20", "2025-01-01", "2024-06-15"];

// Tri croissant avec conversion directe
dateStrings.sort((a, b) => new Date(a) - new Date(b));
console.log(dateStrings); // ["2023-07-20", "2024-06-15", "2025-01-01"]

// Pour un format personnalisé comme "DD/MM/YYYY"
const customDateStrings = ["15/06/2024", "01/01/2025", "20/07/2023"];
customDateStrings.sort((a, b) => {
    const toDate = str => new Date(str.split('/').reverse().join('-'));
    return toDate(a) - toDate(b);
});
console.log(customDateStrings);

📋 Trier des objets

Pour des tableaux d'objets, il suffit de spécifier la propriété à utiliser pour le tri.

// Tableau d'objets
const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 20 }
];

// Tri par âge
const sortedByAge = users.toSorted((a, b) => a.age - b.age);
console.log(sortedByAge);

// Tri alphabétique par nom
const sortedByName = users.toSorted((a, b) => a.name.localeCompare(b.name));
console.log(sortedByName);

📦 Trier des chaînes de caractères

Le tri alphabétique peut être amélioré avec localeCompare() pour gérer les accents et les règles linguistiques.

// Texte avec accents
const fruits = ["pêche", "abricot", "pomme", "banane"];

// Tri alphabétique
fruits.sort((a, b) => a.localeCompare(b));
console.log(fruits); // ["abricot", "banane", "pêche", "pomme"]

🔄 Inverser un tableau

Pour inverser un tableau vous pouver utiliser la méthode reverse() pour agir directement sur le tableau ou la méthode toReversed() permet d'obtenir une copie inversée d'un tableau, contrairement à reverse(), qui modifie le tableau en place.

const original = [1, 2, 3];
const reversedCopy = original.toReversed();

console.log(reversedCopy); // [3, 2, 1]
console.log(original); // [1, 2, 3] (inchangé)

💡 Bonnes pratiques

• Ne modifiez pas les données d'origine : Préférez toSorted() ou toReversed() pour un tri sans effets de bord.
• Normalisez vos données : Pour des chaînes ou des dates, prévoyez une étape de préparation avant le tri.
• Adaptez votre tri : Testez différentes fonctions de comparaison selon les formats et les besoins.