Sortieren Sie eine ES6-Karte in JavaScript

Saad Aslam 12 Oktober 2023
  1. Ein Überblick über die ES6-Karte in JavaScript
  2. Verwenden Sie die Methode .sort(), um eine ES6-Karte in JavaScript zu sortieren
  3. Sortieren Sie eine ES6-Karte nach Zeichenfolgenschlüsseln in JavaScript
  4. Sortieren Sie eine ES6-Karte nach Zahlentasten in JavaScript
Sortieren Sie eine ES6-Karte in JavaScript

Dieser Artikel beschreibt die wesentlichen Schritte zum Sortieren einer ES6-Karte mit JavaScript und demonstriert diese Verfahren.

Ein Überblick über die ES6-Karte in JavaScript

Die Verwendung eines Objekts als Karte hat mehrere Nachteile, die durch den neuen Sammlungstyp namens Karte behoben werden, der in ES6 eingeführt wurde.

Ein Kartenobjekt speichert per Definition Schlüssel-Wert-Paare, und Werte jeglicher Art können entweder für die Schlüssel oder die Werte der Paare, die es speichert, verwendet werden. Außerdem erinnert sich ein Map-Objekt an die ursprüngliche Reihenfolge, in der die Schlüssel in die Map eingefügt wurden.

Verwenden Sie die Methode .sort(), um eine ES6-Karte in JavaScript zu sortieren

Wenn Sie die Schlüssel in einer Map sortieren möchten, können Sie dazu die Methode .sort() verwenden; zum Beispiel var waqarMap = new Map([...mapA].sort()). Mit dem Spread-Operator (...), können wir alle Einträge der Map in einem Array erhalten, das wir dann mit der Sortiertechnik sortieren.

Um die Mitglieder im Array zu sortieren, verwendet die Funktion sort() die folgende Logik:

  • Wenn der Rückgabewert der Vergleichsfunktion größer als 0 ist, sollte das Array so sortiert werden, dass b vor a steht.
  • Wenn der Rückgabewert der Vergleichsfunktion kleiner 0 ist, dann soll a in der Sortierreihenfolge vor b stehen.
  • Wenn das Rückgabeergebnis der Vergleichsfunktion gleich 0 ist, sollte die Reihenfolge von a und b gleich bleiben wie zuvor.

Wir werden die Karte auf zwei Arten anordnen: Erstens basierend auf den Schlüsseln, die Zeichenfolgen sind, und zweitens basierend auf den Schlüsseln, die Zahlen sind.

Beginnen wir zuerst mit den Schlüsselkomponenten der Zeichenfolge.

Sortieren Sie eine ES6-Karte nach Zeichenfolgenschlüsseln in JavaScript

Erstellen Sie eine neue Variable namens waqarMap und initialisieren Sie sie, indem Sie ein Objekt der Klasse Map() erzeugen.

var waqarMap = new Map();

Nun fügen wir der Karte einige Werte hinzu, indem wir die Funktion .set() verwenden, die zwei Parameter benötigt. Der erste Parameter ist der Schlüssel, der zum Durchführen der Sortierung verwendet wird, und der zweite Parameter ist der Wert des Schlüssels, der in der Konsole neben dem Schlüssel gedruckt wird.

An diesem Punkt haben wir unsere Karte in der Hand und sie ist bereit, sortiert zu werden.

waqarMap.set('c', 'three');
waqarMap.set('e', 'five');
waqarMap.set('d', 'four');
waqarMap.set('b', 'two');
waqarMap.set('f', 'six');
waqarMap.set('a', 'one');

Um eine Map zu sortieren, deren Schlüssel String-Werte sind, genügt es, die Funktion sort() zu verwenden.

var sortedMap = new Map([...waqarMap].sort());

Nachdem die Karte sortiert wurde, müssen wir sie auf der Konsole ausdrucken.

console.log(sortedMap);

Quellcode zum Sortieren einer ES6-Zuordnung nach Zeichenfolgenschlüsseln in aufsteigender Reihenfolge

