Array.prototype.toSorted() — Methode · JavaScript-Referenz

Signatur

Array.prototype.toSorted(compareFn)

Beschreibung

toSorted() ist die kopierende Version von Array.prototype.sort(). Die Methode erzeugt ein neues Array mit denselben Elementen in sortierter Reihenfolge. Das Ausgangs-Array bleibt dabei unverändert. Das ist besonders nützlich in Umgebungen, in denen Daten unveränderlich bleiben sollen, etwa bei React-State, Redux-Stores, Vue-Props oder funktionaler Programmierung. Bisher war dafür der Umweg [...arr].sort() nötig.

Ohne Vergleichsfunktion werden alle Elemente in Zeichenketten umgewandelt und nach ihren UTF-16-Code-Einheiten sortiert. Deshalb landet 10 vor 9. Für Zahlen, Datumswerte oder Objekte gibt man daher fast immer eine compareFn an. Die Sortierung ist laut Spezifikation stabil: Gleichwertige Elemente behalten ihre ursprüngliche Reihenfolge.

Anders als sort() behandelt toSorted() Lücken in dünn besetzten Arrays (sparse arrays) als undefined. Das Ergebnis ist also nie dünn besetzt. undefined-Werte werden immer ans Ende sortiert, ohne dass compareFn für sie aufgerufen wird. Die Methode ist generisch und funktioniert mit jedem array-ähnlichen Objekt, das eine length-Eigenschaft hat. Sie liefert aber immer ein echtes Array zurück.

Parameter

Name	Typ	Default	Beschreibung
$compareFn	(a: any, b: any) => number	undefined (Vergleich als Zeichenketten)	Vergleichsfunktion, die die Reihenfolge festlegt. Ein negativer Rückgabewert setzt `a` vor `b`, ein positiver setzt `b` vor `a`, bei `0` bleibt die Reihenfolge erhalten. Fehlt sie, werden die Elemente als Zeichenketten nach UTF-16-Code-Einheiten verglichen.

Rückgabewert

Typ

Array

Beschreibung

Ein neues Array mit den sortierten Elementen. Es ist eine flache Kopie: Objekte werden nicht geklont, sondern per Referenz übernommen.

Beispiele

Zahlen sortieren, ohne das Original zu verändern

const preise = [19.99, 5, 120, 42.5];

const aufsteigend = preise.toSorted((a, b) => a - b);
const absteigend = preise.toSorted((a, b) => b - a);

console.log(aufsteigend);
console.log(absteigend);
console.log(preise); // unverändert

[5, 19.99, 42.5, 120] [120, 42.5, 19.99, 5] [19.99, 5, 120, 42.5]

Fallstrick: Standardsortierung vergleicht Zeichenketten

const werte = [10, 9, 1, 100, 25];

console.log(werte.toSorted());
console.log(werte.toSorted((a, b) => a - b));

[1, 10, 100, 25, 9] [1, 9, 10, 25, 100]

Objekte für die Anzeige sortieren (z. B. React-State)

const benutzer = [
  { name: 'Özlem', alter: 34 },
  { name: 'anna', alter: 28 },
  { name: 'Bernd', alter: 34 }
];

// Nach Alter, bei Gleichstand stabil nach ursprünglicher Reihenfolge
const nachAlter = benutzer.toSorted((a, b) => a.alter - b.alter);

// Sprachgerecht nach Name (Umlaute, Groß-/Kleinschreibung)
const collator = new Intl.Collator('de', { sensitivity: 'base' });
const nachName = benutzer.toSorted((a, b) => collator.compare(a.name, b.name));

console.log(nachAlter.map(u => u.name));
console.log(nachName.map(u => u.name));
console.log(benutzer === nachName);

['anna', 'Özlem', 'Bernd'] ['anna', 'Bernd', 'Özlem'] false

Dünn besetzte Arrays und undefined

const lueckenhaft = [3, , undefined, 1];

const sortiert = lueckenhaft.toSorted((a, b) => a - b);
console.log(sortiert);
console.log(1 in sortiert, 3 in sortiert); // keine Lücken mehr

[1, 3, undefined, undefined] true true

// Wichtig · Fallstricke

Flache Kopie: Das Array selbst ist neu, enthaltene Objekte sind aber dieselben Referenzen. Wer sortiert[0].name = 'x' ändert, ändert auch das Objekt im Original.
Standardsortierung ist lexikografisch: Ohne compareFn werden auch Zahlen als Zeichenketten verglichen. Für Texte mit Umlauten ist Intl.Collator oder localeCompare() besser geeignet.
Die Vergleichsfunktion muss konsistent sein: Sie muss eine Zahl zurückgeben, kein boolean. (a, b) => a > b liefert je nach Engine unvorhersehbare Ergebnisse.
Kompatibilität: Die Methode gibt es erst seit ES2023. Chrome/Edge unterstützen sie ab 110, Firefox ab 115, Safari ab 16 und Node.js ab 20. Für ältere Umgebungen gibt es Polyfills (z. B. core-js) oder den Ersatz [...arr].sort(compareFn).
Typisierte Arrays: Für TypedArray gibt es mit TypedArray.prototype.toSorted() eine eigene Variante. Sie sortiert standardmäßig numerisch.
Performance: Jeder Aufruf reserviert Speicher für ein neues Array. Bei sehr großen Arrays in engen Schleifen kann ein In-place-sort() auf einer bereits vorhandenen Kopie effizienter sein.

Siehe auch

Array.prototype.sort() Array.prototype.toReversed() Array.prototype.toSpliced() Array.prototype.with() String.prototype.localeCompare() Intl.Collator