Tri de tableaux JS

Trier un tableau

Le tri est une tâche courante lorsque vous travaillez avec des tableaux. Il serait utilisé, par exemple, si vous souhaitez afficher les noms de ville ou de comté dans l'ordre alphabétique.

L'objet JavaScript Array a une méthode intégrée sort() pour trier les éléments du tableau par ordre alphabétique. L'exemple suivant montre comment cela fonctionne :

var fruits = ["Banana", "Orange", "Apple", "Papaya", "Mango"];
var sorted = fruits.sort();
alert(fruits); // Affiche: Apple,Banana,Mango,Orange,Papaya
alert(sorted); // Affiche: Apple,Banana,Mango,Orange,Papaya

Inverser un tableau

Vous pouvez utiliser la méthode reverse() pour inverser l'ordre des éléments d'un tableau.

Cette méthode inverse un tableau de manière à ce que le premier élément du tableau devienne le dernier et que le dernier élément du tableau devienne le premier. Voici un exemple :

var counts = ["one", "two", "three", "four", "five"];
var reversed = counts.reverse(); 
alert(counts); // Affiche: five,four,three,two,one
alert(reversed); // Affiche: five,four,three,two,one

Remarque : La méthode sort() et reverse() modifie le tableau d'origine et renvoie une référence au même tableau, comme vous pouvez le voir dans les exemples ci-dessus.

Tri des tableaux numériques

La méthode sort() peut produire un résultat inattendu lorsqu'elle est appliquée sur des tableaux numériques (c'est-à-dire des tableaux contenant des valeurs numériques). Par exemple:

var numbers = [5, 20, 10, 75, 50, 100];
numbers.sort(); 
alert(numbers); // Affiche : 10,100,20,5,50,75

Comme vous pouvez le constater, le résultat est différent de ce à quoi nous nous attendions. Cela se produit parce que la méthode sort() trie les éléments du tableau numérique en les convertissant en chaînes (c'est-à-dire que 20 devient "20", 100 devient "100", etc.), et depuis le premier caractère de la chaîne "20" (c'est-à-dire "2" ) vient après le premier caractère de la chaîne "100" (c'est-à-dire "1"), c'est pourquoi la valeur 20 est triée après le 100.

Pour résoudre ce problème de tri avec un tableau numérique, vous pouvez passer une fonction de comparaison, comme ceci :

var numbers = [5, 20, 10, 75, 50, 100];
numbers.sort(function(a, b) {
    return a - b;
});
alert(numbers); // Affiche : 5,10,20,50,75,100

Comme vous pouvez le voir, cette fois nous avons le bon résultat. Voyons voir comment ça fonctionne.

Lorsque la fonction de comparaison est spécifiée, les éléments du tableau sont triés en fonction de la valeur de retour de la fonction de comparaison. Par exemple, en comparant a et b:

• Si la fonction de comparaison renvoie une valeur inférieure à 0, alors a vient en premier.
• Si la fonction de comparaison renvoie une valeur supérieure à 0, alors b vient en premier.
• Si la fonction de comparaison renvoie 0 a et b reste inchangée l'une par rapport à l'autre, mais triée par rapport à tous les autres éléments.

Ainsi, puisque 5 - 20 = -15 qui est inférieur à 0, donc 5 vient en premier, de même 20 - 10 = 10 qui est supérieur à 0, donc 10 vient avant 20, de même 20 - 75 = -55 qui est inférieur à 0, donc 20 vient avant 75, de même 50 vient avant 75, et ainsi de suite.

Recherche de la valeur maximale et minimale dans un tableau

Vous pouvez utiliser la méthode apply() en combinaison avec Math.max() et Math.min() pour trouver la valeur maximale et minimale dans un tableau, comme ceci :

 

var numbers = [3, -7, 10, 8, 15, 2];
/* fonction pour trouver la valeur maximale */
function findMax(array) {
    return Math.max.apply(null, array);
}
/* fonction pour trouver la valeur minimale */
function findMin(array) {
    return Math.min.apply(null, array);
}
alert(findMax(numbers)); // Affiche: 15
alert(findMin(numbers)); // Affiche: -7

La méthode apply() fournit un moyen pratique de passer des valeurs de tableau en tant qu'arguments à une fonction qui accepte plusieurs arguments à la manière d'un tableau, mais pas un tableau (par exemple Math.max(), et Math.min()). Ainsi, l'instruction résultante Math.max.apply(null, numbers) dans l'exemple ci-dessus est équivalente à Math.max(3, -7, 10, 8, 15, 2).

Trier un tableau d'objets

La méthode sort() peut également être utilisée pour trier des tableaux d'objets à l'aide de la fonction de comparaison.

L'exemple suivant vous montrera comment trier un tableau d'objets par valeurs de propriété :

var persons = [
    { name: "Harry", age: 14 },
    { name: "Ethan", age: 30 },
    { name: "Peter", age: 21 },
    { name: "Clark", age: 42 },
    { name: "Alice", age: 16 }
];
// Trier par âge
persons.sort(function (a, b) {
    return a.age - b.age;
});
console.log(persons);
// Trier par le nom
persons.sort(function(a, b) {
    var x = a.name.toLowerCase(); /* ignore miniscule et majuscule */
    var y = b.name.toLowerCase(); /*ignore miniscule et majuscule */
    if(x < y) {
        return -1;
    }
    if(x > y) {
        return 1;
    }
    // noms doivent être egaux
    return 0;
});
console.log(persons);