Trier un tableau d'objets dans TypeScript

1. Objets TypeScript
2. Tableau d’objets TypeScript
3. la méthode sort() dans TypeScript

Cet article montre comment trier un tableau d’objets dans TypeScript.

Objets TypeScript

TypeScript est un langage fortement typé. Il prend en charge divers types tels que les primitives, les tableaux et les types d’objets.

Le type d’objet est un type spécial qui peut représenter des données avec des propriétés. Un objet TypeScript ressemble à un objet JSON, comme illustré ci-dessous.

{ id: 001, username: 'rick' }

Le id et le nom d'utilisateur sont les deux propriétés de l’objet ci-dessus. Les valeurs ont également été attribuées à chaque propriété.

Dans TypeScript, des types d’objets personnalisés peuvent être créés à l’aide d’interfaces. Les interfaces vous permettent de créer des structures d’objets, comme illustré ci-dessous.

interface employee {
    empId: number,
    empDesignation: string
}

L’interface employee ci-dessus définit un objet employee avec deux propriétés, empId et empDesignation, qui sont respectivement de type nombre et chaîne.

Tableau d’objets TypeScript

TypeScript prend en charge les types de tableau qui peuvent stocker une collection d’éléments. Il peut également stocker à la fois des valeurs de type primitif et des objets personnalisés.

Créons un tableau d’objets employee.

let employeesList: Array<employee> = [
    {empId: 20, empDesignation: 'senior engineer'},
    {empId: 14, empDesignation: 'junior engineer'},
    {empId: 25, empDesignation: 'program manager'},
    {empId: 12, empDesignation: 'director'}
]

Le tableau employeesList ci-dessus contient quatre objets employé. Parfois, nous devons trier ces objets par une propriété donnée.

C’est comme SQL ordonne les données par une colonne ou plusieurs colonnes. TypeScript prend en charge le tri hors de la boîte.

La méthode intégrée sort() peut trier un tableau d’objets.

la méthode sort() dans TypeScript

La méthode sort prend un tableau d’éléments et renvoie le tableau trié. Il accepte une fonction facultative qui peut être utilisée pour spécifier l’ordre de tri du tableau renvoyé.

Syntaxe:

//1.
Array.sort()
//2.
Array.sort(<custom_function>)

Le Array est le tableau des objets que nous allons trier. La fonction optionnelle <custom_function> peut spécifier l’ordre de tri.

Puisque l’exigence est de trier un tableau d’objets par l’une de ses propriétés, nous devons utiliser la méthode sort en passant une fonction personnalisée qui décide de l’ordre de tri et de la propriété de l’objet.

Trions le tableau par propriété id.

employeesList.sort(
    (firstObject: employee, secondObject: employee) =>
    	(firstObject.empId > secondObject.empId) ? 1 : -1
);

La fonction fléchée a été utilisée dans l’exemple ci-dessus pour spécifier la condition de tri.

Chaque fois que la fonction renvoie 1, cela signifie que le secondObject a la priorité de tri la plus élevée sur le firstObject. Sinon, le firstObject prend la priorité de tri la plus élevée.

Cela trierait les objets employeesList par leur propriété empId dans l’ordre croissant.

Production:

Le même tableau peut être trié par ordre décroissant avec la condition ci-dessous à l’intérieur de la fonction fléchée.

(firstObject: employee, secondObject: employee) =>
	(firstObject.empId > secondObject.empId) ? -1 : 1

Il existe certains scénarios où vous devez d’abord trier par la propriété empId puis empDesignation. Si la valeur de la propriété empId est la même pour un objet donné, nous pouvons vérifier la propriété empDesignation dans l’opérateur conditionnel.

let employeesList: Array<employee> = [
    {empId: 20, empDesignation: 'senior engineer'},
    {empId: 14, empDesignation: 'junior engineer'},
    {empId: 14, empDesignation: 'developer'},
    {empId: 25, empDesignation: 'program manager'},
    {empId: 12, empDesignation: 'director'}
]

employeesList.sort(
    (firstObject: employee, secondObject: employee) =>
    	(firstObject.empId > secondObject.empId) ? 1 :
    		(firstObject.empId === secondObject.empId) ? (
                (firstObject.empDesignation > secondObject.empDesignation) ? 1 : -1 )
    	: -1
);

Production:

Comme on peut le voir, deux objets ont le même empId 14. Ces deux objets ont donc été triés par la propriété empDesignation.

La méthode sort est très puissante pour classer les objets en fonction de leurs propriétés. Il peut également être utilisé pour le tri de types complexes.