var waqarMap = new Map();

waqarMap.set('c', 'three');
waqarMap.set('e', 'five');
waqarMap.set('d', 'four');
waqarMap.set('b', 'two');
waqarMap.set('f', 'six');
waqarMap.set('a', 'one');

var sortedMap = new Map([...waqarMap].sort());

console.log(sortedMap);

Ausgabe in aufsteigender Reihenfolge:

Map {
  'a' => 'one',
  'b' => 'two',
  'c' => 'three',
  'd' => 'four',
  'e' => 'five',
  'f' => 'six' }

Wenn wir die Methode .sort() anwenden, muss hier eine andere Funktion mit der Bezeichnung .reverse(). verwendet werden. Dies ist notwendig, um die Karte in absteigender Reihenfolge zu sortieren.

Die restlichen Schritte sind bis auf diesen gleich.

var sortedMap = new Map([...waqarMap].sort().reverse());

Ausgabe in absteigender Reihenfolge:

Map {
  'f' => 'six',
  'e' => 'five',
  'd' => 'four',
  'c' => 'three',
  'b' => 'two',
  'a' => 'one' }

Sortieren Sie eine ES6-Karte nach Zahlentasten in JavaScript

Erstellen Sie eine neue Variable namens numberMap, und initialisieren Sie sie dann, indem Sie ein Objekt der Klasse Map() erzeugen. Fügen Sie die Werte mit der Funktion .set() zur Karte hinzu.

var numberMap = new Map();

numberMap.set('3', 'Nabeel');
numberMap.set('1', 'Saad');
numberMap.set('6', 'Khan');
numberMap.set('5', 'Sindhu');
numberMap.set('2', 'Aslam');
numberMap.set('4', 'Zeeshan');

Hier sind die Schlüssel der Map Zahlen, dann erfordert die Methode sort(), dass Sie ihr eine Funktion als Argument übergeben. Eine Funktion bestimmt die Sortierreihenfolge, die als Argument an die Prozedur gesendet wird.

var sortedMap = new Map([...numberMap.entries()].sort());
console.log(sortedMap);

Quellcode zum Sortieren einer ES6-Karte nach Zahlenschlüsseln in aufsteigender Reihenfolge

var numberMap = new Map();

numberMap.set('3', 'Nabeel');
numberMap.set('1', 'Saad');
numberMap.set('6', 'Khan');
numberMap.set('5', 'Sindhu');
numberMap.set('2', 'Aslam');
numberMap.set('4', 'Zeeshan');

var sortedMap = new Map([...numberMap.entries()].sort());

console.log(sortedMap);

Ausgabe in aufsteigender Reihenfolge:

Map {
  '1' => 'Saad',
  '2' => 'Aslam',
  '3' => 'Nabeel',
  '4' => 'Zeeshan',
  '5' => 'Sindhu',
  '6' => 'Khan' }

Wir müssen eine andere Funktion namens .reverse() verwenden, wenn wir unsere Daten in der umgekehrten Reihenfolge ihrer Sortierung sortieren möchten. Da dieser Schritt erforderlich ist, um die Map in absteigender Reihenfolge zu sortieren und der Rest identisch ist, ist dies der einzige Unterschied zwischen den beiden Verfahren.

var sortedMap = new Map([...numberMap.entries()].sort().reverse());

Ausgabe in absteigender Reihenfolge:

Map {
  '6' => 'Khan',
  '5' => 'Sindhu',
  '4' => 'Zeeshan',
  '3' => 'Nabeel',
  '2' => 'Aslam',
  '1' => 'Saad' }
Autor: Saad Aslam
Saad Aslam avatar Saad Aslam avatar

I'm a Flutter application developer with 1 year of professional experience in the field. I've created applications for both, android and iOS using AWS and Firebase, as the backend. I've written articles relating to the theoretical and problem-solving aspects of C, C++, and C#. I'm currently enrolled in an undergraduate program for Information Technology.

LinkedIn

Verwandter Artikel - JavaScript Map