Trier des tableaux d'objets selon un ordre personnalisé

Introduction

Dans ce laboratoire, nous allons explorer la manière d'ordonner un tableau d'objets sur la base d'une propriété donnée et d'un tableau d'ordre personnalisé. Nous utiliserons une combinaison de Array.prototype.reduce() et Array.prototype.sort() pour créer un nouveau tableau trié sur la base de l'ordre fourni dans le tableau order. Ce laboratoire est une excellente occasion d'apprendre à manipuler des tableaux d'objets en JavaScript.

Comment ordonner un tableau d'objets selon l'ordre d'une propriété

Pour ordonner un tableau d'objets selon l'ordre d'une propriété, suivez ces étapes :

1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
2. Utilisez Array.prototype.reduce() pour créer un objet à partir du tableau order avec les valeurs comme clés et leur index original comme valeur.
3. Utilisez Array.prototype.sort() pour trier le tableau donné, en sautant les éléments pour lesquels prop est vide ou n'est pas dans le tableau order.

Voici un extrait de code d'exemple pour ordonner un tableau d'objets selon l'ordre d'une propriété :

const orderWith = (arr, prop, order) => {
  const orderValues = order.reduce((acc, v, i) => {
    acc[v] = i;
    return acc;
  }, {});
  return [...arr].sort((a, b) => {
    if (orderValues[a[prop]] === undefined) return 1;
    if (orderValues[b[prop]] === undefined) return -1;
    return orderValues[a[prop]] - orderValues[b[prop]];
  });
};

Vous pouvez utiliser la fonction orderWith pour ordonner un tableau d'objets selon l'ordre d'une propriété. Par exemple :

const users = [
  { name: "fred", language: "Javascript" },
  { name: "barney", language: "TypeScript" },
  { name: "frannie", language: "Javascript" },
  { name: "anna", language: "Java" },
  { name: "jimmy" },
  { name: "nicky", language: "Python" }
];
orderWith(users, "language", ["Javascript", "TypeScript", "Java"]);
/*
[
  { name: 'fred', language: 'Javascript' },
  { name: 'frannie', language: 'Javascript' },
  { name: 'barney', language: 'TypeScript' },
  { name: 'anna', language: 'Java' },
  { name: 'jimmy' },
  { name: 'nicky', language: 'Python' }
]
*/

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur l'ordonnancement d'un tableau d'objets en fonction de l'ordre d'une propriété. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.