Array von Objekten in TypeScript sortieren
![Array von Objekten in TypeScript sortieren](/img/TypeScript/feature-image---typescript-sort-array-of-objects.webp)
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.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.