Comment trier un tableau d'objets en JavaScript –

Si vous avez un tableau d'objets à trier dans un certain ordre, vous serez peut-être tenté de rechercher une bibliothèque JavaScript. Mais avant cela, souvenez-vous que vous pouvez effectuer un tri assez soigné avec la fonction native Array.sort .

Dans cet article, nous allons vous montrer comment trier un tableau d'objets en JavaScript avec

Pour suivre, vous aurez besoin d'une connaissance des concepts de base de JavaScript, tels que la déclaration de variables, l'écriture de fonctions et les instructions conditionnelles. Nous utiliserons également la syntaxe ES6. Vous pouvez obtenir un rappel à ce sujet via notre vaste collection de guides ES6 . Cet article a été mis à jour en novembre 2019.

Tri de tableaux de base

Par défaut, la fonction JavaScript Array.sort convertit chaque élément du tableau. doit être trié dans une chaîne et comparé dans l'ordre Point de code Unicode .

 const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort (); // retourne [ 1, 4, 9, 'afterdeck', 'zebroid' ]

barre constante = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort (); // retourne [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

Vous vous demandez peut-être pourquoi 32 vient avant 5. Ce n'est pas logique, hein? Eh bien, en fait c'est. Cela est dû au fait que chaque élément du tableau est d'abord converti en chaîne et que "32" précède "5" dans l'ordre Unicode.

Il convient également de noter que, contrairement à beaucoup d'autres fonctions de tableau JavaScript, Array.sort change ou modifie le tableau trié.

 const baz = ['My cat ate my homework', 37, 9, 5, 17];
baz.sort (); // le tableau est modifié
console.log (baz); // montre [ 17, 37, 5, 9, 'My cat ate my homework' ]

Pour éviter cela, vous pouvez créer une nouvelle instance du tableau à trier et la modifier à la place. Cela est possible en utilisant une méthode de tableau qui renvoie une copie du tableau. Par exemple, Array.slice :

 const trié par Baz = baz.slice (). Sort (); // une nouvelle instance du tableau baz est créée et triée

Si vous préférez une syntaxe plus récente, vous pouvez utiliser l'opérateur de diffusion pour le même effet:

 const rangBaz = [...baz] .sort (); // une nouvelle instance du tableau baz est créée et triée

Le résultat est le même dans les deux cas:

 console.log (baz); // ['My cat ate my homework', 37, 9, 5, 17];
console.log (sortiBaz); // [ 17, 37, 5, 9, 'My cat ate my homework' ]

Essayez-le

Voir le stylo
MWWqbKY de SitePoint ( @SitePoint )
sur CodePen .

. Array.sort à lui seul ne serait pas très utile pour trier un tableau d'objets. Heureusement, la fonction utilise un paramètre facultatif compareFunction qui ordonne de trier les éléments du tableau en fonction de la valeur renvoyée par la fonction de comparaison.

Utilisation des fonctions de comparaison pour trier

Disons que ] foo et bar sont les deux éléments comparés par la fonction de comparaison et la valeur de retour de la fonction de comparaison est définie comme suit:

1. inférieur à 0 – de foo vient avant barre
2. supérieure à 0 – barre vient avant foo
3. égale à 0 – foo et bar sont laissés inchangés les uns par rapport aux autres.

Voyons un exemple simple avec un tableau de nombres:

 const nums = [79, 48, 12, 4];

fonction comparer (a, b) {
  si (a> b) retourne 1;
  si (b> a) retourne -1;

  retourne 0;
}

nums.sort (comparer);
// = 4, 12, 48, 79

Nous pouvons reformuler ceci un peu, en soustrayant un à b nous donnera également la valeur de retour:

 function compare (a, b) {
  retourne a - b;
}

C'est maintenant un bon candidat pour une fonction de flèche:

 nums.sort ((a, b) => a - b);

Si vous n'êtes pas familier avec les fonctions de flèches, vous pouvez en savoir plus à leur sujet ici: ES6 Fonctions de flèches: syntaxe grasse et concise en JavaScript .

Comment trier un tableau d'objets en JavaScript

Voyons maintenant comment trier un tableau d'objets. Pour cette démonstration, nous utiliserons un ensemble de chanteurs:

 const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

Nous pouvons utiliser la fonction suivante de comparaison pour trier ce tableau de chanteurs en fonction de leur groupe:

 fonction comparer (a, b) {
  // Utiliser toUpperCase () pour ignorer la casse de caractères
  const bandA = a.band.toUpperCase ();
  const bandB = b.band.toUpperCase ();

  Laisser la comparaison = 0;
  si (bandeA> bandeB) {
    comparaison = 1;
  } sinon si (bandA <bandB) {
    comparaison = -1;
  }
  comparaison de retour;
}

singers.sort (comparer);

/ * retourne [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] * /

