Trier un tableau d'objets

JavaScriptJavaScriptBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

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

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28535{{"Trier un tableau d'objets"}} javascript/data_types -.-> lab-28535{{"Trier un tableau d'objets"}} javascript/arith_ops -.-> lab-28535{{"Trier un tableau d'objets"}} javascript/comp_ops -.-> lab-28535{{"Trier un tableau d'objets"}} javascript/cond_stmts -.-> lab-28535{{"Trier un tableau d'objets"}} javascript/array_methods -.-> lab-28535{{"Trier un tableau d'objets"}} javascript/higher_funcs -.-> lab-28535{{"Trier un tableau d'objets"}} javascript/destr_assign -.-> lab-28535{{"Trier un tableau d'objets"}} javascript/spread_rest -.-> lab-28535{{"Trier un tableau d'objets"}} end

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.