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 反轉(zhuǎn)返回值
  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).

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

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 反轉(zhuǎn)返回值
  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!