Grundlegende Verwendung und Fallstricke der JavaScript-Array-Methode sort()

Grundlegende Verwendung und Fallstricke der JavaScript-Array-Methode sort()

Vorwort

Bei der täglichen Codeentwicklung gibt es viele Vorgänge im Zusammenhang mit der Array-Sortierung. In JavaScript können Sie die Sortiermethode aufrufen, um das Array schnell zu sortieren.

Lassen Sie uns heute etwas über die Sortiermethode für Arrays lernen, um in Zukunft die tragische Erfahrung zu vermeiden, in Fallstricke zu tappen.

Konzept

Mit der Sort-Methode werden die Elemente eines Arrays sortiert.

Grammatik

arr.sort([Vergleichsfunktion])

Parameteranalyse

Vergleichsfunktion (optional)

Eine Funktion, die zum Festlegen einer bestimmten Anordnungsreihenfolge verwendet wird. Diese Funktion verwendet zwei Parameter:

  • firstEl Das erste zu vergleichende Element
  • secondEl Das zweite zu vergleichende Element

Wenn diese Funktion weggelassen wird, werden die Elemente entsprechend der Unicode-Positionen der Zeichen im konvertierten String sortiert.

Rückgabewert

Das sortierte Array.

Beachten Sie, dass das Array vor Ort sortiert wird und keine Kopien erstellt werden.

Quellcode der Sortiermethode

DEFINE_METHOD(
  GlobalArray.prototype,
  sort(vergleichen) {
    CHECK_OBJECT_COERCIBLE(dies, "Array.prototype.sort");

    wenn (!IS_UNDEFINED(vergleichen) && !IS_CALLABLE(vergleichen)) {
      werfen Sie %make_type_error(kBadSortComparisonFunction, comparefn);
    }

    var array = TO_OBJECT(dieses);
    var Länge = TO_LENGTH(Array.Länge);
    return InnerArraySort(Array, Länge, Vergleichsfunktion);
  }
);

Dieser Schritt zeigt, dass die Sortiermethode die Methode InnerArraySort aufruft und die Parameter das Array, die Arraylänge und die Vergleichsfunktion sind. Sehen wir uns an, wie die Methode InnerArraySort damit umgeht.

Grube

Ich erinnere mich noch an das erste Mal, als ich Array-Sortierung verwendete: Ich fand eine Sortiermethode und verwendete sie sofort. Das Ergebnis war wie folgt:

const arr = [49, 5, 14, 89, 71, 3, 10];
arr.sort();
// Ausgabe [10, 14, 3, 49, 5, 71, 89]

Als ich das Ergebnis sah, war ich ein wenig schockiert.

Das ist etwas unethisch. Wo ist die vereinbarte Reihenfolge? Nachdem ich mich vergewissert hatte, dass mit meiner Maschine alles in Ordnung war, warf ich einen schnellen Blick in die Dokumentation, um zu sehen, was dort stand:

Wenn compareFunction nicht angegeben ist, werden die Elemente entsprechend der zeichenweisen Unicode-Positionen der konvertierten Zeichenfolgen sortiert.

Mit dieser Erklärung kann die Sortierung des obigen Arrays wie folgt verstanden werden:

Wandeln Sie zunächst die Zahlen im Array nacheinander in Zeichenfolgen um und erhalten Sie ['49', '5', '14', '89', '71', '3', '10'].

Wenn wir nach der Unicode-Position des ersten Zeichens rechnen:

  • 1 wird vor 3 codiert, daher werden 10 und 14 vor 3 eingestuft.
  • 3 wird vor 4 codiert, also kommt 49 nach 3 ...

Wenn die Codes der ersten Zeichen gleich sind, werden die Codes der zweiten Zeichen verglichen. Beispielsweise kommt 10 vor 14 (das Vergleichsergebnis von 0 und 4).

Die Logik scheint Sinn zu machen, aber das ist nicht das gewünschte Ergebnis. Es scheint, dass ich mich immer noch auf die Vergleichsfunktion compareFunction verlassen muss. Schauen wir uns an, was diese compareFunction ist.

Verwendung

Der grundlegende Anwendungsfall ist wie folgt:

const arr = [49, 5, 14, 89, 71, 3, 10];

// Allgemeine Schreibweise von arr.sort(function (a, b) {
    return a - b; // aufsteigend sortieren });

// Pfeilfunktion arr.sort((a, b) => a - b);

// Ergebnis [3, 5, 10, 14, 49, 71, 89]

So sortieren Sie in aufsteigender Reihenfolge. Wenn Sie in absteigender Reihenfolge sortieren möchten, ändern Sie in der Vergleichsfunktion einfach „return a - b;“ in „return b - a;“.

Sortieren eines Arrays von Objekten

Außer zum Sortieren von numerischen und Zeichen-Arrays kann die Methode sort() auch zum Sortieren von Objekt-Arrays verwendet werden:

var Elemente = [
    {Name: 'Edward', Wert: 21},
    {Name: 'Sharpe', Wert: 37},
    {name: 'Und', wert: 45},
    {Name: 'The', Wert: -12},
    {name: 'Magnetisch'},
    {Name: 'Nullen', Wert: 37}
];

