Sortierung eines Objektarrays nach Zeichenfolge: 5 Methoden für JavaScript

Sortierung eines Objektarrays nach einer Zeichenfolgeneigenschaft: Eine beliebte Frage von Stack Overflow analysiert

Stellen Sie sich vor: Sie haben eine Liste von Benutzern, Produkten oder Artikeln. Jedes Element ist ein Objekt mit einer Reihe von Eigenschaften: Name, Preis, Datum, Bewertung. Und Sie müssen das Ganze sortieren, sagen wir, nach dem Nachnamen in alphabetischer Reihenfolge. Eine Aufgabe, die einfach erscheint, aber in der Praxis Überraschungen bereithält. Kein Wunder, dass die Frage "Sort array of objects by string property value" auf Stack Overflow tausende Aufrufe und Dutzende Antworten gesammelt hat.

In diesem Artikel geben wir nicht einfach fertigen Code. Wir analysieren 5 Sortiermethoden, von der grundlegenden bis zur fortgeschrittenen, identifizieren typische Fallstricke und zeigen, wie man sie umgeht. Am Ende können Sie beliebige Daten mit links sortieren.

Was ist die Sortierung eines Objektarrays in JavaScript?

In JavaScript gibt es die eingebaute Methode Array.prototype.sort(). Aber mit Objekten funktioniert sie nicht offensichtlich. Wenn Sie sort() ohne Argumente aufrufen, versucht es, Elemente als Zeichenfolgen zu vergleichen. Bei Zahlen führt das zu einer Überraschung: [1, 20, 3].sort() gibt [1, 20, 3] zurück, nicht [1, 3, 20]. Bei Objekten herrscht völliges Chaos.

Daher benötigen wir eine Vergleichsfunktion (Comparator). Sie nimmt zwei Elemente entgegen und gibt zurück:

\n
• eine negative Zahl, wenn das erste Element kleiner als das zweite ist;
\n
• 0, wenn sie gleich sind;
\n
• eine positive Zahl, wenn das erste größer ist.
\n

Hier ist die grundlegende Struktur zum Sortieren eines Objektarrays nach einer Zeichenfolgeneigenschaft:

// Ursprüngliches Array\nconst users = [\n    { name: 'Ivan', age: 25 },\n    { name: 'Anna', age: 30 },\n    { name: 'Boris', age: 22 }\n];\n\n// Sortierung nach dem Feld name\nusers.sort((a, b) => {\n    if (a.name < b.name) return -1;\n    if (a.name > b.name) return 1;\n    return 0;\n});\n\nconsole.log(users);\n// [{ name: 'Anna', age: 30 }, { name: 'Boris', age: 22 }, { name: 'Ivan', age: 25 }]

Dieser Code funktioniert, ist aber umständlich. Schauen wir uns an, wie wir ihn eleganter gestalten können.

5 Methoden zum Sortieren eines Objektarrays nach Zeichenfolge

Methode 1: Klassische Vergleichsfunktion

Die transparenteste Methode. Geeignet für beliebige Zeichenfolgen, einschließlich Kyrillisch, vorausgesetzt, Sie verwenden die korrekte alphabetische Reihenfolge. Der Vergleich mit < und > berücksichtigt die Zeichencodes in Unicode, was für die russische Sprache ein unerwartetes Ergebnis liefert: «ё» landet am Ende des Alphabets, und «я» in der Nähe von «а».

const products = [\n    { title: 'Apfel', price: 50 },\n    { title: 'Tanne', price: 200 },\n    { title: 'Ananas', price: 150 }\n];\n\n// Problem: 'Tanne' wird nach 'Apfel' einsortiert\nproducts.sort((a, b) => {\n    if (a.title < b.title) return -1;\n    if (a.title > b.title) return 1;\n    return 0;\n});

Wann verwenden: für englische Zeichenfolgen, bei denen die alphabetische Reihenfolge mit Unicode übereinstimmt.

Methode 2: localeCompare — Retter des Kyrillischen

Die Methode String.prototype.localeCompare() berücksichtigt die Sortierregeln für eine bestimmte Sprache. Für Russisch übergeben wir 'ru'.

users.sort((a, b) => a.name.localeCompare(b.name, 'ru'));\n\nconsole.log(users);\n// [{ name: 'Anna', age: 30 }, { name: 'Boris', age: 22 }, { name: 'Ivan', age: 25 }]

Dieser Code ist sauberer, kürzer und verarbeitet «ё», «й» und andere Buchstaben korrekt. Wenn Sie absteigend sortieren möchten, tauschen Sie einfach a und b:

users.sort((a, b) => b.name.localeCompare(a.name, 'ru'));

Wann verwenden: immer, wenn Sie mit Kyrillisch oder mehrsprachigen Daten arbeiten.

Methode 3: Groß-/Kleinschreibung beachten

Standardmäßig ist localeCompare groß-/kleinschreibungsempfindlich: «apple» wird vor «Banana» einsortiert, weil der Kleinbuchstabe eine