Sortieren Sie eine Reihe von Objekten in JavaScript mit der Sort () -Methode

JavaScript native Array.sort Methoden können auch Objektarrays einfach sortieren! In diesem Artikel wird gezeigt, wie Arrays von Objekten sortiert werden, die Zeichenfolgen, Zahlen und Daten mithilfe der Array.sort -Methode enthalten, und praktische Tipps für die Empfindlichkeit der Handhabung, das Array -Kopieren und gemeinsame Bibliotheken bereitstellen.

Kernpunkte

Die native
• JavaScript Array.sort kann verwendet werden, um Objektarrays zu sortieren, wobei Vergleichsfunktionen verwendet werden, um die Sortierlogik für Zeichenfolgen, Zahlen, Daten und andere Eigenschaften zu definieren.
• Die Vergleichsfunktion in JavaScript gibt eine Nummer zurück, um die Sortierreihenfolge zu bestimmen. Wenn die Ganzzahl weniger als 0 ist, erscheint das erste Element vor dem zweiten Element.
• kann eine dynamische Sortierfunktion erstellen, mit der ein Array von Objekten mit Zeichenfolgen oder numerischen Werten sortiert werden kann. Diese Funktion kann nach dem angegebenen Schlüssel aufsteigend oder absteigend sortiert werden.
Die
• JavaScript Array.sort -Methode ändert das sortierte Original -Array. Um dies zu vermeiden, können Sie die Array.slice -Methode oder den Erweiterungsoperator verwenden, um eine Neuarray -Instanz zu erstellen und zu sortieren.

Grundes Array -Sortieren (und warum es nicht funktioniert)

standardmäßig wandelt die JavaScript Array.sort jedes Element in das Array um, das in eine Zeichenfolge sortiert werden muss, und vergleicht es in Unicode -Codepunktreihenfolge.

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

Sie können neugierig sein, warum 32 vor 5 ist? Es scheint unvernünftig, oder? Eigentlich ist es nicht der Fall. Dies liegt daran, dass jedes Element im Array zuerst in eine Zeichenfolge konvertiert wird und "32" vor "5" in Unicode -Reihenfolge ist.

Verwenden Sie Array.sort nur, um Objektarrays zu sortieren, kann nicht effizient sortiert werden. Glücklicherweise akzeptiert die sort -Methode einen optionalen compareFunction Parameter, mit dem wir das Objektarray sortieren können.

So sortieren Sie Objektarrays in JavaScript

Um ein Array von Objekten zu sortieren, verwenden Sie die Methode sort() mit einer Vergleichsfunktion. Vergleichsfunktionen wenden Regeln an und sortieren die Arrays nach unserer benutzerdefinierten Logik. Sie ermöglichen es uns, das Array von Objekten nach Zeichenfolgen, Ganzzahlen, Daten oder anderen benutzerdefinierten Attributen zu sortieren. Wir werden erklären, wie Vergleichsfunktionen später in diesem Artikel funktionieren.

In dieser Demo werden wir eine Reihe von Sängern verwenden und sie alphabetisch unter ihrem Bandnamen sortieren:

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

Die folgende Vergleichsfunktion vergleicht den (Kapsel-) Namen jedes Bandes:

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

Um die Sortierreihenfolge umzukehren, können Sie den Rückgabewert der Vergleichsfunktion umkehren:

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

Wie funktioniert die Vergleichsfunktion

Die Vergleichsfunktion gibt eine Zahl zurück, mit der die Sortierreihenfolge ermittelt werden, indem die beiden Eingänge (a und b) verglichen werden. Einfach ausgedrückt, wenn die Ganzzahl weniger als 0 ist, erscheint A vor B; Aber wie Sie diese Zahl bestimmen, hängt von Ihnen ab.

Schauen wir uns eine einfache Reihe von Zahlen an:

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

Wir können einige Informationen darüber ausführen, da das Subtrahieren von B von A auch den Wert zurückgibt. Diese Vergleichsfunktion sortiert Array von Zahlen von klein bis groß:

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