Pour inverser l'ordre de tri, vous pouvez inverser la valeur de retour de la fonction de comparer :

 de fonction (a, b) {
  ...

  // inverser la valeur de retour en multipliant par -1
  comparaison de retour * -1;
}

Essayez-le

Voir le stylo
GRRXNvY de SitePoint ( @SitePoint )
sur CodePen .

Création d'un tri dynamique Fonction

Terminons en rendant cela plus dynamique. Créons une fonction de tri, que vous pouvez utiliser pour trier un tableau d’objets, dont les valeurs sont des chaînes ou des nombres. Cette fonction a deux paramètres: la clé à trier et l'ordre des résultats (ascendant ou descendant):

 const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

function compareValues ​​(key, order = 'asc') {
  fonction de retour innerSort (a, b) {
    if (! a.hasOwnProperty (clé) ||! b.hasOwnProperty (clé)) {
      // la propriété n'existe sur aucun objet
      retourne 0;
    }

    const varA = (typeof a [key] === 'chaîne')
      ? un [key] .to UpperCase (): un [key];
    const varB = (typeof b [key] === 'chaîne')
      ? b [key] .to UpperCase (): b [key];

    Laisser la comparaison = 0;
    si (varA> varB) {
      comparaison = 1;
    } sinon si (varA <varB) {
      comparaison = -1;
    }
    revenir (
      (order === 'desc')? (comparaison * -1): comparaison
    )
  };
}

Et voici comment vous l’utiliseriez:

 // le tableau est trié par bande, par ordre croissant par défaut.
singers.sort (compareValues ​​('band'));

// le tableau est trié par bande dans l'ordre décroissant
singers.sort (compareValues ​​('groupe', 'desc'));

// le tableau est trié par nom dans l'ordre croissant
singers.sort (compareValues ​​('name'));

// tableau est trié par date si la naissance dans l'ordre décroissant
singers.sort (compareValues ​​('born', 'desc'));

Essayez-le

Voir le stylo
OJJopmx de SitePoint ( @SitePoint )
sur CodePen .

Dans le code précédent , la méthode hasOwnProperty est utilisée pour vérifier si la propriété spécifiée est définie sur chaque objet et n’a pas été héritée via la chaîne de prototypes. Si elle n'est pas définie sur les deux objets, la fonction renvoie 0 ce qui fait que l'ordre de tri reste tel quel (c'est-à-dire que les objets restent inchangés l'un par rapport à l'autre).

L'opérateur de type est également utilisé pour vérifier le type de données de la valeur de la propriété. Cela permet à la fonction de déterminer la méthode appropriée pour trier le tableau. Par exemple, si la valeur de la propriété spécifiée est une chaîne une méthode toUpperCase est utilisée pour convertir tous ses caractères en majuscule, ainsi la casse des caractères est ignorée lors du tri.

Vous pouvez adapter la fonction ci-dessus à d'autres types de données et à tout autre besoin de votre script.

String.prototype.localeCompare ()

Dans notre exemple ci-dessus, nous souhaitons pouvoir trier un tableau d'objets. , dont les valeurs sont des chaînes ou des nombres. Si, toutefois, vous savez que vous ne traiterez que des objets dont les valeurs sont des chaînes, vous pouvez nettoyer un peu le code à l'aide de la méthode JavaScript localeCompare .

Cette méthode retourne un nombre indiquant si une chaîne vient avant, après ou est identique à une chaîne donnée dans l'ordre de tri. Cela permet de faire une sorte de tableau insensible à la casse:

 ['bjork', 'Bjork', 'Björk'] .sort ();
// [ 'Bjork', 'Björk', 'bjork' ]

['bjork', 'Bjork', 'Björk'] .sort ((a, b) => a.localeCompare (b));
// [ 'bjork', 'Bjork', 'Björk' ]

En termes de notre fonction compareValues ​​cela signifie que nous pourrions écrire:

 function compareValues ​​(key, order = 'asc') {
  fonction de retour innerSort (a, b) {
    if (! a.hasOwnProperty (clé) ||! b.hasOwnProperty (clé)) renvoie 0;
    comparaison de const = a [key] .localeCompare (b [key]);

    revenir (
      (order === 'desc')? (comparaison * -1): comparaison
    )
  };
}

Pour en savoir plus sur localeCompare sur MDN .

Conclusion

Voilà, voici une brève introduction à la manière de trier un tableau d'objets à l'aide de JavaScript. Bien que de nombreuses bibliothèques offrent à ce type de capacité de tri dynamique comme il a été démontré, il n’est pas si difficile de mettre en oeuvre cette fonctionnalité vous-même. De plus, il est bon de comprendre ce qui se passe sous le capot.

Olayinka est un développeur autodidacte de logiciels complets de Lagos. Il passe son temps à gazouiller, à effectuer des recherches universitaires à prendre des photos, à concevoir et à écrire du code … Vous savez, les choses amusantes habituelles.