Array : mthode sort()

Exemple interactif

const months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months);
// Rsultat attendu : Array ["Dec", "Feb", "Jan", "March"]

const array = [1, 30, 4, 21, 100000];
array.sort();
console.log(array);
// Rsultat attendu : Array [1, 100000, 21, 30, 4]

Syntaxe

sort()
sort(compareFn)

Paramtres

compareFn Facultatif

Une fonction qui dtermine l'ordre des lments. La fonction est appele avec les arguments suivants :

a

Le premier lment comparer. Ne sera jamais undefined.

b

Le second lment comparer. Ne sera jamais undefined.

Elle doit retourner un nombre o :

• Une valeur ngative indique que a doit prcder b.
• Une valeur positive indique que a doit suivre b.
• Zro ou NaN indique que a et b sont considrs comme gaux.

Pour s'en souvenir, rappelez-vous que (a, b) => a - b trie les nombres par ordre croissant.

Si ce paramtre est omis, les lments du tableau sont convertis en chanes de caractres, puis tris selon la valeur du point de code Unicode de chaque caractre.

Valeur de retour

La rfrence vers le tableau d'origine, dsormais tri. Notez que le tableau est tri en place, aucune copie n'est ralise.

Description

Si compareFn n'est pas fourni, tous les lments du tableau qui ne valent pas undefined sont tris en les convertissant en chanes de caractres et en comparant ces chanes selon l'ordre des units de code UTF-16. Par exemple,  banane  sera tri avant  cerise . Dans un tri numrique, 9 sera tri avant 80, mais comme les nombres sont convertis en chanes de caractres,  80  arrive avant  9  selon l'ordre Unicode. Tous les lments valant undefined sont placs la fin du tableau.

La mthode sort() prserve les cases vides. Si le tableau source est un tableau creux, les cases vides sont dplaces la fin du tableau, et arrivent toujours aprs tous les undefined.

Si compareFn est fourni, tous les lments du tableau qui ne valent pas undefined sont tris selon la valeur de retour de la fonction de comparaison (tous les lments undefined sont placs la fin du tableau, sans appel compareFn).

Ainsi, la fonction de comparaison a la forme suivante :

function compareFn(a, b) {
  if (a est infrieur  b selon un critre de tri) {
    return -1;
  } else if (a est suprieur  b selon le critre de tri) {
    return 1;
  }
  // a doit tre gal  b
  return 0;
}

Plus formellement, le comparateur doit respecter les proprits suivantes pour garantir un tri correct :

• Pur : Le comparateur ne modifie pas les objets compars ni aucun tat externe. (Ceci est important car il n'y a aucune garantie sur quand et comment le comparateur sera appel, donc chaque appel ne doit produire aucun effet visible l'extrieur.)
• Stable : Le comparateur retourne le mme rsultat pour la mme paire d'entres.
• Rflexif : compareFn(a, a) === 0.
• Antisymtrique : compareFn(a, b) et compareFn(b, a) doivent tre tous deux 0 ou avoir des signes opposs.
• Transitif : Si compareFn(a, b) et compareFn(b, c) sont tous deux positifs, nuls ou ngatifs, alors compareFn(a, c) a la mme positivit que les deux prcdents.

Un comparateur respectant les contraintes ci-dessus pourra toujours retourner 1, 0 et -1, ou retourner systmatiquement 0. Par exemple, si un comparateur ne retourne que 1 et 0, ou seulement 0 et -1, il ne pourra pas trier correctement car l'antisymtrie est rompue. Un comparateur qui retourne toujours 0 ne modifiera pas le tableau, mais reste fiable.

Le comparateur lexicographique par dfaut respecte toutes les contraintes ci-dessus.

Pour comparer des nombres plutt que des chanes, la fonction de comparaison peut soustraire b a. La fonction suivante triera le tableau par ordre croissant (si le tableau ne contient pas NaN) :

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

La mthode sort() est gnrique. Elle attend seulement que la valeur de this possde une proprit length et des proprits cls entires. Bien que les chanes de caractres soient aussi assimilables des tableaux, cette mthode ne doit pas tre applique sur elles, car les chanes sont immuables.

Exemples

Cration, affichage et tri d'un tableau

L'exemple suivant cre quatre tableaux et affiche le tableau original, puis les tableaux tris. Les tableaux numriques sont tris sans fonction de comparaison, puis tris avec une fonction de comparaison.

