Array von Objekten nach Eigenschaft in JavaScript sortieren

Um ein Array von Objekten nach einer ihrer Eigenschaften zu sortieren, übergib sort() einen Comparator. Dieser liest die Eigenschaft aus zwei Objekten und gibt eine negative Zahl zurück, wenn das erste Objekt weiter vorne stehen soll, eine positive Zahl, wenn es weiter hinten stehen soll, oder null, wenn die Schlüssel gleich sind. Verwende für Zeichenfolgen einen Zeichenfolgenvergleich und für numerische Schlüssel eine Subtraktion.

Ein Array von Objekten nach einer Zeichenfolgeneigenschaft sortieren

Ein Comparator kann zwei Zeichenfolgen vor dem Vergleich vereinheitlichen. Dadurch wird das Beispiel unabhängig von Groß- und Kleinschreibung sortiert, während jeder ursprüngliche lastName-Wert in den Objekten erhalten bleibt.

Führe dieses Beispiel aus:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const students = [
  { firstName: 'Rohan', lastName: 'Dalal', age: 19 },
  { firstName: 'Zain', lastName: 'Ahmed', age: 17 },
  { firstName: 'Anadi', lastName: 'Malhotra', age: 19 }
];

students.sort((a, b) => {
  const left = a.lastName.toLowerCase();
  const right = b.lastName.toLowerCase();
  if (left < right) return -1;
  if (left > right) return 1;
  return 0;
});

console.log(students.map(student => student.lastName).join(', '));

Ahmed, Dalal, Malhotra

Der Comparator gibt das Sortiersignal zurück, das sort() benötigt. Er muss nicht genau -1 oder 1 zurückgeben, sondern lediglich einen negativen Wert, null oder einen positiven Wert. Kleinschreibung ist hilfreich, wenn Groß- und Kleinschreibung die Reihenfolge nicht beeinflussen soll. Die gespeicherten Namen werden dadurch nicht verändert, denn toLowerCase() gibt eine neue Zeichenfolge zurück.

Zeichenfolgen mit localeCompare() sortieren

Für Zeichenfolgeneigenschaften bietet localeCompare() einen knappen Comparator und berücksichtigt sprachabhängige Sortierregeln. Die Methode gibt eine negative Zahl, null oder eine positive Zahl zurück und lässt sich daher direkt in sort() verwenden:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const students = [
  { firstName: 'Rohan', lastName: 'Dalal', age: 19 },
  { firstName: 'Zain', lastName: 'Ahmed', age: 21 },
  { firstName: 'Anadi', lastName: 'Malhotra', age: 16 }
];

students.sort((a, b) => a.lastName.localeCompare(b.lastName));
console.log(students.map(student => student.lastName).join(', '));

Ahmed, Dalal, Malhotra

Wähle diesen Ansatz, wenn der Schlüssel Text enthält und ein sprachabhängiger Vergleich passend ist. localeCompare() vergleicht Zeichenfolgen; die Methode dient nicht zum Sortieren numerischer Werte. Wenn du eine bestimmte Sprache oder Optionen wie die Berücksichtigung der Groß- und Kleinschreibung festlegen möchtest, übergib localeCompare() die vom Laufzeitsystem unterstützte Sprache und die gewünschten Optionen.

Nach einer numerischen Eigenschaft sortieren

Ziehe den numerischen Schlüssel des zweiten Objekts vom Schlüssel des ersten Objekts ab. Ist das erste Alter kleiner, ist a.age - b.age negativ und setzt a bei aufsteigender Sortierung vor b.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const students = [
  { firstName: 'Rohan', lastName: 'Dalal', age: 19 },
  { firstName: 'Zain', lastName: 'Ahmed', age: 21 },
  { firstName: 'Anadi', lastName: 'Malhotra', age: 16 }
];

students.sort((a, b) => a.age - b.age);
console.log(students.map(student => student.age).join(', '));

16, 19, 21

Dieses Subtraktionsmuster ist für numerische Werte gedacht. Verwende es nicht für Namen: Die Subtraktion von Zeichenfolgen bildet ihre alphabetische Reihenfolge nicht ab. Ebenso sorgt ein Aufruf von sort() ohne Comparator nicht dafür, dass die Methode eine Objekteigenschaft berücksichtigt. Die Standardsortierung vergleicht die Zeichenfolgendarstellungen der Array-Elemente; für Objekte ist daher im Allgemeinen ein expliziter Comparator nötig.

In absteigender Reihenfolge sortieren

Vertausche die Comparator-Operanden, um die Reihenfolge umzukehren. Bei numerischen Altersangaben sortiert b.age - a.age die höheren Werte zuerst. So bleibt die Vergleichsregel an die ausgewählte Eigenschaft gebunden, statt erst in eine Richtung zu sortieren und anschließend das Array umzukehren.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const students = [
  { firstName: 'Rohan', lastName: 'Dalal', age: 19 },
  { firstName: 'Zain', lastName: 'Ahmed', age: 21 },
  { firstName: 'Anadi', lastName: 'Malhotra', age: 16 }
];

students.sort((a, b) => b.age - a.age);
console.log(students.map(student => student.age).join(', '));

21, 19, 16

Für eine absteigende Reihenfolge bei Zeichenfolgen kannst du das Ergebnis des Zeichenfolgenvergleichs umkehren, zum Beispiel durch Negieren von a.lastName.localeCompare(b.lastName). Achte auf einen konsistenten Comparator, damit gleiche Schlüssel weiterhin null ergeben.

Wichtiges zu sort() und seinen Grenzen

sort() verändert das Array direkt und gibt dasselbe Array zurück. Wenn die ursprüngliche Reihenfolge erhalten bleiben soll, kopiere das Array zuerst mit const sortedStudents = [...students] und sortiere dann die Kopie. Die Objekte selbst werden nicht geklont: Beim Sortieren ändern sich ihre Positionen im Array, nicht ihre Eigenschaften.

Ohne Comparator wandelt sort() die Werte in Zeichenfolgen um und vergleicht diese. Deshalb eignet sich die Standardsortierung weder für eine numerische Reihenfolge noch dafür, eine Objekteigenschaft als Sortierschlüssel auszuwählen. Verwende einen Comparator, der zum Typ des Schlüssels passt. Die Beispiele setzen voraus, dass jedes Objekt die angegebene Zeichenfolgen- oder Zahleneigenschaft besitzt. Sie legen nicht fest, wie mit fehlenden Schlüsseln oder gemischten Typen umzugehen ist. Prüfe solche Daten daher vor dem Sortieren oder lege fest, wie diese Werte verglichen werden sollen.

Weitere Informationen zur Array-API findest du in der Referenz zur sort()-Methode.