Tri de tableau JavaScript ()

La méthode JavaScript Array sort () trie les éléments d'un tableau.

La sort()méthode trie les éléments d'un tableau donné dans un ordre croissant ou décroissant spécifique.

La syntaxe de la sort()méthode est:

 arr.sort(compareFunction)

Ici, arr est un tableau.

Sort () Paramètres

La sort()méthode prend en compte:

  • compareFunction (facultatif) - Il est utilisé pour définir un ordre de tri personnalisé.

Valeur renvoyée par sort ()

  • Renvoie le tableau après avoir trié les éléments du tableau en place (ce qui signifie qu'il modifie le tableau d'origine et qu'aucune copie n'est effectuée).

Exemple 1: tri des éléments d'un tableau

Lorsque compareFunction n'est pas passé,

  • Tous les undefinedéléments non- tableau sont d'abord convertis en chaînes.
  • Ces chaînes sont ensuite comparées à l'aide de leur valeur de point de code UTF-16.
  • Le tri se fait par ordre croissant.
  • Tous les undefinedéléments sont triés jusqu'à la fin du tableau.
 // sorting an array of strings var names = ("Adam", "Jeffrey", "Fabiano", "Danil", "Ben"); // returns the sorted array console.log(names.sort()); // modifies the array in place console.log(names); var priceList = (1000, 50, 2, 7, 14); priceList.sort(); // Number is converted to string and sorted console.log(priceList)

Production

 ('Adam', 'Ben', 'Danil', 'Fabiano', 'Jeffrey') ('Adam', 'Ben', 'Danil', 'Fabiano', 'Jeffrey') (1000, 14, 2, 50 , sept )

Ici, nous pouvons voir que le tableau des noms est trié par ordre croissant de la chaîne. Par exemple, Adam vient avant Danil parce que "A" vient avant "D".

Étant donné que tous les éléments non indéfinis sont convertis en chaînes avant de les trier, les Numbertypes de données sont triés dans cet ordre.

Ici, nous pouvons voir que même si 1000 est supérieur à 50 numériquement, il vient au début de la liste triée. C'est parce que "1" <"5" .

Exemple 2: tri à l'aide de la fonction personnalisée

Lorsque compareFunction est passé,

  • Tous les undefinedéléments non- tableau sont triés en fonction de la valeur de retour de compareFunction.
  • Tous les éléments non définis sont triés jusqu'à la fin du tableau et compareFunction n'est pas appelé pour eux.

Supposons que nous voulions trier le tableau de noms ci-dessus de sorte que le nom le plus long vienne en dernier, plutôt que de le trier par ordre alphabétique. Nous pouvons le faire de la manière suivante:

 // custom sorting an array of strings var names = ("Adam", "Jeffrey", "Fabiano", "Danil", "Ben"); function len_compare(a, b)( return a.length - b.length; ) // sort according to string length names.sort(len_compare); console.log(names);

Production

 ('Ben', 'Adam', 'Danil', 'Jeffrey', 'Fabiano')

Ici, le tri est basé sur la logique a.length - b.length. Cela signifie essentiellement que l'élément avec une longueur plus courte apparaîtra au début du Array.

Voyons d'abord comment fonctionne l'option compareFunction.

Any compareFunctiona la syntaxe suivante:

 function (a, b)( // sorting logic // return a Number )

La sort()méthode compare toutes les valeurs du tableau en passant deux valeurs à la fois au compareFunction. Les deux paramètres a et b représentent respectivement ces deux valeurs.

Le compareFunctiondevrait renvoyer un Number. Cette valeur retournée est utilisée pour trier les éléments de la manière suivante:

  • Si la valeur retournée <0 , a est trié avant b (a vient avant b).
  • Si la valeur renvoyée> 0 , b est trié avant a (b précède a).
  • Si la valeur renvoyée == 0 , a et b restent inchangés l'un par rapport à l'autre.

Dans l'exemple 2, nous trions le tableau en utilisant:

 function len_compare(a, b)( return a.length - b.length; )

Ici:

  • Si a.length - b.length <0 , a vient avant b. Par exemple, «Adam» vient avant «Jeffrey» sous la forme 4 - 7 <0 .
  • Si a.length - b.length> 0 , b vient avant a. Par exemple, "Danil" vient après "Ben" comme 5 - 3> 0.
  • Si a.length - b.length == 0 , leur position reste inchangée. Par exemple, la position relative de "Jeffrey" et "Fabiano" est inchangée car 7 - 7 == 0 .

Nous pouvons voir que cela se traduit par le tri des chaînes en fonction de leur longueur par ordre croissant.

Exemple 3: Tri numérique des nombres

Étant donné que tous les éléments non indéfinis sont convertis en chaînes avant de les trier, nous ne pouvons pas trier les nombres en utilisant leur valeur numérique par défaut.

Voyons comment nous pouvons implémenter cela à l'aide d'une fonction personnalisée.

 // numeric sorting // define array var priceList = (1000, 50, 2, 7, 14); // sort() using function expression // ascending order priceList.sort(function (a, b) ( return a - b; )); // Output: Ascending - 2,7,14,50,1000 console.log("Ascending - " + priceList); // sort() using arrow function expression // descending order priceList.sort((a, b) => b - a); // Output: Descending - 1000,50,14,7,2 console.log("Descending - " + priceList);

Production

 Croissant - 2,7,14,50,1000 Descendant - 1000,50,14,7,2

Dans cet exemple, nous avons trié le tableau en utilisant:

 function (a, b) ( return a - b; )

Ici,

  • Si a - b <0 , a vient avant b. Par exemple, 2 vient avant 7 comme 2-7 <0 .
  • Si a - b> 0 , b vient avant a. Par exemple, 1000 vient après 50 comme 1000 - 50> 0.

On voit que cela se traduit par le tri des nombres en fonction de leur valeur numérique ascendante.

De même, nous pouvons utiliser b - apour les trier par ordre décroissant. Notez que nous pouvons également utiliser l'expression de fonction de flèche définie dans ES2015.

Nous pouvons également inverser (ordre décroissant) le tableau trié en utilisant la reverse()méthode de tableau intégrée . Pour en savoir plus, visitez le site JavaScript Array reverse ().

Articles intéressants...