Die Methode sort()
sortiert ein Array alphabetisch:
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>
Die Methode reverse()
kehrt die Elemente in einem Array um.
Sie können es dazu verwenden Sortieren Sie ein Array in absteigender Reihenfolge:
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>
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:
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:
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>
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>
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>
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:
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>
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:
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:
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.
Math.max()
für ein ArraySie können Math.max.apply
verwenden, um die höchste Zahl in einem Array zu finden:
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)
.
Math.min()
für ein ArraySie können Math.min.apply
verwenden, um die niedrigste Zahl in einem Array zu finden:
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)
.
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:
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:
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>
JavaScript-Arrays enthalten häufig Objekte:
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:
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:
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>
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.
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
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.