Comment trier un tableau d'objets en JavaScript –

Si vous avez un tableau d'objets à trier dans un certain ordre, la tentation peut être de rechercher une bibliothèque JavaScript. Avant de vous lancer cependant, rappelez-vous que vous pouvez effectuer un tri assez soigné avec la fonction native Array.sort .

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

Pour suivre cet article, 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. Je vais aussi utiliser la syntaxe ES6. Vous pouvez obtenir un rappel à ce sujet grâce à notre vaste collection de guides ES6 .

Tri de tableaux de base

Par défaut, le tableau JavaScript . La fonction sort convertit chaque élément du tableau à trier en une chaîne et les compare dans l'ordre Point de code Unicode .

 const foo = [8, 3, 5, 'whistle', 'fish'];
foo.sort (); // retourne [3, 5, 8, 'fish', 'whistle']

barre constante = [4, 19, 30, function(){}, {key: 'value'}];
bar.sort (); // retourne [ 19, 30, 4, { key: 'value' }, [Function]]

Vous vous demandez peut-être pourquoi 30 vient avant 4. 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 "30" précède "4" 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 = ['hello world', 31, 5, 9, 12];
baz.sort (); // le tableau est modifié
console.log (baz); // montre [12, 31, 5, 9, "hello world"]

Pour éviter cela, vous pouvez créer une nouvelle instance du tableau à trier et la modifier à la place.

 const baz = ['hello world', 31, 5, 9, 12];
const newBaz = [...baz] .sort (); // la nouvelle instance du tableau baz est créée et triée
console.log (baz); // "bonjour le monde", 31, 5, 9, 12]
console.log (newBaz); // [12, 31, 5, 9, "hello world"]

Notez l'utilisation de l'opérateur spread pour créer un nouvel exemple de baz . Vous pouvez en savoir plus sur ici .

Essayez-le

JS Bin sur jsbin.com

Utiliser Array.sort ne serait pas très utile en soi. 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 ] a et b sont les deux éléments comparés par la fonction de comparaison. Si la valeur de retour de la fonction de comparaison est:

1. inférieure à 0 – a est antérieure à b
2. supérieure à 0 – b est antérieure à .
3. égal à 0 – a et b restent inchangés l'un par rapport à l'autre

Voyons un exemple simple avec un tableau de nombres:

 const arr = [1, 2, 30, 4];

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

  retourne 0;
}

arr.sort (comparer);
// = & gt; 1, 2, 4, 30

Cela peut être quelque peu remanié pour obtenir la valeur de retour en soustrayant a à b :

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

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

 arr.sort ((a, b) = & gt; 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 .

Trier un tableau d'objets en JavaScript [19659006] Voyons maintenant comment trier un tableau d'objets. Prenons un tableau d’objets de bande:

 const bandes = [
  { genre: 'Rap', band: 'Migos', albums: 2},
  { genre: 'Pop', band: 'Coldplay', albums: 4},
  { genre: 'Rock', band: 'Breaking Benjamins', albums: 1}
];

Nous pouvons utiliser la fonction suivante pour trier ce tableau d'objets par genre:

 fonction comparer (a, b) {
  // Utiliser toUpperCase () pour ignorer la casse de caractères
  const genreA = a.genre.toUpperCase ();
  const genreB = b.genre.toUpperCase ();

  Laisser la comparaison = 0;
  si (genreA & genre B) {
    comparaison = 1;
  } else if (genreA & lt; genreB) {
    comparaison = -1;
  }
  comparaison de retour;
}

bandes.sort (comparer);

/ * retourne [
{ genre: 'Pop', band: 'Coldplay', albums: 4 },
{ genre: 'Rap', band: 'Migos', albums: 2 },
{ genre: 'Rock', band: 'Breaking Benjamins', albums: 1 }
] * /

Pour inverser l'ordre de tri, vous pouvez simplement 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

JS Bin sur jsbin.com

Création d’une fonction de tri dynamique

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 band = [
  { genre: 'Rap', band: 'Migos', albums: 2},
  { genre: 'Pop', band: 'Coldplay', albums: 4, awards: 13},
  { genre: 'Rock', band: 'Breaking Benjamins', albums: 1}
];

// fonction de tri dynamique
function compareValues ​​(key, order = 'asc') {
  fonction de retour (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;
    if (varA & gt; varB) {
      comparaison = 1;
    } else if (varA & lt; varB) {
      comparaison = -1;
    }
    revenir (
      (ordre == 'desc')? (comparaison * -1): comparaison
    )
  };
}

Et voici comment vous l’utiliseriez:

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

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

// le tableau est trié par albums dans l'ordre croissant
bands.sort (compareValues ​​('albums'));

Essayez-le

JS Bin sur jsbin.com

Dans le code ci-dessus, la méthode hasOwnProperty est utilisée pour vérifier si la propriété spécifiée est définie sur chaque objet et a pas été hérité via la chaîne de prototypes . Si elle n'est pas définie sur les 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 les uns par rapport aux autres).

Le type . L'opérateur 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 ajuster la fonction ci-dessus pour l'adapter à d'autres types de données et à toute autre particularité dont votre script a besoin.

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:

 ["motorhead", "Motorhead", "Mötorhead"] .sort ();
// ["Motorhead", "Mötorhead", "motorhead"]

["motorhead", "Motorhead", "Mötorhead"] .sort ((a, b) => a.localeCompare (b));
// ["motorhead", "Motorhead", "Mötorhead"]

En ce qui concerne notre fonction compareValues ​​cela signifie que nous pourrions écrire:

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

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

Vous pouvez en savoir plus sur localeCompare sur MDN .

Conclusion

Voilà, une brève introduction au tri d'un tableau d'objets. Bien que de nombreuses bibliothèques JavaScript offrent ce type de capacité de tri dynamique (par exemple, Underscore.js Lodash et Sugar ), il n’est pas si difficile à mettre en œuvre. ce genre de fonctionnalité vous-même.

Si vous avez des questions ou des commentaires, n'hésitez pas à engager la conversation.

Cet article a été révisé par les pairs par Moritz Kröger de Giulio Mainardi . , Vildan Softic et Rob Simpson . Merci à tous les pairs examinateurs de SitePoint d’avoir fait du contenu SitePoint le meilleur possible!

Olayinka est un développeur autodidacte de pile complète de Lagos. Il passe son temps à gazouiller, à faire des recherches académiques à prendre des photos, à concevoir et à écrire du code … Vous savez, les choses amusantes habituelles.