Array von Objekten in JavaScript sortieren (Comparator-Builder) | We.Inc
Bau dir per Klick einen Comparator: Sortiere Objekte nach einer Zahl, einem String, einem Datum oder zwei Schlüsseln, mit localeCompare-Optionen, und sieh Ergebnis und Code nebeneinander.
Array von Objekten in JavaScript sortieren
Übergib sort eine Vergleichsfunktion, die die gewünschte Eigenschaft betrachtet. Für Zahlen gibst du a.price - b.price zurück. Für Text gibst du a.name.localeCompare(b.name) zurück. Für Datumswerte ziehst du die Zeitstempel voneinander ab. Ein negatives Ergebnis setzt a nach vorn, ein positives b. Nutze toSorted statt sort, wenn die ursprüngliche Reihenfolge erhalten bleiben muss.
(a, b) => Date.parse(a.joined) - Date.parse(b.joined)
a und b tauschen
Boolean (true zuerst)
(a, b) => Number(b.active) - Number(a.active)
a und b tauschen
Beim Sortieren von Objekten stolpern viele aus drei Gründen: Das Standard-sort vergleicht alles als Text, Großbuchstaben landen bei einem einfachen Kleiner-als-Vergleich vor Kleinbuchstaben, und sort schreibt das übergebene Array um. Mit dem Builder unten kannst du jeden dieser Schalter an einer kleinen Teamliste umlegen und zusehen, wie sich die Reihenfolge ändert, mit dem passenden Comparator zum Kopieren.
Wähle die Eigenschaft, nach der sortiert wird: Name, Alter, Startdatum oder ein Ticketcode, der Buchstaben und Ziffern mischt.
Wähle aufsteigend oder absteigend und bei Textschlüsseln einen einfachen Vergleich oder localeCompare mit der numeric-Option.
Füge einen zweiten Schlüssel hinzu, um Gleichstände aufzulösen, zum Beispiel zuerst Team, dann Name.
Kopiere den erzeugten Code. Die Tabelle zeigt die Reihenfolge, die dein Comparator gerade erzeugt.
Ruf sort() bei Zahlen oder Objekten nie ohne Funktion auf. Ohne Comparator wird jeder Wert in einen String umgewandelt, sodass 10 vor 9 landet und Objekte alle zu [object Object] werden.
Gib eine Zahl zurück, nicht true oder false. Ein boolesches Ergebnis wird zu 1 oder 0 umgewandelt und liefert eine unzuverlässige Reihenfolge.
Sortierst du eine lange Liste mit localeCompare? Erzeuge einen einzigen Intl.Collator und übergib seine compare-Methode; laut MDN ist das bei großen Arrays schneller.
Setze Datensätze mit fehlendem Wert bewusst ans Ende, zum Beispiel indem du vor dem Subtrahieren auf null prüfst, damit sie sich nicht über die Liste verteilen.
Häufige Fragen
Wie sortiere ich ein Array von Objekten nach einer Eigenschaft?
Ruf people.sort((a, b) => a.age - b.age) für eine Zahleneigenschaft oder people.sort((a, b) => a.name.localeCompare(b.name)) für einen String auf. Tausche a und b, um die Richtung umzukehren.
Wie sortiere ich nach zwei Feldern?
Vergleiche das erste Feld und greif nur bei Gleichstand auf das zweite zurück: (a, b) => a.team.localeCompare(b.team) || a.age - b.age. Das || funktioniert, weil ein Gleichstand 0 zurückgibt, was als false gilt.
Ist sort in JavaScript stabil?
Ja. Seit ECMAScript 2019 muss sort stabil sein, sodass als gleich verglichene Elemente ihre vorherige Reihenfolge behalten. Deshalb ergibt erst nach Name und dann nach Team sortieren eine nach Team gruppierte Liste mit geordneten Namen in jeder Gruppe.
Verändert sort das ursprüngliche Array?
Ja. sort ordnet das Array an Ort und Stelle um und gibt dasselbe Array zurück. toSorted nimmt dieselbe Vergleichsfunktion, gibt aber ein neues Array zurück und lässt die ursprüngliche Reihenfolge unangetastet. Es ist seit Juli 2023 in allen wichtigen Browsern verfügbar.
Warum werden kleingeschriebene Namen nach großgeschriebenen sortiert?
Ein einfacher Vergleich mit < oder > vergleicht Zeichencodes, und jeder Großbuchstabe hat einen niedrigeren Code als jeder Kleinbuchstabe. localeCompare folgt stattdessen dem Alphabet der Sprache und behandelt mit { sensitivity: 'base' } auch Akzente und Groß- und Kleinschreibung als gleich.
Was die Vergleichsfunktion wirklich zurückgibt
sort schaut nur auf das Vorzeichen der zurückgegebenen Zahl. Unter null heißt, a kommt vor b, über null heißt, b kommt zuerst, und null heißt, beide bleiben, wie sie sind. Die Größe der Zahl spielt keine Rolle, deshalb funktioniert Subtraktion für Zahlen und Datumswerte.
Für Text funktioniert Subtraktion nicht, denn 'b' - 'a' ergibt NaN. localeCompare gibt für Strings eine negative Zahl, null oder eine positive Zahl zurück und passt damit direkt in dasselbe Muster.
Datumswerte, fehlende Werte und gemischte Typen
Date-Objekte ergeben beim Subtrahieren eine Anzahl Millisekunden, also sortiert a.joined - b.joined die ältesten zuerst. Als Text im ISO-Format gespeicherte Datumswerte (2026-10-14) sortieren mit localeCompare ebenfalls korrekt, weil das Jahr vorne steht, andere Formate wie 14/10/2026 dagegen nicht.
Undefined-Elemente werden immer ans Ende verschoben und nie an deine Funktion übergeben. Eine Eigenschaft, die an einem Objekt undefined ist, ist etwas anderes: Das Objekt erreicht deinen Comparator trotzdem, also prüfe das selbst.
Warum ein einfaches sort() Zahlen falsch sortiert
Ohne Vergleichsfunktion wird jedes Element in einen String umgewandelt und nach UTF-16-Codeeinheiten verglichen, sodass das erste Zeichen entscheidet.
Standardreihenfolge im Vergleich zu einem numerischen Comparator
Der Standard setzt 100 vor 25, weil der Text '1' vor '2' kommt.
Sortieren nach mehreren Schlüsseln, sprachbewusst und ohne Mutation
Team von A bis Z, dann die Ältesten zuerst, ohne das Original anzufassen
Die ||-Kette geht nur zum nächsten Schlüssel, wenn der vorherige Vergleich 0 ergibt. toSorted gibt ein neues Array zurück.
Ein Intl.Collator für eine lange Liste
numeric: true ordnet T-2 vor T-10, und sensitivity: 'base' ignoriert Groß- und Kleinschreibung sowie Akzente.
Ein wiederverwendbarer sortBy-Helfer
Übergib die Schlüsselnamen in Reihenfolge. Ein Minuszeichen vor einem Schlüssel sortiert ihn absteigend.
Comparator-Builder
Wähle, wie die Beispiel-Teamliste sortiert wird, und Tabelle und Code aktualisieren sich gemeinsam.
Sortieren nach
Dann nach (bei Gleichstand)
Nichts
Richtung
Aufsteigend
Absteigend
Textvergleich
Einfaches < und >
localeCompare
localeCompare, numerisch und ohne Groß-/Kleinschreibung
Beispielliste für den Comparator-Builder (ursprüngliche Reihenfolge)