Trier un tableau d'objets

Introduction

Dans ce laboratoire, nous allons explorer la manière de trier un tableau d'objets en fonction des propriétés et des ordres fournis. Nous utiliserons la méthode Array.prototype.sort() et la méthode Array.prototype.reduce() pour y parvenir. Le laboratoire donnera une compréhension pratique de la manière de manipuler des tableaux d'objets en JavaScript.

Skills Graph

Comment trier un tableau d'objets en JavaScript

Pour trier un tableau d'objets en JavaScript, vous pouvez utiliser la méthode Array.prototype.sort() et la méthode Array.prototype.reduce() sur le tableau props avec une valeur par défaut de 0.

Voici une fonction exemple, orderBy, qui trie un tableau d'objets en fonction des propriétés et des ordres spécifiés :

const orderBy = (arr, props, orders = ["asc"]) =>
  [...arr].sort((a, b) =>
    props.reduce((acc, prop, i) => {
      if (acc === 0) {
        const [p1, p2] =
          orders[i] === "desc" ? [b[prop], a[prop]] : [a[prop], b[prop]];
        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
      }
      return acc;
    }, 0)
  );

Pour utiliser cette fonction, passez un tableau d'objets, un tableau de propriétés par lesquelles trier et un tableau optionnel d'ordres. Si aucun tableau orders n'est fourni, la fonction triera par 'asc' par défaut.

Voici quelques exemples d'utilisation de la fonction orderBy :

const users = [
  { name: "fred", age: 48 },
  { name: "barney", age: 36 },
  { name: "fred", age: 40 }
];

// trier par nom dans l'ordre croissant et âge dans l'ordre décroissant
orderBy(users, ["name", "age"], ["asc", "desc"]);
// Sortie : [{name: 'barney', age: 36}, {name: 'fred', age: 48}, {name: 'fred', age: 40}]

// trier par nom dans l'ordre croissant et âge dans l'ordre croissant (ordre par défaut)
orderBy(users, ["name", "age"]);
// Sortie : [{name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}]

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur le tri d'un tableau d'objets. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.