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 zur Verwendung der Vue.js-Renderfunktion

Vue empfiehlt in den meisten Fällen die Verwendun...

Verzeichnisberechtigungen beim Erstellen eines Containers mit Docker

Als ich gestern ein Projekt schrieb, musste ich d...

Der Unterschied und die Verwendung von Datum/Uhrzeit und Zeitstempel in MySQL

1. Wie wird die aktuelle Uhrzeit in MySQL dargest...

Mehrere Möglichkeiten, die Lesbarkeit von Webseiten zu verbessern

1. Verwenden Sie kontrastierende Farben. Mit Kont...

CentOS6.8 verwendet cmake zur Installation von MySQL5.7.18

Unter Bezugnahme auf die Online-Informationen hab...

Anweisungen zur Verwendung des Datenbankverbindungspools Druid

Ersetzen Sie ihn durch den optimalen Datenbankver...

Nachteile und sinnvolle Verwendung des MySQL-Datenbankindex

Inhaltsverzeichnis Richtige Verwendung von Indize...

Eine kurze Diskussion zur Verwendung von React.FC und React.Component

Inhaltsverzeichnis 1. Reagieren.FC<> 2. Kla...

Detaillierte Erklärung der CSS-Hintergrund- und Rahmen-Tag-Beispiele

1. CSS-Hintergrund-Tag 1. Stellen Sie die Hinterg...