Trier un tableau d'entiers en JavaScript

1. Trier un tableau d’entiers en JavaScript à l’aide de la méthode .sort
2. Passer une fonction de comparaison en paramètre
3. Trier un tableau d’entiers en JavaScript à l’aide de la fonction flèche

Présentant la méthode .sort qui peut être utilisée pour trier un tableau par ordre spécifique, ce tutoriel a pour but d’expliquer pourquoi cette méthode a besoin d’une fonction de comparaison si vous voulez trier correctement un tableau de nombres entiers.

Cette fonction de comparaison dictera l’ordre de tri. Nous expliquerons également comment l’utiliser pour effectuer un tri par ordre décroissant, ainsi qu’une manière plus courte de l’utiliser tous ensemble, en utilisant la fonction de comparaison en tant que fonction fléchée dans la méthode .sort.

Trier un tableau d’entiers en JavaScript à l’aide de la méthode .sort

La méthode .sort est une méthode de l’entité Array qui renvoie un tableau ordonné à partir du tableau auquel cette méthode était initialement appelée. Par example:

// Input
let array = [10, 10000, 1000, 100, 1]
console.log(array.sort())

Production :

// Output
[ 1, 10, 100, 1000, 10000 ]

Bien sûr, cela est attendu car la méthode .sort ordonne le tableau. Mais, si nous avons l’entrée ci-dessous:

// Input
let array = [12900, 877, 12, 992, 10000]
console.log(array.sort())

Nous avons une mauvaise commande comme celle-ci :

// Output
[10000, 12, 12900, 877, 992]

Cela se produit parce que l’ordre par défaut de .sort est basé sur le UTF-16 ou 16-bit Unit Transformation Format, qui est un encodage du modèle Unicode. La méthode convertit les valeurs du tableau en type de chaîne, puis ordonne leurs valeurs Unicode.

Cela expliqué, la méthode .sort peut également être utilisée pour ordonner d’autres types de données, pas seulement des nombres.

Mais comment utiliser la méthode .sort pour ordonner correctement un tableau ? C’est simple : en utilisant une fonction de comparaison.

Passer une fonction de comparaison en paramètre

Comme la méthode .sort peut être utilisée sans aucun paramètre, une fonction de comparaison est facultative. En gros, cette fonction définit l’ordre de la méthode .sort, et cette fonction reçoit deux paramètres : le premier élément à comparer et le deuxième élément à comparer.

La méthode .sort va :

• Mettre first après second si la compareFunction renvoie une valeur supérieure à 0 ;
• Mettre first avant second si la compareFunction renvoie une valeur inférieure à 0 ;
• Ne rien faire si la compareFunction renvoie une valeur égale à 0.

Ainsi, avec la fonction compareFunction(first, second), on peut dicter l’ordre du tri en passant une opération entre les paramètres first et second. A l’ordre croissant,

// Ascending ordering
function compareFunction(first, second) {
  if (first > second)
    return 1  // 1 is greater than 0, so .sort will put first after second.
    if (first < second) return -1  // -1 is less than 0, so .sort will put first
                                   // before second.
    return 0
}

Et pour l’ordre décroissant, on peut inverser les opérateurs.

// Descending ordering
function compareFunction(first, second) {
  if (first < second)
    return 1  // 1 is greater than 0, so .sort will put first after second.
    if (first > second) return -1  // -1 is less than 0, so .sort will put first
                                   // before second.
    return 0
}

Maintenant, en mettant compareFunction pour l’ordre croissant avec la méthode .sort, enfin, nous avons :

// Input:
let array = [12900, 877, 12, 992, 10000]
// Ascending
array.sort(function compareFunction(first, second) {
  if (first > second)
    return 1  // 1 is greater than 0, so .sort will put first before second.
    if (first < second) return -1  // -1 is less than 0, so .sort will put first
                                   // after second.
    return 0
})
console.log(array)

Production :

// Output:
[ 12, 877, 992, 10000, 12900 ]

Trier un tableau d’entiers en JavaScript à l’aide de la fonction flèche

Nous pouvons également réduire tout le bloc de code à une syntaxe minimale, en utilisant les fonctions Arrow.

