Array von Objekten in TypeScript sortieren

1. TypeScript-Objekte
2. TypeScript-Array von Objekten
3. die sort()-Methode in TypeScript

Dieser Artikel zeigt, wie Sie ein Array von Objekten in TypeScript sortieren.

TypeScript-Objekte

TypeScript ist eine stark typisierte Sprache. Es unterstützt verschiedene Typen wie Primitive, Arrays und Objekttypen.

Der Objekttyp ist ein spezieller Typ, der Daten mit Eigenschaften darstellen kann. Ein TypeScript-Objekt sieht aus wie ein JSON-Objekt, wie im Folgenden gezeigt.

{ id: 001, username: 'rick' }

Die id und username sind die beiden Eigenschaften des obigen Objekts. Die Werte wurden auch jeder Eigenschaft zugewiesen.

In TypeScript können benutzerdefinierte Objekttypen mithilfe von Schnittstellen erstellt werden. Die Schnittstellen ermöglichen es Ihnen, Objektstrukturen anzulegen, wie im Folgenden gezeigt.

interface employee {
    empId: number,
    empDesignation: string
}

Die obige employee-Schnittstelle definiert ein employee-Objekt mit zwei Eigenschaften, empId und empDesignation, die Zahlen- bzw. String-Typen sind.

TypeScript-Array von Objekten

TypeScript unterstützt Array-Typen, die eine Sammlung von Elementen speichern können. Es kann sowohl primitive Typwerte als auch benutzerdefinierte Objekte speichern.

Lassen Sie uns ein Array von employee-Objekten erstellen.

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

Das obige Array employeesList enthält vier employee-Objekte. Manchmal müssen wir diese Objekte nach einer bestimmten Eigenschaft sortieren.

Es ist, als würde SQL Daten nach einer Spalte oder mehreren Spalten ordnen. TypeScript unterstützt das Out-of-the-Box-Sortieren.

Die eingebaute sort()-Methode kann ein Array von Objekten sortieren.

die sort()-Methode in TypeScript

Die Methode sort nimmt ein Array von Elementen und gibt das sortierte Array zurück. Es akzeptiert eine optionale Funktion, die verwendet werden kann, um die Sortierreihenfolge des zurückgegebenen Arrays anzugeben.

Syntax:

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

Das Array ist das Array von Objekten, die wir sortieren werden. Die <custom_function> kann die Sortierreihenfolge angeben.

Da die Anforderung darin besteht, ein Array von Objekten nach einer seiner Eigenschaften zu sortieren, müssen wir die Methode sort verwenden, indem wir eine benutzerdefinierte Funktion übergeben, die die Sortierreihenfolge und die Objekteigenschaft bestimmt.

Lassen Sie uns das Array nach der Eigenschaft id sortieren.

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

Die Pfeilfunktion wurde im obigen Beispiel verwendet, um die Sortierbedingung anzugeben.

Immer wenn die Funktion 1 zurückgibt, bedeutet das, dass das secondObject den höheren Sortiervorrang vor dem firstObject hat. Andernfalls hat das firstObject den höheren Sortierrang.

Dies würde die employeesList-Objekte nach ihrer empId-Eigenschaft in aufsteigender Reihenfolge sortieren.

Ausgabe:

Dasselbe Array kann mit der folgenden Bedingung innerhalb der Pfeilfunktion in absteigender Reihenfolge sortiert werden.

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

Es gibt einige Szenarien, in denen Sie zuerst nach der Eigenschaft empId und dann nach empDesignation sortieren müssen. Wenn der Eigenschaftswert empId für ein bestimmtes Objekt gleich ist, können wir im bedingten Operator nach der Eigenschaft empDesignation suchen.

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
);

Ausgabe:

Wie wir sehen können, haben zwei Objekte die gleiche empId 14. Daher wurden diese beiden Objekte nach der Eigenschaft empDesignation sortiert.

Die Methode sort ist sehr leistungsfähig, wenn es darum geht, Objekte nach ihren Eigenschaften zu ordnen. Es kann auch für die Sortierung komplexer Typen verwendet werden.