Sortieren eines Arrays von Objekten

Dieser Beitrag liegt mir schon eine Weile im Kopf. Heute möchte ich über das Sortieren einer Reihe von Objekten sprechen. Diese Übung geht davon aus, dass Ihr Array einheitlich ist, was bedeutet, dass alle Elemente im Array vom gleichen Typ sind. Der Einfachheit halber gehe ich davon aus, dass Sie wissen, was Sie tun, und wir werden nicht prüfen, ob das Array einheitlich ist.

Darüber hinaus behalten wir diese Funktionalität als Teil des Array-Prototyps bei, sodass Sie sie weiterhin so verwenden können, als wäre es eine native Methode, anstatt Ihr Array als Argument zu übergeben. Eine letzte Anmerkung, bevor wir in den Code eintauchen, ist, dass wir während der Implementierung unserer Lösung genauso gut eine Möglichkeit einwerfen können, das Array aufsteigend oder absteigend zu sortieren.

Das Schlüsselelement

Sehen wir uns das folgende Array von Objekten an.

var arr = [
  { name: "Kubar", age: 38, signedUpAt: new Date("April 3, 2008") },
  { name: "Rudy", age: 2, signedUpAt: new Date("May 25, 2018") },
  { name: "Okan", age: 37, signedUpAt: new Date("June 12, 1998") }
];

Die Eigenschaftswerte in jedem Objekt sind ziemlich zufällig. Du hast name Eigentum fast aussortiert. Age ein numerischer Wert ist, wohingegen signedUpAt ist ein Datumstyp. Ich habe erwähnt, dass die Lösung im Prototyp von Array enthalten ist, also fangen wir dort an.

Array.prototype.sortBy = function(key, ascending = true) {};

Das erste Argument, key, ist der Schlüssel, den wir verwenden werden, um den Wert zu kennen, den wir sortieren möchten. Stellen Sie sich vor, Sie möchten Ihr Array von Objekten nach Name oder Alter sortieren. Der Schlüssel in Ihren Objekten ist das erste Argument, das Sie an sortBy übergeben, damit es nachschlagen kann. Das sekundäre Argument, aufsteigend, ist hier eigentlich ein Bonus. Da Sie einen benutzerdefinierten Sortieralgorithmus schreiben werden, warum wählen Sie nicht die Richtung der Sortierung? Es gibt eigentlich auch einen viel praktischeren Grund dafür. Normalerweise, wenn Sie die Standardeinstellung verwenden sortdas die Werte in aufsteigender Reihenfolge sortiert, können Sie einfach die native verwenden reverse Methode für Arrays, um Werte in absteigender Reihenfolge zu erhalten. Nun, Sie können das nicht in einem Array von Objekten tun, oder? Deshalb schreiben wir diesen Code überhaupt. Objekte sind natürlich nicht sortierbar.

Array.prototype.sortBy = function(key, ascending = true) {
  return this.sort((a, b) => {
    if (ascending) {
      return a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0;
    } else {
      return a[key] > b[key] ? -1 : a[key] < b[key] ? 1 : 0;
    }
  });
};

Wie Sie sehen, huckepack auf die ursprüngliche Sortierung, indem wir nicht das gesamte Objekt mit dem nächsten vergleichen, sondern den Wert des Objekts für einen bestimmten Schlüssel vergleichen. Ignorieren Sie den if-Block mit Ascending für einen Moment und konzentrieren Sie sich einfach auf die folgende Codezeile.

return a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0;

Dieser Code ist der regulären Sortierung sehr ähnlich. Eine längere Erklärung dazu finden Sie hier, im Beschreibungsabschnitt. Wie ich bereits erwähnt habe, verlieren Sie die Funktionalität, um die Werte einer typischen Sortierung mit einem Array von Objekten umzukehren. Deshalb müssen wir einen bedingten Block einführen, um die Sortierreihenfolge in unserer Funktion umzukehren. Es gibt natürlich eine kürzere Schreibweise, indem man den if-else-Block in die bestehenden ternären Anweisungen einfügt, aber dann wäre es so, ziemlich unlesbar.

Array.prototype.sortBy = function(key, ascending = true) {
  return this.sort(
    (a, b) =>
      a[key] > b[key]
        ? ascending
          ? 1
          : -1
        : a[key] < b[key]
          ? ascending
            ? -1
            : 1
          : 0
  );
};

Fazit

Unabhängig davon, ob Sie den besser lesbaren Code wählen oder nicht, ist das Sortieren eines Arrays von Objekten eigentlich trivial. Sie können es jetzt verwenden, indem Sie es in einem gewöhnlichen Array aufrufen.

arr.sortBy("age",false);
arr.sortBy("name");
arr.sortBy("signedUpAt",false);

Wenn die Objekte in Ihrem Array jedoch komplexer sind und darin verschachtelte Objekte enthalten, können Sie diese Methode nicht verwenden. Sie müssten es entweder manuell weiter aufschlüsseln oder sich auf eine rekursive Implementierung verlassen. Mein Ziel in diesem Beitrag war es, die grundlegende Funktionalität zu zeigen, jetzt liegt es an Ihnen, sie entsprechend den Anforderungen Ihres Projekts zu ändern.

Similar Posts

Leave a Reply

Your email address will not be published.