So sortieren Sie ein Array von Objekten in JavaScript

Blog

So sortieren Sie ein Array von Objekten in JavaScript

So sortieren Sie ein Array von Objekten in JavaScript

In diesem Artikel zeige ich Ihnen, wie Sie ein Array von Objekten in JavaScript problemlos sortieren können.

Wenn Sie ein Array von Objekten haben, die Sie in einer bestimmten Reihenfolge sortieren müssen, könnte die Versuchung groß sein, nach einer JavaScript-Bibliothek zu greifen. Bevor Sie dies tun, denken Sie jedoch daran, dass Sie mit der nativen Array.sort-Funktion ziemlich ordentlich sortieren können.

Um diesem Artikel folgen zu können, benötigen Sie Kenntnisse der grundlegenden JavaScript-Konzepte, z. B. das Deklarieren von Variablen, das Schreiben von Funktionen und bedingte Anweisungen. Ich werde auch die ES6-Syntax verwenden.

Grundlegende Array-Sortierung

Standardmäßig ist das JavaScript |_+_| -Funktion konvertiert jedes Element im zu sortierenden Array in einen String und vergleicht sie in Unicode-Codepunkt Auftrag.

Array.sort

Sie fragen sich vielleicht, warum 30 vor 4 kommt. Nicht logisch, oder? Nun, tatsächlich ist es so. Dies geschieht, weil jedes Element im Array zuerst in einen String umgewandelt wird und |_+_| kommt vor |_+_| in Unicode-Reihenfolge.

Es ist auch erwähnenswert, dass |_+_| . im Gegensatz zu vielen anderen JavaScript-Array-Funktionen tatsächlich ändert oder mutiert das Array, das es sortiert.

const foo = [8, 3, 5, 'whistle', 'fish']; foo.sort(); // returns [3, 5, 8, 'fish', 'whistle'] const bar = [4, 19, 30, function(){}, {key: 'value'}]; bar.sort(); // returns [ 19, 30, 4, { key: 'value' }, [Function] ]

Um dies zu vermeiden, können Sie eine neue Instanz des zu sortierenden Arrays erstellen und diese stattdessen ändern.

'30'

Beachten Sie die Verwendung von |_+_| Operator, um eine neue Instanz von |_+_| zu erstellen. Darüber kannst du mehr lesen Hier .

bei App-Käufen flattern

Versuch es

JS Bin auf jsbin.com

Verwenden von |_+_| allein wäre nicht sehr nützlich, um ein Array von Objekten zu sortieren. Zum Glück benötigt die Funktion ein optionales |_+_| Parameter, der bewirkt, dass die Array-Elemente nach dem Rückgabewert der Vergleichsfunktion sortiert werden.

Verwenden von Vergleichsfunktionen zum Sortieren

Sagen wir, dass |_+_| und |_+_| sind die beiden Elemente, die von der Vergleichsfunktion verglichen werden. Wenn der Rückgabewert der Vergleichsfunktion:

  1. kleiner als 0 — |_+_| kommt vor |_+_|
  2. größer als 0 — |_+_| kommt vor |_+_|
  3. gleich 0 — |_+_| und |_+_| bleiben in Bezug aufeinander unverändert

Schauen wir uns ein einfaches Beispiel mit einem Array von Zahlen an:

'4'

Dies kann etwas umgestaltet werden, um den Rückgabewert durch Subtraktion von |_+_| . zu erhalten von |_+_|:

Array.sort

Dies ist nun ein guter Kandidat für eine Pfeilfunktion:

const baz = ['hello world', 31, 5, 9, 12]; baz.sort(); // baz array is modified console.log(baz); // shows [12, 31, 5, 9, 'hello world']

Wenn Sie mit Pfeilfunktionen nicht vertraut sind, können Sie hier mehr darüber lesen: ES6-Pfeilfunktionen: Fette und prägnante Syntax in JavaScript .

Cash-App Online-Login

