JavaScript-Array-Sortierung


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Sortieren eines Arrays

Die Methode sort() sortiert ein Array alphabetisch:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The sort() method sorts an array alphabetically:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.sort();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Umkehren eines Arrays

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

Sie können es dazu verwenden Sortieren Sie ein Array in absteigender Reihenfolge:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Sort in Reverse</h2>

<p>The reverse() method reverses the elements in an array.</p>
<p>By combining sort() and reverse() you can sort an array in descending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
// Create and display an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

// First sort the array
fruits.sort();

// Then reverse it:
fruits.reverse();

document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Numerische Sortierung

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

Dies funktioniert gut für Zeichenfolgen („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 führt die Methode sort() beim Sortieren zu falschen Ergebnissen Zahlen.

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});

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort the array in ascending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

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

</body>
</html>

Verwenden Sie denselben Trick, um ein Array absteigend zu sortieren:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort the array in descending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

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

</body>
</html>



Die Vergleichsfunktion

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

Die Vergleichsfunktion sollte je nach Wert einen negativen, Null- oder positiven Wert zurückgeben die argumente:

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

Wenn die Funktion sort() zwei Werte vergleicht, sendet sie die Werte an Vergleichsfunktion und sortiert die Werte nach den zurückgegebenen (negativen, Null, positiv) Wert.

Wenn das Ergebnis negativ ist, wird a vorher sortiert b.

Wenn das Ergebnis positiv ist, wird b sortiert vor a.

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

Beispiel:

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

Beim Vergleich von 40 und 100 ruft die Methode sort() 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 unter 100.

Sie können dieses Code-Snippet verwenden, um mit Zahlen und Zahlen zu experimentieren alphabetische Sortierung:

<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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the buttons to sort the array alphabetically or numerically.</p>

<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>

</body>
</html>

Sortieren eines Arrays in zufälliger Reihenfolge

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

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

function myFunction() {
  points.sort(function(){return 0.5 - Math.random()});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

Die Fisher-Yates-Methode

Das obige Beispiel, array.sort(), ist nicht korrekt. Es wird einigen zugute kommen Zahlen über die anderen.

Die beliebteste korrekte Methode heißt Fisher Yates Shuffle und war bereits 1938 in der Datenwissenschaft eingeführt!

In JavaScript kann die Methode wie folgt ü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+1));
  let k = points[i];
  
  points[i] = points[j];
  points[j] = k;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>
<h2>The Fisher Yates Method</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

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

function myFunction() {
  for (let i = points.length -1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i+1));
    let k = points[i];
    points[i] = points[j];
    points[j] = k;
  }
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

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

Es gibt keine integrierten Funktionen zum Ermitteln des Maximums oder Minimums Wert in einem Array.

Nachdem Sie ein Array jedoch sortiert haben, können Sie das verwenden Index, 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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

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 Math.max.apply verwenden, um die höchste Zahl in einem Array zu finden:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>

<p>The highest number is <span id="demo"></span>.</p>

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

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}
</script>

</body>
</html>

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 Math.min.apply verwenden, um die niedrigste Zahl in einem Array zu finden:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>

<p>The lowest number is <span id="demo"></span>.</p>

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

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}
</script>

</body>
</html>

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 Wert gefunden:

Beispiel (Max finden)

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>The highest number is <span id="demo"></span>.</p>

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

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

</body>
</html>

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

Beispiel (Min. ermitteln)

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>The lowest number is <span id="demo"></span>.</p>

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

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

</body>
</html>


Sortieren von Objektarrays

JavaScript-Arrays enthalten häufig Objekte:

Beispiel

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

Auch wenn Objekte Eigenschaften unterschiedlicher Datentypen haben, kann die Methode sort() verwendet werden kann 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});

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort car objects on age:</p>

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

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

displayCars();

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

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

Der Vergleich von String-Eigenschaften 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;
});

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the buttons to sort car objects on type.</p>

<button onclick="myFunction()">Sort</button>
<p id="demo"></p>

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

displayCars();

function myFunction() {
  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;
  });
  displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

Stabiles Array sort()

ES2019 überarbeitet die Array sort()-Methode.

Vor 2019 erlaubte die Spezifikation instabile Sortieralgorithmen wie QuickSort.

Nach ES2019 müssen Browser einen stabilen Sortieralgorithmus verwenden:

Beim Sortieren von Elementen nach einem Wert müssen die Elemente ihre relative Position zu anderen Elementen mit demselben Wert beibehalten.

Beispiel

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 }
];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>

<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>

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

<script>

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 },
  {name:"X08",price:120 },
  {name:"X09",price:120 },
  {name:"X10",price:120 },
  {name:"X11",price:120 },
  {name:"X12",price:130 },
  {name:"X13",price:130 },
  {name:"X14",price:130 },
  {name:"X15",price:130 },
  {name:"X16",price:140 },
  {name:"X17",price:140 },
  {name:"X18",price:140 },
  {name:"X19",price:140 }
];

myArr.sort( (p1, p2) => {
  if (p1.price < p2.price) return -1;
  if (p1.price > p2.price) return 1;
  return 0;
});

let txt = "";
myArr.forEach(myFunction);

function myFunction(value) {
  txt += value.name + " " + value.price + "<br>"; 
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Im obigen Beispiel darf bei der Sortierung nach Preis das Ergebnis nicht mit den Namen ausgegeben werden in einer anderen relativen Position wie dieser:

X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110

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 Arrays Eigenschaften und Methoden.