Es kann auch als Pfeilfunktion dargestellt werden, ohne die Vergleichsfunktion an anderer Stelle zu definieren:

function compare(a, b) {
  // ...
  // 通过乘以 -1 反转返回值
  return comparison * -1;
}

Wenn Sie mit Pfeilfunktionen nicht vertraut sind, können Sie hier mehr darüber lesen: Pfeilfunktionen in JavaScript.

Wie Sie sehen, kann die Vergleichsfunktion in vielerlei Hinsicht geschrieben werden und die sort() -Methode wird wie angegeben ausgeführt.

Erstellen Sie eine dynamische Sortierfunktion

Lassen Sie uns unser vorheriges Beispiel vervollständigen, um es dynamischer zu machen. Lassen Sie uns eine Sortierfunktion erstellen, mit der Sie ein Array von Objekten sortieren können, deren Werte Zeichenfolgen oder Zahlen sind. Diese Funktion hat zwei Parameter - den Schlüssel, den wir sortieren möchten, und die Reihenfolge der Ergebnisse (d. H. Aufsteigend oder absteigend):

const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79

Hier erfahren Sie:

function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)

im obigen Code wird die hasOwnProperty -Methode verwendet, um zu überprüfen, ob das angegebene Attribut in jedem Objekt definiert ist und nicht über die Prototypkette vererbt wird. Wenn es bei beiden Objekten nicht definiert ist, gibt die Funktion 0 zurück, wodurch die Sortierreihenfolge unverändert bleiben (d. H. Die Objekte bleiben gegenübereinander unverändert).

Der Operator

typeof wird auch verwendet, um den Eigenschaftswerttyp zu überprüfen. Dadurch kann die Funktion den richtigen Weg ermitteln, um das Array zu sortieren. Wenn der Wert der angegebenen Eigenschaft beispielsweise eine Zeichenfolge ist, wird die toUpperCase -Methode verwendet, um alle Zeichen in Großbuchstaben umzuwandeln, sodass beim Sortieren die Zeichenkoffer ignoriert wird.

Sie können die oben genannten Funktionen an andere Datentypen anpassen, sowie alle anderen Anforderungen, die Ihr Skript möglicherweise benötigt.

beliebte Array -Sortierbibliothek

Sie haben möglicherweise nicht die Zeit oder Geduld, Ihre eigenen Sortierfunktionen im nativen JavaScript zu erstellen. Zeit ist Geld und der Code braucht Zeit. Glücklicherweise gibt es eine Vielzahl von Bibliotheken, die alle Ihre Array -Sortieranforderungen erfüllen können. Hier ist eine kurze Liste einiger Hilfsbibliotheken mit Sortierfunktionen ... keine bestimmte Reihenfolge;)

• Array-sort
• unterstrich.js
• sugarjs
• lodash

Schnelle Tipps: Objektarray nach Datum

sortieren

Um das Array von Objekten nach Datumszeichenfolge zu sortieren, müssen Sie nur eine Vergleichsfunktion angeben, die zuerst die Datumszeichenfolge analysiert und voneinander abzieht:

nums.sort((a, b) => a - b);

Schnelle Tipps: Sortieren ohne Änderung des Array

Im Gegensatz zu vielen anderen JavaScript -Array -Funktionen ist Array.sort eine der Methoden, die das Array -Array ändern (ändern), anstatt ein neues Array zurückzugeben. Um dies zu vermeiden, können Sie eine neue Instanz des Arrays erstellen, die sortiert werden soll, und zu ändern. Dies kann verwendet werden, um eine Kopie des Arrays mithilfe einer Array -Methode oder einer Erweiterungssyntax zu erstellen.

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

Erstellen Sie eine Array -Kopie mit Array.slice:

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

Alternativ können Sie den Erweiterungsoperator verwenden, um den gleichen Effekt zu erzielen:

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

In beiden Fällen ist der Ausgang gleich und kann vor dem Sortieren eines Objektarrays verwendet werden.

function compare(a, b) {
  // ...
  // 通过乘以 -1 反转返回值
  return comparison * -1;
}

