Einleitung

Bei der Arbeit mit JavaScript stoßen wir oft auf Situationen, in denen wir die minimalen und maximalen Elemente eines Arrays abrufen müssen – sei es zum Festlegen von Grenzen für einen Schieberegler oder zum Anzeigen der Statistiken für einen Benutzer.

In diesem Artikel sehen wir uns an, wie man das minimale und das maximale Element eines Arrays in JavaScript erhält. Wir werden uns auch vier verschiedene Methoden ansehen und ihre Geschwindigkeit beim Umgang mit großen Arrays vergleichen.

So erhalten Sie die minimalen und maximalen Elemente eines Arrays mithilfe von Mathe Betreff

Math ist das in JavaScript integrierte globale Komfortobjekt, das viele Methoden und Konstanten enthält, die Sie möglicherweise benötigen, wenn Sie mathematische Operationen ausführen. Zwei Methoden, die wir in diesem Artikel verwenden werden, sind Math.min() und Math.max() – beide akzeptieren eine Liste von Zahlen als Argumente. Wie ihre Namen vermuten lassen, gibt das eine das Element mit dem niedrigsten Wert zurück und das andere dasjenige mit dem höchsten Wert:

console.log(Math.min(20, 23, 27));
console.log(Math.max(20, 23, 27));

console.log(Math.min(-20, -23, -27));
console.log(Math.max(-20, -23, -27));

Wenn mindestens eines der übergebenen Elemente keine Zahl ist oder nicht in eine Zahl umgewandelt werden kann, werden beide Math.min() und Math.max() Rückgabe NaN:

console.log(Math.min('-20', -23, -27));
console.log(Math.max('number', -23, -27));

Ähnlich verhält es sich, wenn wir versuchen, ein Array als Argument von zu übergeben Math.min() Funktion erhalten wir a NaN, da es als einzelnes Element behandelt wird, das nicht in einen Skalarwert konvertiert werden kann:

const myArray = [2, 3, 1];
console.log(Math.min(myArray));

Eine schnelle Lösung dafür ist jedoch die Verwendung des Spread-Operators zum Auspacken der Elemente:

const myArray = [2, 3, 1];
console.log(Math.min(...myArray));

Wenn Sie mehr über den Spread-Operator lesen möchten – lesen Sie unsere Anleitung zum Spread-Operator in JavaScript!

Holen Sie sich Max und Min Element mit reduzieren()

Reduktionsoperationen, manchmal bekannt als Klapp-, sind einige der leistungsstärksten Operationen der funktionalen Programmierung mit einer Vielzahl von Anwendungen. Das reduce() Funktion, führt eine (in einem Callback definierte) Reducer-Funktion für jedes Array-Element aus und gibt am Ende einen einzelnen Wert zurück.

Es lohnt sich, die Methode zu behandeln, da sie universell anwendbar ist:

const myArray = [20, 23, 27];

let minElement = myArray.reduce((a, b) => {
    return Math.min(a, b);
});

console.log(minElement);

Finden Sie Min- und Max-Element mit anwenden()

Das apply() Methode wird verwendet, um eine Funktion mit einem gegebenen Wert aufzurufen this Wert und ein Array von Argumenten. Dadurch ist es uns möglich, Arrays in die einzugeben Math.min() statische Funktion:

const myArray = [20, 23, 27];

let minElement = Math.min.apply(Math, myArray);
console.log(minElement);

let minElement = Math.min.apply(null, myArray);
console.log(minElement);

Abrufen von Min- und Max-Elementen mit Standard-Loops – schnellste Leistung

Schleifen werden in JavaScript verwendet, um wiederholte Aufgaben basierend auf einer Bedingung auszuführen. Bedingungen kehren zurück true or false. Eine Schleife läuft weiter, bis die definierte Bedingung zurückkehrt false. In unserem Fall verwenden wir die for Schleife – wird häufig verwendet, um Code mehrmals auszuführen.

Holen Sie sich das minimale Element

Zuerst initialisieren wir das minimale Element mit dem ersten Element eines Arrays. Dann durchlaufen wir die gesamtes Array um zu sehen, ob der Wert eines anderen Elements kleiner als der aktuelle Mindestwert ist – wenn dies der Fall ist, setzen wir den neuen Mindestwert auf den Wert des aktuellen Elements:

const myArray = [20, 23, 27];

let minElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] < minElement) {
        minElement = myArray[i];
    }
}

console.log(minElement);

Holen Sie sich das maximale Element

Wir werden zuerst das maximale Element mit dem ersten Element im Array initialisieren. Dann durchlaufen wir das gesamte Array, um zu sehen, ob ein anderes Element größer als das initialisierte Element ist, also ersetzt es es:

const myArray = [20, 23, 27];

let maxElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] > maxElement) {
        maxElement = myArray[i];
    }
}

console.log(maxElement);

Leistungsbenchmark

Verwendung von JS Benchmark – wir haben alle diese Ansätze mit unterschiedlichen Eingaben ausgeführt, von 100 bis 1000000 Elementen im Array. Die Leistung ist relativ und hängt von der Länge des Arrays ab.

• Für kleine Arrays (100), die reduce() -Methode schnitt am besten ab, gefolgt von Standardschleifen, dem Spread-Operator und dann der apply() Methode. Die Zweitplatzierten sind leistungsmäßig fast gleichauf.
• Bei mittleren Arrays (1000) schneiden die Standardschleifen am besten ab, gefolgt von reduce(), der Spread-Operator und die apply() Methode. Standardschleifen deutlich schneller als reduce() hier, der wiederum ziemlich schneller ist als die Zweitplatzierten.
• Bei wirklich großen Arrays (1000000) übertreffen die Standardschleifen alle anderen Methoden in einem so großen Maße, dass die Argumente für Standardschleifen sehr stark sind.

Standardschleifen lassen sich wirklich gut skalieren und verlieren nur dann gegenüber der Konkurrenz, wenn sie auf kleine Arrays angewendet werden. Wenn Sie es mit ein paar Elementen oder kleineren Arrays zu tun haben, werden alle Methoden ziemlich nahtlos sein. Je größer das Array, desto größer der Vorteil der Verwendung von Standardschleifen.

Hinweis: Nehmen Sie Benchmarks nicht für bare Münze! Sie werden auf verschiedenen Computern ausgeführt, mit wahrscheinlich unterschiedlichen Browserversionen und JS-Engines. Testen Sie diese in Ihrer Anwendung und wählen Sie die skalierbare, schnellste Option für Ihren eigenen Anwendungsfall.

Zusammenfassung

In diesem Handbuch haben wir uns angesehen, wie Sie die minimalen und maximalen Elemente eines Arrays in JavaScript erhalten. Wir haben uns die angeschaut Math.min() und Math.max() Methoden, der Spread-Operator, die reduce() Verfahren wird die apply() -Methode und schrieb einen benutzerdefinierten Ansatz, um die Elemente durch a zu bekommen for Schleife.

Abschließend haben wir die Ergebnisse einem Benchmarking unterzogen und festgestellt, dass es nicht wirklich darauf ankommt, welchen Ansatz Sie für kleine Arrays verwenden, während Sie für größere Arrays eher Standard-for-Schleifen verwenden sollten.