Une fonction Flèche est une autre façon d’utiliser une fonction avec une syntaxe plus courte. Les fonctions fléchées sont des fonctions anonymes, ce qui signifie qu’elles ne sont pas nommées (sont stockées dans des variables ou transmises en tant que paramètres de fonction) et ne peuvent pas être utilisées dans toutes les situations.

Avec la structure d’une fonction fléchée, les fonctions traditionnelles peuvent être transformées en un bloc plus court, comme par exemple :

// Common anonymous function
function(x) {
  return x + 1;
}

// Arrow function
(x) => x + 1

De plus, la structure d’une fonction Flèche peut renvoyer automatiquement la valeur de l’expression sans le mot réservé return :

// Arrow function
let arrowFunction = (x) => x + 1
console.log(arrowFunction(1))

Production :

//Output
2

La console.log() imprime la valeur de 1 + 1, c’est-à-dire 2 même si la arrowFunction n’utilise pas l’instruction return. Cela nous aidera dans la prochaine étape.

Comme dit, la méthode .sort peut contenir une fonction de comparaison, et cette fonction peut être une fonction de flèche. En convertissant la structure de la fonction de comparaison précédente, nous pouvons transformer tout ce bloc de code en un bloc plus court comme ci-dessous :

// Input:
let array = [10000, 10, 100, 1000, 1]
array.sort((first, second) => {
  if (first > second) return 1
    return -1
})
// Ascending: If first > second == true, then change one by the other.
console.log(array)

Nous pouvons laisser tomber la condition first < second et à la place, renvoyer une valeur -1 par défaut si la condition principale n’est pas le cas ; étant donné que la valeur 0 de la méthode .sort est à valeurs égales et de cette façon, elles peuvent voir leurs positions modifiées sans interférer dans le résultat final. De cette façon, nous pouvons réduire encore plus, comme dans l’exemple ci-dessous :

// Input:
let array = [10000, 10, 100, 1000, 1]
array.sort((first, second) => first > second ? 1 : -1)
// Ascending: If first > second == true, then change one by the other.
console.log(array)

Regardez que la comparaison précédente > et le return par défaut ont été changés en une seule comparaison : first > second ? 1 : -1. Cela signifie que si la comparaison est true, elle renvoie 1 ; sinon, il renvoie -1.

Nous avons besoin du ? opérateur ternaire car la comparaison first > second ne donne que true ou false. Mais comme dit, la méthode .sort attend 1, -1 ou 0.

Production :

// Output:
[ 1, 10, 100, 1000, 10000 ]

Et pour l’ordre décroissant :

// Input:
let array = [10000, 10, 100, 1000, 1]
array.sort((first, second) => first < second ? 1 : -1)
// Descending: If first < second == true, then change one by the other.
console.log(array)

Production :

// Output:
[ 10000, 1000, 100, 10, 1 ]

Une autre façon de faire la même chose consiste à utiliser l’opérateur ternaire - pour la soustraction. Lorsque nous utilisons array.sort((first, second) => first > second ? 1 : -1), si first - second donne une valeur supérieure à 0, alors il y aura un changement d’index entre eux. Si first - second donne une valeur inférieure à 0, rien ne se passera, et à valeurs égales, la comparaison retournera 0.

Exemple:

// Input:
let array = [10000, 10, 100, 1000, 1]
console.log(array.sort((first, second) => first - second))

Production :

// Output:
[ 1, 10, 100, 1000, 10000 ]

Que peut-on faire par ordre décroissant ? Non, il ne s’agit pas de changer l’opérateur ternaire - en + car chaque nombre positif plus un autre nombre positif donne une valeur supérieure à 0. Mais nous avons une solution simple à cela : inversez le first - second en second - first.

De cette façon, si second - first donne une valeur supérieure à 0, alors la méthode .sort changera leurs positions les unes avec les autres.

Exemple:

// Input:
let array = [10000, 10, 100, 1000, 1]
console.log(array.sort((first, second) => second - first))

Production :

// Output:
[ 10000, 1000, 100, 10, 1 ]