Tri des tableaux JavaScript
Voir aussi :
Tutoriel sur les tableaux
Méthodes de base des tableaux
Méthodes de recherche dans les tableaux
Méthodes d'itération sur les tableaux
Référence des tableaux
Trier un tableau
La méthode sort() trie un tableau par ordre alphabétique :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.sort(); Inverser un tableau
La méthode reverse() inverse les éléments d'un tableau :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.reverse(); En combinant sort() et reverse() , vous pouvez trier un tableau par ordre décroissant :
Exemple
const fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.sort();
fruits.reverse(); Méthode toSorted() des tableaux JavaScript
ES2023 a ajouté la méthode toSorted() comme un moyen sûr de trier un tableau sans altérer le tableau d'origine.
La différence entre toSorted() et sort() est que la première méthode crée un nouveau tableau, en gardant le tableau d'origine inchangé, tandis que la dernière méthode modifie le tableau d'origine.
Exemple
const months = ["Jan", "Fév", "Mar", "Avr"];
const sorted = months.toSorted(); Méthode toReversed() des tableaux JavaScript
ES2023 a ajouté la méthode toReversed() comme un moyen sûr d'inverser un tableau sans altérer le tableau d'origine.
La différence entre toReversed() et reverse() est que la première méthode crée un nouveau tableau, en gardant le tableau d'origine inchangé, tandis que la dernière méthode modifie le tableau d'origine.
Exemple
const months = ["Jan", "Fév", "Mar", "Avr"];
const reversed = months.toReversed(); Tri numérique
Par défaut, la fonction sort() trie les valeurs en tant que chaînes .
Cela fonctionne bien pour les chaînes ("Pomme" vient avant "Banane").
Si les nombres sont triés en tant que chaînes, "25" est plus grand que "100", car "2" est plus grand que "1".
À cause de cela, la méthode sort() produira un résultat incorrect lors du tri des nombres.
Vous pouvez corriger cela en fournissant une fonction de comparaison :
Exemple
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); Utilisez le même principe pour trier un tableau par ordre décroissant :
Exemple
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a}); La fonction de comparaison
Le but de la fonction de comparaison est de définir un ordre de tri alternatif.
La fonction de comparaison doit retourner une valeur négative, zéro ou positive, en fonction des arguments :
function(a, b){return a - b} Lorsque la fonction sort() compare deux valeurs, elle envoie les valeurs à la fonction de comparaison et trie les valeurs selon la valeur retournée (négative, zéro, positive).
Si le résultat est négatif, a est trié avant b .
Si le résultat est positif, b est trié avant a .
Si le résultat est 0, aucun changement n'est effectué sur l'ordre de tri des deux valeurs.
Exemple :
La fonction de comparaison compare toutes les valeurs du tableau, deux valeurs à la fois (a, b) .
Lors de la comparaison de 40 et 100, la méthode sort() appelle la fonction de comparaison(40, 100).
La fonction calcule 40 - 100 (a - b) , et puisque le résultat est négatif (-60), la fonction de tri classera 40 comme une valeur inférieure à 100.
Vous pouvez utiliser ce code pour expérimenter avec le tri numérique et alphabétique :
<button onclick="myFunction1()">Trier par ordre alphabétique</button>
<button onclick="myFunction2()">Trier numériquement</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script> Trier un tableau dans un ordre aléatoire
En utilisant une fonction de tri, comme expliqué ci-dessus, vous pouvez trier un tableau numérique dans un ordre aléatoire.
Exemple
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(){return 0.5 - Math.random()});
La méthode Fisher Yates
La méthode points.sort() dans l'exemple ci-dessus n'est pas précise. Elle favorisera certains nombres par rapport à d'autres.
La méthode correcte la plus populaire est appelée le mélange Fisher Yates, et a été introduite en science des données dès 1938 !
En JavaScript, la méthode peut être traduite comme suit :
Exemple
const points = [40, 100, 1, 5, 25, 10];
for (let i = points.length -1; i > 0; i--) {
let j = Math.floor(Math.random() * (i+1));
let k = points[i];
points[i] = points[j];
points[j] = k;
}
Trouver la valeur minimale (ou maximale) d'un tableau
Il n'existe pas de fonctions intégrées pour trouver la valeur maximale ou minimale dans un tableau.
Pour trouver la valeur la plus basse ou la plus élevée, vous avez 3 options :
- Trier le tableau et lire le premier ou le dernier élément
- Utiliser Math.min() ou Math.max()
- Écrire une fonction faite maison
Trouver Min ou Max avec sort()
Après avoir trié un tableau, vous pouvez utiliser l'index pour obtenir les valeurs les plus élevées et les plus basses.
Trier par ordre croissant :
Exemple
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// maintenant points[0] contient la valeur la plus basse
// et points[points.length-1] contient la valeur la plus élevée Trier par ordre décroissant :
Exemple
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// maintenant points[0] contient la valeur la plus élevée
// et points[points.length-1] contient la valeur la plus basse Remarque
Trier un tableau entier est une méthode très inefficace si vous voulez seulement trouver la valeur la plus élevée (ou la plus basse).
Utiliser Math.min() sur un tableau
Vous pouvez utiliser Math.min.apply pour trouver le nombre le plus bas dans un tableau :
Exemple
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
Math.min.apply(null, [1, 2, 3]) est équivalent à Math.min(1, 2, 3) .
Utiliser Math.max() sur un tableau
Vous pouvez utiliser Math.max.apply pour trouver le nombre le plus élevé dans un tableau :
Exemple
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
Math.max.apply(null, [1, 2, 3]) est équivalent à Math.max(1, 2, 3) .
Méthode Minimum des tableaux JavaScript
Il n'existe pas de fonction intégrée pour trouver la valeur la plus basse dans un tableau JavaScript.
Le code le plus rapide pour trouver le nombre le plus bas est d'utiliser une méthode faite maison .
Cette fonction parcourt un tableau en comparant chaque valeur avec la valeur la plus basse trouvée :
Exemple (Trouver Min)
function myArrayMin(arr) {
let len = arr.length;
let min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
Méthode Maximum des tableaux JavaScript
Il n'existe pas de fonction intégrée pour trouver la valeur la plus élevée dans un tableau JavaScript.
Le code le plus rapide pour trouver le nombre le plus élevé est d'utiliser une méthode faite maison .
Cette fonction parcourt un tableau en comparant chaque valeur avec la valeur la plus élevée trouvée :
Exemple (Trouver Max)
function myArrayMax(arr) {
let len = arr.length;
let max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
Trier des tableaux d'objets
Les tableaux JavaScript contiennent souvent des objets :
Exemple
const cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
]; Même si les objets ont des propriétés de différents types de données, la méthode sort() peut être utilisée pour trier le tableau.
La solution consiste à écrire une fonction de comparaison pour comparer les valeurs des propriétés :
Exemple
cars.sort(function(a, b){return a.year - b.year}); Comparer des propriétés de chaînes est un peu plus complexe :
Exemple
cars.sort(function(a, b){
let x = a.type.toLowerCase();
let y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
}); Tri stable de sort()
ES2019 a révisé la méthode sort() des tableaux.
Avant 2019, la spécification permettait des algorithmes de tri instables tels que QuickSort.
Après ES2019, les navigateurs doivent utiliser un algorithme de tri stable :
Lors du tri des éléments sur une valeur, les éléments doivent conserver leur position relative par rapport à d'autres éléments ayant la même valeur.
Exemple
const myArr = [
{name:"X00",price:100 },
{name:"X01",price:100 },
{name:"X02",price:100 },
{name:"X03",price:100 },
{name:"X04",price:110 },
{name:"X05",price:110 },
{name:"X06",price:110 },
{name:"X07",price:110 }
]; Dans l'exemple ci-dessus, lors du tri par prix, le résultat ne doit pas sortir avec les noms dans une autre position relative comme ceci :
X01 100
X03 100
X00 100
X02 100
X05 110
X04 110
X06 110
X07 110
Référence complète de JavaScript
Pour une référence complète de toutes les propriétés et méthodes JavaScript, avec des descriptions complètes et de nombreux exemples, rendez-vous sur :
formation-ti.org' Référence complète de JavaScript .
La référence inclut toutes les mises à jour JavaScript de 1999 à 2025.