const stringArray = ["Blue", "Humpback", "Beluga"];
const numberArray = [40, 1, 5, 200];
const numericStringArray = ["80", "9", "700"];
const mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

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

stringArray.join(); // 'Blue,Humpback,Beluga'
stringArray.sort(); // ['Beluga', 'Blue', 'Humpback']

numberArray.join(); // '40,1,5,200'
numberArray.sort(); // [1, 200, 40, 5]
numberArray.sort(compareNumbers); // [1, 5, 40, 200]

numericStringArray.join(); // '80,9,700'
numericStringArray.sort(); // ['700', '80', '9']
numericStringArray.sort(compareNumbers); // ['9', '80', '700']

mixedNumericArray.join(); // '80,9,700,40,1,5,200'
mixedNumericArray.sort(); // [1, 200, 40, 5, '700', '80', '9']
mixedNumericArray.sort(compareNumbers); // [1, 5, '9', 40, '80', 200, '700']

Tri d'un tableau d'objets

On peut trier un tableau d'objets en comparant la valeur de l'une de leurs proprits.

const items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 },
];

// trier par valeur
items.sort((a, b) => a.value - b.value);

// trier par nom
items.sort((a, b) => {
  const nameA = a.name.toUpperCase(); // ignorer les majuscules/minuscules
  const nameB = b.name.toUpperCase(); // ignorer les majuscules/minuscules
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // les noms sont gaux
  return 0;
});

Tri de chanes de caractres non ASCII

Pour trier des chanes contenant des caractres non ASCII, c'est--dire des caractres accentus (e, , , a, , etc.) ou des chanes dans d'autres langues que l'anglais, utilisez String.prototype.localeCompare(). Cette fonction permet de comparer ces caractres afin qu'ils apparaissent dans le bon ordre.

const items = ["rserv", "premier", "communiqu", "caf", "adieu", "clair"];
items.sort((a, b) => a.localeCompare(b));

// items vaut ['adieu', 'caf', 'communiqu', 'clair', 'premier', 'rserv']

Tri avec map

La fonction compareFn peut tre appele plusieurs fois par lment du tableau. Selon la nature de compareFn, cela peut entraner un surcot important. Plus la fonction de comparaison est complexe et plus le tableau est grand, plus il peut tre efficace d'utiliser map() pour le tri. L'ide est de parcourir le tableau une fois pour extraire les valeurs utilises pour le tri dans un tableau temporaire, de trier ce tableau temporaire, puis de parcourir ce tableau temporaire pour obtenir l'ordre souhait.

// le tableau  trier
const data = ["delta", "alpha", "charlie", "bravo"];

// le tableau temporaire contient les objets avec la position et la valeur de tri
const mapped = data.map((v, i) => ({ i, value: someSlowOperation(v) }));

// tri du tableau temporaire contenant les valeurs rduites
mapped.sort((a, b) => {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  return 0;
});

const result = mapped.map((v) => data[v.i]);

Il existe une bibliothque open source appele mapsort (angl.) qui applique cette approche.

sort() retourne la rfrence du mme tableau

La mthode sort() retourne une rfrence vers le tableau d'origine, donc toute modification du tableau retourn modifie galement le tableau d'origine.

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b);
// numbers et sorted valent tous deux [1, 1, 3, 4, 5]
sorted[0] = 10;
console.log(numbers[0]); // 10

Si vous souhaitez que sort() ne modifie pas le tableau d'origine, mais retourne un tableau copi superficiellement comme d'autres mthodes de tableau (par exemple, map()), utilisez la mthode toSorted(). Vous pouvez aussi faire une copie superficielle avant d'appeler sort(), en utilisant la syntaxe de l'oprateur de propagation ou Array.from().

const numbers = [3, 1, 4, 1, 5];
// [...numbers] cre une copie superficielle, donc sort() ne modifie pas l'original
const sorted = [...numbers].sort((a, b) => a - b);
sorted[0] = 10;
console.log(numbers[0]); // 3

Stabilit du tri

Depuis la version 10 (ou ECMAScript 2019), la spcification impose que Array.prototype.sort soit stable.

Par exemple, supposons que vous ayez une liste d'lves avec leurs notes. Notez que la liste d'lves est dj pr-trie par nom par ordre alphabtique :

