JavaScript Trier le tableau d'objets par ordre alphabétique

1. Trier le tableau d’objets par ordre alphabétique à l’aide de la condition if et de la fonction sort() en JavaScript
2. Trier le tableau d’objets par ordre alphabétique à l’aide des fonctions localeCompare() et sort() en JavaScript
3. Trier le tableau d’objets par ordre alphabétique à l’aide des fonctions Collator() et sort() en JavaScript

Ce tutoriel abordera le tri d’un tableau d’objets par ordre alphabétique à l’aide de la fonction sort() en JavaScript.

Trier le tableau d’objets par ordre alphabétique à l’aide de la condition if et de la fonction sort() en JavaScript

Si nous avons un tableau de chaînes ou d’entiers, nous pouvons facilement les trier en utilisant la fonction sort() de JavaScript. Par exemple, trions un tableau de chaînes par ordre alphabétique à l’aide de la fonction sort(). Voir le code ci-dessous.

var a = ['banana', 'apple', 'orange'];
var m = a.sort();
console.log(m);

Production:

Array(3)
0: "apple"
1: "banana"
2: "orange"
length: 3

Comme vous pouvez le voir, le tableau est trié par ordre alphabétique, et le résultat est enregistré dans la variable m. Si nous avons un tableau d’objets, nous devons utiliser certaines conditions avant d’utiliser la fonction sort() pour trier le tableau. Par exemple, si nous avons un tableau d’objets contenant le prénom et le nom de certaines personnes et que nous voulons trier le tableau en fonction du nom de famille des personnes. Nous devons passer une fonction à l’intérieur de la fonction sort(), qui comparera le nom de famille de chaque personne, et si le nom de famille de la première personne est inférieur au nom de famille de la deuxième personne, la fonction renverra un valeur négative, et si elle est supérieure, la fonction renverra une valeur positive ; et si les deux sont égaux, la fonction retournera zéro. Voir le code ci-dessous.

var a = [
  {FirsName: 'Ellie', LastName: 'Williams'},
  {FirstName: 'Lara', LastName: 'Croft'}
];
function SortArray(x, y) {
  if (x.LastName < y.LastName) {
    return -1;
  }
  if (x.LastName > y.LastName) {
    return 1;
  }
  return 0;
}
var s = a.sort(SortArray);
console.log(s);

Production:

(2) [{…}, {…}]
0: {FirstName: "Lara", LastName: "Croft"}
1: {FirsName: "Ellie", LastName: "Williams"}
length: 2

Comme vous pouvez le voir, le tableau est trié en fonction du nom de famille. Vous pouvez également augmenter le nombre d’objets à l’intérieur du tableau. Vous pouvez également trier le tableau en fonction du prénom.

Trier le tableau d’objets par ordre alphabétique à l’aide des fonctions localeCompare() et sort() en JavaScript

Au lieu d’utiliser la condition if, vous pouvez également utiliser la fonction localeCompare() pour comparer les chaînes. Il fournit de nombreuses autres options de comparaison que vous pouvez définir dans la fonction. Par exemple, comparons le tableau d’objets ci-dessus en utilisant la fonction localeCompare(). Voir le code ci-dessous.

var a = [
  {FirsName: 'Ellie', LastName: 'Williams'},
  {FirstName: 'Lara', LastName: 'Croft'}
];
function SortArray(x, y) {
  return x.LastName.localeCompare(y.LastName);
}
var s = a.sort(SortArray);
console.log(s);

Production:

(2) [{…}, {…}]
0: {FirstName: "Lara", LastName: "Croft"}
1: {FirsName: "Ellie", LastName: "Williams"}
length: 2

La sortie est la même que dans la méthode ci-dessus. Vous pouvez également définir la fonction pour ignorer les ponctuations et les caractères spéciaux lors de la comparaison. Par exemple, si nous avons une ponctuation avant le nom de famille d’une personne, la fonction ne triera pas le tableau. Dans ce cas, nous pouvons utiliser la fonction localeCompare() et la configurer pour ignorer les ponctuations lors de la comparaison. Voir le code ci-dessous.

var a = [
  {FirsName: 'Ellie', LastName: ',Williams'},
  {FirstName: 'Lara', LastName: 'Croft'}
];
function SortArray(x, y) {
  return x.LastName.localeCompare(y.LastName, 'fr', {ignorePunctuation: true});
}
var s = a.sort(SortArray);
console.log(s);

Production:

(2) [{…}, {…}]
0: {FirstName: "Lara", LastName: "Croft"}
1: {FirsName: "Ellie", LastName: ",Williams"}
length: 2

Le tableau est trié en fonction du nom de famille même s’il y a une ponctuation. Vous pouvez également ignorer les caractères spéciaux s’ils sont présents dans la chaîne en définissant la sensibilité de la fonction localeCompare() sur base, comme indiqué ci-dessous.

x.LastName.localeCompare(y.LastName, 'en', {sensitivity: 'base'});

Consultez ce lien pour plus de détails sur la fonction localeCompare().

Trier le tableau d’objets par ordre alphabétique à l’aide des fonctions Collator() et sort() en JavaScript

Au lieu d’utiliser la condition if, vous pouvez également utiliser la fonction Collator() pour comparer les chaînes. Par exemple, comparons le tableau d’objets ci-dessus à l’aide de la fonction Collator(). Voir le code ci-dessous.

const collator = new Intl.Collator('en');
var a = [
  {FirsName: 'Ellie', LastName: 'Williams'},
  {FirstName: 'Lara', LastName: 'Croft'}
];
function SortArray(x, y) {
  return collator.compare(x.LastName, y.LastName);
}
var s = a.sort(SortArray);
console.log(s);

Production:

(2) [{…}, {…}]
0: {FirstName: "Lara", LastName: "Croft"}
1: {FirsName: "Ellie", LastName: "Williams"}
length: 2

La sortie est la même que dans les méthodes ci-dessus. Vous pouvez également changer l’ordre de tri en décroissant en changeant la place des deux arguments dans la fonction collator.compare(). Vous pouvez également utiliser la fonction Collator() pour comparer des chaînes d’une langue différente ; il vous suffit d’initialiser l’objet assembleur avec cette langue. Par exemple, dans le code ci-dessus, nous avons utilisé en pour la langue anglaise. Consultez ce lien pour plus de détails sur la fonction Collator().