Sortieren eines Arrays von Objekten in JavaScript

Sehen wir uns nun das Sortieren eines Arrays von Objekten an. Nehmen wir ein Array von Bandobjekten:

const baz = ['hello world', 31, 5, 9, 12]; const newBaz = [...baz].sort(); // new instance of baz array is created and sorted console.log(baz); // 'hello world', 31, 5, 9, 12] console.log(newBaz); // [12, 31, 5, 9, 'hello world']

Wir können folgendes verwenden |_+_| Funktion, um dieses Array von Objekten nach Genre zu sortieren:

spread

Um die Sortierreihenfolge umzukehren, können Sie einfach den Rückgabewert des |_+_| Funktion:

Etihad Stornierungsbedingungen 24 Stunden
baz

Versuch es

JS Bin auf jsbin.com

Erstellen einer dynamischen Sortierfunktion

Lassen Sie uns zum Abschluss dies dynamischer gestalten. Erstellen wir eine Sortierfunktion, mit der Sie ein Array von Objekten sortieren können, deren Werte entweder Zeichenfolgen oder Zahlen sind. Diese Funktion hat zwei Parameter – den Schlüssel, nach dem sortiert werden soll, und die Reihenfolge der Ergebnisse (d. h. aufsteigend oder absteigend).

Array.sort

Und so würden Sie es verwenden:

compareFunction

Versuch es

JS Bin auf jsbin.com

Im obigen Code ist die hasOwnProperty-Methode wird verwendet, um zu überprüfen, ob die angegebene Eigenschaft für jedes Objekt definiert ist und nicht über die Prototypenkette vererbt . Wenn es für die Objekte nicht definiert ist, gibt die Funktion |_+_| zurück, wodurch die Sortierreihenfolge unverändert bleibt (d. h. die Objekte bleiben in Bezug aufeinander unverändert).

Die Art des Betreibers wird auch verwendet, um den Datentyp des Werts der Eigenschaft zu überprüfen. Dadurch kann die Funktion den richtigen Weg zum Sortieren des Arrays bestimmen. Wenn der Wert der angegebenen Eigenschaft beispielsweise ein |_+_| ist, ist ein |_+_| -Methode wird verwendet, um alle ihre Zeichen in Großbuchstaben umzuwandeln, sodass die Groß-/Kleinschreibung beim Sortieren ignoriert wird.

Sie können die obige Funktion an andere Datentypen und andere Besonderheiten Ihres Skripts anpassen.

weitere Aktion erforderlich Cash-App

String.prototype.localeCompare()

In unserem obigen Beispiel möchten wir ein Array von Objekten sortieren können, deren Werte entweder Strings oder Zahlen sind. Wenn Sie jedoch wissen, dass Sie es nur mit Objekten zu tun haben, deren Werte Strings sind, können Sie den Code mit |_+_| . von JavaScript etwas aufräumen Methode.

Diese Methode gibt eine Zahl zurück, die angibt, ob eine Zeichenfolge vor, nach oder in der Sortierreihenfolge einer bestimmten Zeichenfolge entspricht. Es ermöglicht eine Sortierung eines Arrays, bei der die Groß-/Kleinschreibung nicht beachtet wird:

a

In Bezug auf unsere |_+_| Funktion, das heißt, wir könnten schreiben:

b

Sie können mehr darüber lesen localeVergleichen Sie auf MDN .

Abschluss

Da haben Sie es also – eine kurze Einführung in das Sortieren eines Arrays von Objekten. Obwohl viele JavaScript-Bibliotheken diese Art der dynamischen Sortierung bieten (z. Unterstrich.js , Lodash und Zucker ), wie gezeigt, ist es gar nicht so schwer, diese Art von Funktionalität selbst zu implementieren.

Wenn Sie Fragen oder Anmerkungen haben, können Sie gerne ein Gespräch beginnen.

Ursprünglich veröffentlicht von Olayinka Omole at sitepoint.com

#javascript