Schnelle Tipps: Sortieren von Arrays nach Saiten im Fall unempfindlich

In unserem vorherigen Beispiel wollten wir ein Array von Objekten mit Werten sortieren, die Zeichenfolgen oder Zahlen sind. Wenn Sie jedoch wissen, dass Sie nur Objekte verarbeiten, deren Werte Zeichenfolgen sind, können Sie die localeCompare -Methode von JavaScript verwenden, um Ihren Code zu organisieren.

Diese Methode gibt eine Nummer zurück, die angibt, ob die Zeichenfolge vor, nach oder der gleichen String in der Sortierreihenfolge vorliegt. Es ermöglicht die unempfindliche Sortierung von Arrays:

const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79

In Bezug auf unsere compareValues -Funktion bedeutet dies, dass wir so schreiben können:

function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)

Sie können mehr über localeCompare auf MDN lesen.

Schlussfolgerung

Das ist es - eine kurze Einführung in die Sortierung von Arrays von Objekten mit nativem JavaScript. Obwohl viele Bibliotheken diese dynamische Sortierkapazität wie gezeigt bieten, ist es nicht schwierig, diese Fähigkeit selbst zu implementieren. Darüber hinaus ist es auch hilfreich zu wissen, was hinter den Kulissen passiert.

Um ein umfassenderes Verständnis der Grundlage des einheimischen JavaScript zu erstellen, empfehlen wir JavaScript: von Anfängern zu Ninjas. Lernen Sie JavaScript von Grund auf neu, einschließlich ES6, und üben Sie Ihr neues Wissen durch eine Reihe von Projekten.

FAQ, wie Objektarrays in JavaScript sortiert werden

Können Sie Objektarrays in JavaScript sortieren?

Ja. JavaScript bietet integrierte Methoden, um Array-Elemente zu sortieren.

Wie sortiere ich Objektarrays in JavaScript?

Sie können die Methode Array.prototype.sort() verwenden und eine benutzerdefinierte Vergleichsfunktion bereitstellen, um das Array von Objekten in JavaScript zu sortieren. Die Vergleichsfunktion sollte die relevanten Eigenschaften jedes Objekts vergleichen.

Wie sortiert man ein Array von Objekten in JavaScript nach Schlüssel?

Sie können das Array von Objekten dynamisch sortieren, indem Sie Schlüssel für die Vergleichsfunktion bereitstellen. Auf diese Weise können Sie verschiedene Attribute sortieren. Um das Array von Objekten nach einem bestimmten Schlüssel (Eigenschaften) in JavaScript zu sortieren, können Sie die Methode Array.prototype.sort() und eine benutzerdefinierte Vergleichsfunktion verwenden, die die Werte des gewünschten Schlüssels für jedes Objekt verglichen.

Wie man Objektarrays in JavaScript dynamisch sortiert?

Um die Arrays von Objekten von Objekten in JavaScript basierend auf Tasten (Eigenschaften) zu sortieren, können Sie eine Funktion erstellen, die Arrays und Tasten als Parameter akzeptiert. Diese Funktion kann dann die Methode Array.prototype.sort() sowie eine benutzerdefinierte Vergleichsfunktion verwenden, um auf die dynamisch bereitgestellten Schlüssel für die Sortierung zuzugreifen.

Gibt es eine Bibliothek, die die Sortierung von Objektarrays vereinfacht? Ja, Bibliotheken wie Lodash und Undercore.js bieten Dienstprogrammfunktionen für die Sortierung von Arrays von Objekten mit zusätzlicher Funktionalität und Bequemlichkeit. Die integrierten sort() -Methoden von JavaScript reichen jedoch normalerweise aus, um die Grundsortieranforderungen zu erfüllen.

Ist sortiert nach Objektschlüsselfall empfindlich? Ja, standardmäßig ist sortieren nach Objektschlüssel Fall sensibel. Sie können die localeCompare() -Methode verwenden, um eine von Fall unempfindliche Sortierung durchzuführen.

Das obige ist der detaillierte Inhalt vonSortieren Sie eine Reihe von Objekten in JavaScript mit der Sort () -Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!