JS-Tutorial

JS-HAUS JS-Einführung JS Wohin JS-Ausgabe JS-Anweisungen JS-Syntax JS-Kommentare JS-Variablen JS Let JS Konst JS-Operatoren JS-Arithmetik JS-Aufgabe JS-Datentypen JS-Funktionen JS-Objekte JS-Ereignisse JS-Strings JS-String-Methoden Suche nach JS-Strings JS-String-Vorlagen JS-Nummern JS-Zahlenmethoden JS-Arrays JS-Array-Methoden JS-Array-Sortierung JS-Array-Iteration JS-Array-Konstante JS-Daten JS-Datumsformate JS Date Get-Methoden JS-Datumssatzmethoden JS Math JS Zufällig JS Boolesche Werte JS-Vergleiche JS-Bedingungen JS-Schalter JS-Schleife für JS-Schleife für In JS-Schleife für Of JS-Schleife While JS Pause JS-Iterables JS-Sets JS-Karten JS Typeof JS-Typkonvertierung JS Bitweise JS RegExp JS-Fehler JS-Bereich JS Heben Strenger JS-Modus JS dieses Schlüsselwort JS-Pfeilfunktion JS-Klassen JS JSON JS-Debugging JS-Styleguide JS Best Practices JS-Fehler JS-Leistung JS Reservierte Wörter

JS-Versionen

JS-Versionen JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-Geschichte

JS-Objekte

Objektdefinitionen Objekteigenschaften Objektmethoden Objektanzeige Objektzugriffsmethoden Objektkonstruktoren Objekt-Prototypen Objekt-Iterables Objektsätze Objektkarten Objektreferenz

JS-Funktionen

Funktionsdefinitionen Funktionsparameter Funktionsaufruf Funktionsaufruf Funktion anwenden Funktionsschließungen

JS-Klassen

Klasse Einführung Klassenvererbung Klasse statisch

JS asynchron

JS-Rückrufe JS asynchron JS verspricht JS Async/Warten

JS-HTML-DOM

DOM-Einführung DOM-Methoden DOM-Dokument DOM-Elemente DOM-HTML DOM-Formulare DOM-CSS DOM-Animationen DOM-Ereignisse DOM-Ereignis-Listener DOM-Navigation DOM-Knoten DOM-Sammlungen DOM-Knotenlisten

Stückliste des JS-Browsers

JS-Fenster JS-Bildschirm JS-Standort JS-Geschichte JS-Navigator JS-Popup-Warnung JS-Timing JS-Cookies

JS-Web-APIs

Web-API-Einführung Web Forms-API Webprotokoll-API Webspeicher-API Web Worker-API Web-Fetch-API Web-Geolocation-API

JS AJAX

AJAX-Einführung AJAX-XMLHttp AJAX-Anfrage AJAX-Antwort AJAX-XML-Datei AJAX-PHP AJAX ASP AJAX-Datenbank AJAX-Anwendungen AJAX-Beispiele

JS JSON

JSON-Einführung JSON-Syntax JSON vs. XML JSON-Datentypen JSON-Parsing JSON-Stringify JSON-Objekte JSON-Arrays JSON-Server JSON-PHP JSON-HTML JSON JSONP

JS vs. jQuery

jQuery-Selektoren jQuery-HTML jQuery-CSS jQuery-DOM

JS-Grafik

JS-Grafik JS-Leinwand JS Plotly JS Chart.js JS Google-Diagramm JS D3.js

JS-Beispiele

JS-Beispiele JS-HTML-DOM JS-HTML-Eingabe JS-HTML-Objekte JS-HTML-Ereignisse JS-Browser JS-Editor JS-Übungen JS-Quiz JS-Zertifikat

JS-Referenzen

JavaScript-Objekte HTML-DOM-Objekte


JavaScript -Sortierarrays


Sortieren eines Arrays

Die sort()Methode sortiert ein Array alphabetisch:

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

Umkehren eines Arrays

Die reverse()Methode kehrt die Elemente in einem Array um.

Sie können es verwenden, um ein Array in absteigender Reihenfolge zu sortieren:

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();

Numerische Sortierung

Standardmäßig sort()sortiert die Funktion Werte als Zeichenfolgen .

Dies funktioniert gut für Streicher ("Apple" kommt vor "Banana").

Wenn Zahlen jedoch als Zeichenfolgen sortiert werden, ist "25" größer als "100", weil "2" größer als "1" ist.

Aus diesem Grund liefert die sort()Methode beim Sortieren von Zahlen ein falsches Ergebnis.

Sie können dies beheben, indem Sie eine Vergleichsfunktion bereitstellen :

Beispiel

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

Verwenden Sie den gleichen Trick, um ein Array absteigend zu sortieren:

Beispiel

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});


Die Vergleichsfunktion

Der Zweck der Vergleichsfunktion besteht darin, eine alternative Sortierreihenfolge zu definieren.