// nach Wert sortieren
Elemente.sortieren(Funktion (a, b) {
    Rückgabewert (a.Wert - b.Wert)
});

// nach Namen sortieren
Elemente.sortieren(Funktion (a, b) {
    var nameA = a.name.toUpperCase(); // Groß- und Kleinschreibung ignorieren
    var nameB = b.name.toUpperCase(); // Groß- und Kleinschreibung ignorieren
    wenn (NameA < NameB) {
        Rückgabe -1;
    }
    wenn (NameA > NameB) {
        Rückgabe 1;
    }

    // Namen müssen gleich sein
    gebe 0 zurück;
});

Sortieren von Nicht-ASCII-Zeichen

Beim Sortieren von Zeichenfolgen, die Nicht-ASCII-Zeichen enthalten (z. B. Zeichenfolgen mit Zeichen wie e, é, è, a, ä usw.). Einige nicht-englische Sprachstrings erfordern die Verwendung von

var items = ['reservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
Elemente.sortieren(Funktion (a, b) {
	gibt a.localeCompare(b) zurück;
});

// Artikel ist ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']

Mapping zur Verbesserung der Sortierung nutzen

Die Vergleichsfunktion muss die Elemente möglicherweise mehrfach zuordnen, um eine Sortierung zu erreichen. Insbesondere wenn die Vergleichsfunktion komplex ist und viele Elemente enthält, können einige Vergleichsfunktionen eine hohe Belastung verursachen. Es wäre eine gute Idee, zur Sortierhilfe eine Karte zu verwenden. Die Grundidee besteht darin, zuerst den tatsächlichen Wert jedes Elements im Array herauszunehmen, zu sortieren und dann das Array wiederherzustellen.

// Zu sortierendes Array var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];

// Temporärer Speicher für Zahlen und Positionen, die sortiert werden müssen var mapped = list.map(function(el, i) {
  	Rückgabewert { Index: i, Wert: el.toLowerCase() };
})

//Array nach mehreren Werten sortieren mapped.sort(function(a, b) {
  	zurück +(a.Wert > b.Wert) || +(a.Wert === b.Wert) - 1;
});

// Hole das sortierte Ergebnis nach dem Index var result = mapped.map(function(el){
  	Liste zurückgeben[el.index];
});

Zusammenfassen

Damit ist dieser Artikel über die grundlegende Verwendung der Array-Sort()-Methode in JavaScript abgeschlossen. Weitere Informationen zur Verwendung der JavaScript-Array-Sort()-Methode finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Einführung in die Js-Array-Sortierfunktion sort()
  • Javascript-Array-Sortierung: sort()-Methode und reverse()-Methode
  • Detaillierte Erklärung der Sortiermethode Array.sort() in JavaScript
  • js verwendet Array.prototype.sort() zum Sortieren von Array-Objekten
  • Schnelles Klonen von JavaScript-Arrays (Funktion „slice()“) und Sortieren, Mischen und Suchen von Arrays (Funktion „sort()“)
  • Sortieren von Array-Elementen mit der Methode sort() in JavaScript
  • Detaillierte Erklärung von Javascript sort() zum Sortieren der Elemente in einem Array
  • Einführung in die Verwendung der sort()-Methode von Arrays in Javascript
  • JavaScript-Arraysortierungsmethoden reverse() und sort() ausführlich erklärt

<<:  Win10 Docker-Toolsbox-Tutorial zum Erstellen einer PHP-Entwicklungsumgebung

>>:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Windows

Artikel empfehlen

Detaillierte Erklärung der 10 häufigsten HTTP-Statuscodes

Der HTTP-Statuscode ist ein dreistelliger Code, d...

Implementierung eines MySQL-Gemeinschaftsindex (zusammengesetzter Index)

Gemeinsamer Index Die Definition des gemeinsamen ...

So schreiben Sie ein MySQL-Sicherungsskript

Vorwort: Die Bedeutung einer Datenbanksicherung l...

js, um ein Wasserfall-Flusslayout zu erreichen (unendliches Laden)

In diesem Artikelbeispiel wird der spezifische Co...

Implementierung der privaten Docker-Bibliothek

Die Installation und Bereitstellung eines private...

Docker-Bereitstellungs- und Installationsschritte für Jenkins

Zuerst benötigen wir einen Server mit installiert...

Beispiel einer JSON-Ausgabe im HTML-Format (Testschnittstelle)

Um die JSON-Daten in einem schönen eingerückten F...

Lösung zum Hinzufügen einer iptables-Firewall-Richtlinie zum MySQL-Dienst

Wenn Ihre MySQL-Datenbank auf einem CentOS7-Syste...

Tiefgreifendes Verständnis des Vue-Übergangs und der Animation

1. Wenn Sie DOM-Elemente einfügen, aktualisieren ...

Beispielcode zum Erstellen eines Dropdown-Menüs mit reinem CSS

Einführung: Als ich mir in letzter Zeit die Frage...

Centos8.3, Docker-Bereitstellung, Springboot-Projekt, tatsächliche Fallanalyse

Einführung Derzeit ist k8s sehr beliebt und ich h...

Detailliertes Beispiel für JavaScript-Array-Methoden

Inhaltsverzeichnis Einführung Erstellen eines Arr...