Viele Möglichkeiten, Math.random() in JavaScript zu nutzen

Math.random() ist eine API in JavaScript. Es ist eine Funktion, die eine Zufallszahl liefert. Die zurückgegebene Zahl liegt zwischen 0 (einschließlich, d. h. es ist möglich, dass eine tatsächliche 0 zurückgegeben wird) und 1 (ausschließlich, d. h. es ist nicht möglich, dass eine tatsächliche 1 zurückgegeben wird).

Math.random(); // returns a random number lower than 1

Dies ist unglaublich nützlich für Spiele, Animationen, zufällige Daten, generative Kunst, zufällige Textgenerierung und mehr! Es kann für die Webentwicklung, mobile Anwendungen, Computerprogramme und Videospiele verwendet werden.

Immer wenn wir in unserer Arbeit Zufälligkeit benötigen, können wir diese Funktion verwenden! Schauen wir uns acht verschiedene Möglichkeiten an, wie wir sie nutzen können. Diese Beispiele stammen alle von verschiedenen Autoren, die etwas Interessantes mit dieser API machen.

Animation

Um ein Objekt zu erzeugen und zu animieren, verwenden wir Math.random. Die Neonlinien bilden spontane Sechsecke, aber die Zufälligkeit steckt auch in ihren generativen Funken. 

Computergenerierte Musik

Dieses Programm nimmt die traditionelle Melodie von „Auld Lang Syne“ und spielt zufällige Noten daraus auf dem Klavier. Ein Änderungspaket wird aus den Zähldaten erstellt und eine Zufallszahl generiert, um einen Wert auszuwählen. Oktave wird ebenfalls zufällig ausgewählt.

Zufälliges Bild anzeigen

Bilder werden in einem Array gespeichert. Eine Zahl wird generiert und mit der Anzahl der Bilder im Array über array.length multipliziert. Dann rundet Math.floor den Wert auf eine ganze Zahl und setzt die Bildquelle im HTML, wenn die Seite geladen wird oder der Button geklickt wird.

Zufällige Hintergrundfarbe

Hier passiert die Magie

const random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Die erste Codezeile mischt das Array zufällig und die zweite Zeile gibt eine Zufallszahl zwischen 0 und 10 zurück. Im Beispiel eines zufälligen Farbhintergrunds kann der Farbbereich und spezifische Angaben wie Farbtöne, Sättigungen und Schattierungen festgelegt werden. 

Für eine weitere Methode zur Generierung einer zufälligen Hex-Farbe, siehe diesen Artikel von Chris Coyer. 

Generative Kunst

In dieser sich morphierenden Fraktalkurve wird Math.random zweimal verwendet, um die Farben für den Farbverlauf festzulegen, und noch einmal für den maximalen Radius der Kurven. Dies ist eine großartige Möglichkeit, mit jeder Iteration ein völlig neues Erscheinungsbild zu schaffen!

Wortgenerator

Wir ersetzen die Kopfzeile durch ein zufällig ausgewähltes Wort aus einem Array, indem wir Math.random verwenden.

var word = words[Math.floor(Math.random() * words.length)] + "!";

Dies ähnelt dem Beispiel mit dem zufälligen Bild – die perfekte Übung für Anfänger! 

API-Schlüssel-Generator

Hier ist ein super praxisnaher Anwendungsfall für Zufallszahlen! Die Demo generiert 16 Zufallszahlen, um einen universell eindeutigen Bezeichner (UUID) zu erstellen, der als Schlüssel für den Zugriff auf eine API verwendet werden kann.

Text-Verschiebung

Einige Phrasen werden gespeichert und nacheinander angezeigt, getrennt durch eine Animation, die die Buchstaben mit zufälligen Zeichen zwischen den Phrasen zu verschieben scheint, die von Math.random ausgewählt werden.

Schere Stein Papier

In diesem klassischen Kinderspiel Schere Stein Papier wird Math.random verwendet, um einen zufälligen Zug für den Computer zu generieren, der als Gegner spielt. Er wählt aus den drei verfügbaren Zügen.

Starker Passwortgenerator

Dieser Passwortgenerator verwendet Math.random, um ein Passwort-Array mit Groß- und Kleinbuchstaben zu erhalten, und fügt dann zufällige Ziffern zum generierten Passwort hinzu. Dies ist ein weiteres großartiges praktisches Beispiel!

Ein paar Anmerkungen…

Es ist möglich, dass Sie nach dem Ansehen von Math.random in diesen Beispielen Fragen haben. Es gibt ein paar, die mir oft auffallen…

Ist Math.random() wirklich zufällig?

Nicht ganz. Math.random() gibt eine Pseudozufallszahl zurück. Dieser Algorithmus wird als Pseudozufallszahlengenerator (oder PRNG) bezeichnet. Das bedeutet, dass seine Zufälligkeit unter bestimmten Umständen reproduziert werden kann. 

Die Zufälligkeit basiert auf dem Algorithmus xorshift128+, der wahrscheinlich in Ihrem Browser läuft.

Es ist also eher zufällig.

Wie gehen Sie mit wiederholten Werten um?

Es gibt viele Methoden, um eindeutige Werte ohne Wiederholung zu erzielen. Der Fisher-Yates-Algorithmus ist eine großartige Möglichkeit, zu verhindern, dass dieselbe Zahl zweimal erhalten wird, indem die Sequenz gemischt wird. Math.random wählt einen Wert aus dem gemischten Array einer endlichen Sequenz, wie im folgenden Code-Snippet gezeigt.

function shuffle (array) {
  var i = 0
    , j = 0
    , temp = null

  for (i = array.length - 1; i > 0; i -= 1) {
    j = Math.floor(Math.random() * (i + 1))
    temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
}

Ist Math.random() dasselbe wie WebCrypto?

Wie Sie aus diesem Artikel gesehen haben, ist Math.random() großartig! Wenn Sie jedoch mit sensiblen Anwendungen arbeiten und eine sicherere Methode zur Zufälligkeitsgenerierung benötigen, empfehle ich WebCrypto. Gründe für die Verwendung von WebCrypto sind temporäre Verifizierungscodes, zufällige Passwortgenerierung, zufällige Lotteriezahlen usw. 

Wenn Sie Zufälligkeit für Zwecke der Cybersicherheit, Kryptographie oder Statistik benötigen, verwenden Sie die Funktion window.crypto.getRandomValues und lesen Sie die Dokumentation von Mozilla zur WebCrypto API.