Die Vergleichsfunktion sollte abhängig von den Argumenten einen negativen, null oder positiven Wert zurückgeben:

function(a, b){return a - b}

Wenn die sort()Funktion zwei Werte vergleicht, sendet sie die Werte an die Vergleichsfunktion und sortiert die Werte gemäß dem zurückgegebenen Wert (negativ, null, positiv).

Bei negativem Ergebnis wird avor sortiert b.

Bei positivem Ergebnis wird bvor sortiert a.

Wenn das Ergebnis 0 ist, werden keine Änderungen an der Sortierreihenfolge der beiden Werte vorgenommen.

Beispiel:

Die Vergleichsfunktion vergleicht alle Werte im Array, jeweils zwei Werte gleichzeitig (a, b).

Beim Vergleich von 40 und 100 sort()ruft die Methode die Vergleichsfunktion (40, 100) auf.

Die Funktion berechnet 40 - 100 (a - b), und da das Ergebnis negativ ist (-60), sortiert die Sortierfunktion 40 als einen Wert kleiner als 100.

Sie können dieses Code-Snippet verwenden, um mit der numerischen und alphabetischen Sortierung zu experimentieren:

<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>

<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML = points;
}

function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>

Sortieren eines Arrays in zufälliger Reihenfolge

Beispiel

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});


Die Fisher-Yates-Methode

Das obige Beispiel, array .sort(), ist nicht genau, es wird einige Zahlen gegenüber anderen bevorzugen.

Die beliebteste richtige Methode heißt Fisher Yates Shuffle und wurde bereits 1938 in die Datenwissenschaft eingeführt!

In JavaScript kann die Methode folgendermaßen übersetzt werden:

Beispiel

const points = [40, 100, 1, 5, 25, 10];

for (let i = points.length -1; i > 0; i--) {
  let j = Math.floor(Math.random() * i)
  let k = points[i]
  points[i] = points[j]
  points[j] = k
}


Finden Sie den höchsten (oder niedrigsten) Array-Wert

Es gibt keine integrierten Funktionen zum Ermitteln des maximalen oder minimalen Werts in einem Array.

Nachdem Sie ein Array sortiert haben, können Sie jedoch den Index verwenden, um die höchsten und niedrigsten Werte zu erhalten.

Aufsteigend sortieren:

Beispiel

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value

Absteigend sortieren:

Beispiel

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value

Das Sortieren eines ganzen Arrays ist eine sehr ineffiziente Methode, wenn Sie nur den höchsten (oder niedrigsten) Wert finden möchten.


Verwenden von Math.max() für ein Array

Sie können verwenden Math.max.apply, um die höchste Zahl in einem Array zu finden:

Beispiel

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}

Math.max.apply(null, [1, 2, 3])ist äquivalent zu Math.max(1, 2, 3).


Verwenden von Math.min() für ein Array

Sie können verwenden Math.min.apply, um die niedrigste Zahl in einem Array zu finden:

Beispiel

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}

Math.min.apply(null, [1, 2, 3])ist äquivalent zu Math.min(1, 2, 3).


Meine Min/Max-JavaScript-Methoden

Die schnellste Lösung ist die Verwendung einer "hausgemachten" Methode.

Diese Funktion durchläuft ein Array und vergleicht jeden Wert mit dem höchsten gefundenen Wert:

Beispiel (Finde Max)

function myArrayMax(arr) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}

Diese Funktion durchläuft ein Array und vergleicht jeden Wert mit dem niedrigsten gefundenen Wert:

Beispiel (Finde Min)

function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}


Objekt-Arrays sortieren

JavaScript-Arrays enthalten oft Objekte:

Beispiel

const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

Auch wenn Objekte Eigenschaften unterschiedlicher Datentypen haben, sort()kann die Methode zum Sortieren des Arrays verwendet werden.

Die Lösung besteht darin, eine Vergleichsfunktion zu schreiben, um die Eigenschaftswerte zu vergleichen:

Beispiel

cars.sort(function(a, b){return a.year - b.year});

Der Vergleich von Zeichenfolgeneigenschaften ist etwas komplexer:

Beispiel

cars.sort(function(a, b){
  let x = a.type.toLowerCase();
  let y = b.type.toLowerCase();
  if (x < y) {return -1;}
  if (x > y) {return 1;}
  return 0;
});

Vollständige Array-Referenz

Eine vollständige Array-Referenz finden Sie in unserem:

Vollständige JavaScript-Array-Referenz .

Die Referenz enthält Beschreibungen und Beispiele aller Array-Eigenschaften und -Methoden.

Testen Sie sich mit Übungen

Übung:

fruitsVerwenden Sie die richtige Array-Methode, um das Array alphabetisch zu sortieren .

const fruits = ["Banana", "Orange", "Apple", "Kiwi"];
;