Tri de tableau JavaScript

sort() La méthode est l'une des méthodes les plus puissantes des tableaux.

Tri des tableaux

sort() La méthode trie les tableaux en ordre alphabétique :

Exemple

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // Trie les éléments de fruits

Essayez-le vous-même

Inverser l'array

reverse() La méthode inverse les éléments du tableau.

Vous pouvez l'utiliser pour trier un tableau en ordre décroissant :

Exemple

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // Trie les éléments de fruits
fruits.reverse();         // Inverse l'ordre des éléments

Essayez-le vous-même

Tri des nombres

Par défaut,sort() La fonction trie les valeursChaîneL'ordre trie les valeurs.

Cette fonction est très adaptée aux chaînes de caractères ("Apple" est avant "Banana").

Cependant, si les nombres sont triés comme des chaînes de caractères, alors "25" est plus grand que "100", car "2" est plus grand que "1".

Pour cette raison,sort() La méthode peut produire des résultats incorrects lors du tri des nombres.

Nous utilisons uneFonction de comparaisonPour corriger ce problème :

Exemple

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

Essayez-le vous-même

Utilisez la même technique pour trier un tableau en ordre décroissant :

Exemple

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

Essayez-le vous-même

Fonction de comparaison

L'objectif de la fonction de comparaison est de définir un autre ordre de tri.

La fonction de comparaison doit retourner une valeur négative, zéro ou positive, en fonction des paramètres :

function(a, b){return a-b}

Lorsque sort() Lorsque la fonction compare deux valeurs, elle envoie ces valeurs à la fonction de comparaison et trie ces valeurs en fonction de la valeur retournée (négative, zéro ou positive).

Exemple :

Lors de la comparaison de 40 et 100,sort() La méthode appelle la fonction de comparaison function(40,100).

La fonction calcule 40-100 et retourne -60 (valeur négative).

La fonction de tri placera 40 avant 100.

Vous pouvez utiliser le fragment de code suivant pour tester le tri numérique et alphabétique :

<button onclick="myFunction1()">Trier par ordre alphabétique</button>
<button onclick="myFunction2()">Trier par ordre numérique</button>
<p id="demo"></p>
<script>
var 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>

Essayez-le vous-même

Trier le tableau en ordre aléatoire

Exemple

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});

Essayez-le vous-même

Trouver la valeur maximale (ou minimale) d'un tableau

JavaScript ne fournit pas de fonction intégrée pour trouver la valeur maximale ou minimale d'un tableau.

Cependant, après avoir trié le tableau, vous pouvez utiliser l'index pour obtenir la valeur la plus haute ou la plus basse.

Triage croissant :

Exemple

var 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 haute

Essayez-le vous-même

Triage décroissant :

Exemple

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// Maintenant points[0] contient la valeur la plus haute
// Et points[points.length-1] contient la valeur la plus basse

Essayez-le vous-même

Si vous avez besoin uniquement de trouver la valeur la plus haute ou la plus basse, trier tout le tableau est une méthode très inefficace.

Appliquer Math.max() au tableau

Vous pouvez utiliser Math.max.apply Pour trouver la valeur la plus haute dans le tableau :

Exemple

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

Essayez-le vous-même

Math.max.apply([1, 2, 3]) égal à Math.max(1, 2, 3).

Appliquer Math.min() au tableau

Vous pouvez utiliser Math.min.apply Pour trouver la valeur la plus basse dans le tableau :

Exemple

function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}

Essayez-le vous-même

Math.min.apply([1, 2, 3]) égal à Math.min(1, 2, 3).

Mes méthodes Min / Max JavaScript

La méthode la plus rapide est d'utiliser une méthode "faite maison".

Cette fonction parcourt le tableau, comparant chaque valeur avec la valeur la plus haute trouvée :

Exemple (recherche du Max)

function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}

Essayez-le vous-même

Cette fonction parcourt le tableau, comparant chaque valeur avec la valeur la plus basse trouvée :

Exemple (recherche du Min)

function myArrayMin(arr) {
    var len = arr.length
    var min = Infinity;
    while (len--) {
        if (arr[len] < min) {
            min = arr[len];
        }
    }
    return min;
}

Essayez-le vous-même

Triage des tableaux d'objets

Les tableaux JavaScript contiennent souvent des objets :

Exemple

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];

Même si les objets possèdent des attributs de types de données différents,sort() Cette méthode peut toujours être utilisée pour trier les tableaux.

La solution consiste à utiliser une fonction de comparaison pour comparer les valeurs des attributs :

Exemple

cars.sort(function(a, b){return a.year - b.year});

Essayez-le vous-même

La comparaison des attributs de chaînes est un peu plus complexe :

Exemple

cars.sort(function(a, b){
	  var x = a.type.toLowerCase();
	  var y = b.type.toLowerCase();
	  if (x < y) {return -1;}
	  if (x > y) {return 1;}
	  return 0;
});

Essayez-le vous-même