const students = [
  { name: "Alex", grade: 15 },
  { name: "Devlin", grade: 15 },
  { name: "Eagle", grade: 13 },
  { name: "Sam", grade: 14 },
];

Aprs avoir tri ce tableau par la proprit grade par ordre croissant :

students.sort((firstItem, secondItem) => firstItem.grade - secondItem.grade);

La variable students aura alors la valeur suivante :

[
  { name: "Eagle", grade: 13 },
  { name: "Sam", grade: 14 },
  { name: "Alex", grade: 15 }, // ordre d'origine conserv pour les mmes notes (tri stable)
  { name: "Devlin", grade: 15 }, // ordre d'origine conserv pour les mmes notes (tri stable)
];

Il est important de noter que les lves ayant la mme note (par exemple, Alex et Devlin) restent dans le mme ordre qu'avant l'appel sort. C'est ce que garantit un algorithme de tri stable.

Avant la version 10 (ou ECMAScript 2019), la stabilit du tri n'tait pas garantie, ce qui pouvait donner :

[
  { name: "Eagle", grade: 13 },
  { name: "Sam", grade: 14 },
  { name: "Devlin", grade: 15 }, // ordre d'origine non conserv
  { name: "Alex", grade: 15 }, // ordre d'origine non conserv
];

Tri avec un comparateur mal form

Si une fonction de comparaison ne respecte pas toutes les rgles de puret, stabilit, rflexivit, antisymtrie et transitivit, comme expliqu dans la description, le comportement du programme n'est pas dfini.

Par exemple :

const arr = [3, 1, 4, 1, 5, 9];
const compareFn = (a, b) => (a > b ? 1 : 0);
arr.sort(compareFn);

La fonction compareFn ici n'est pas bien forme, car elle ne respecte pas l'antisymtrie : si a > b, elle retourne 1 ; mais en inversant a et b, elle retourne 0 au lieu d'une valeur ngative. Ainsi, le tableau rsultant sera diffrent selon les moteurs JavaScript. Par exemple, V8 (utilis par Chrome, Node.js, etc.) et JavaScriptCore (utilis par Safari) ne trieront pas le tableau et retourneront [3, 1, 4, 1, 5, 9], tandis que SpiderMonkey (utilis par Firefox) retournera le tableau tri par ordre croissant, soit [1, 1, 3, 4, 5, 9].

Cependant, si la fonction compareFn est modifie pour retourner -1 ou 0 :

const arr = [3, 1, 4, 1, 5, 9];
const compareFn = (a, b) => (a > b ? -1 : 0);
arr.sort(compareFn);

V8 et JavaScriptCore le trient alors par ordre dcroissant, comme [9, 5, 4, 3, 1, 1], tandis que SpiderMonkey le retourne tel quel : [3, 1, 4, 1, 5, 9].

En raison de cette incohrence d'implmentation, il est toujours conseill de s'assurer que votre comparateur est bien form en respectant les cinq contraintes.

Utilisation de sort() sur des tableaux creux

Les cases vides sont dplaces la fin du tableau.

console.log(["a", "c", , "b"].sort()); // ['a', 'b', 'c', empty]
console.log([, undefined, "a", "b"].sort()); // ["a", "b", undefined, empty]

Appel de sort() sur des objets qui ne sont pas des tableaux

La mthode sort() lit la proprit length de this. Elle collecte ensuite toutes les proprits cl entire existantes dans l'intervalle de 0 length - 1, les trie, puis les rcrit. S'il manque des proprits dans l'intervalle, les proprits finales correspondantes sont supprimes, comme si les proprits inexistantes taient tries vers la fin.

const objetSimilaireTableau = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
};
console.log(Array.prototype.sort.call(objetSimilaireTableau));
// { '0': 4, '1': 5, length: 3, unrelated: 'foo' }

Spcifications

Compatibilit des navigateurs

Voir aussi

• Guide des collections indexes
• L'objet global Array
• La mthode Array.prototype.reverse()
• La mthode Array.prototype.toSorted()
• La mthode String.prototype.localeCompare()
• La mthode TypedArray.prototype.sort()
• Prothse d'mulation de Array.prototype.sort avec un comportement moderne (tri stable) dans core-js (angl.)
• Getting things sorted in V8 (angl.) sur v8.dev (2018)
• Tri stable de Array.prototype.sort (angl.) sur v8.dev (2019)
• Stabilit de Array.prototype.sort (angl.) par Mathias Bynens