Technik #1
function Shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};Verwendung
var testArray = [1,2,3,4,5];
Shuffle(testArray);
// jQuery to dump out new values to element with ID of 'dump'
$(function() {
for (var i=0;i<testArray.length;i++) {
$("#dump").append(testArray[i]);
}
});Technik #2
yourArray.sort(function() { return 0.5 - Math.random() });
Schön.. dieser Code-Schnipsel hat mir sehr geholfen! Danke :)
Technik #2
deinArray.sort(function() { return 0.5 – Math.random() });
Das ist auch für mich sehr hilfreich, vielen Dank.
+1 für die .sort()-Methode in Technik #2! sehr clever…
Hey, wieder einmal absolut hilfreich, wirklich froh zu sehen, dass CSS-tricks neben einer wirklich guten CSS-Ressource auch eine tolle JS-Ressource ist!!
Danke!!
Hey,
Sehr nützlich! danke! 1 Frage, kannst du mir erklären, was Technik 2 macht?
Besonders das { return 0.5 – Math.random() });. Wie sortiert das das Array?
Grüße
Ich werde versuchen, es zu erklären.
Die sort-Funktion erlaubt es Ihnen, eine Vergleichsfunktion an sie zu übergeben. Was diese Funktion zurückgibt, sortiert dann das Objekt im Array.
Wenn sie also
-1zurückgibt, wird Objekt A einen niedrigeren Index als B erhalten.0lässt ihre Reihenfolge unverändert, und1gibt B einen niedrigeren Index als A. Das ist es, was ich aus der Dokumentation entnehmen kann.Aber wie passt das zum bereitgestellten Code?
Math.random()gibt eine Zufallszahl zwischen 0 und 1 zurück. Wenn Sie also0.5 - Math.random()eingeben, erhalten Sie eine Zahl zwischen -1 und 1, was die sort()-Funktion benötigt.Jedem Objekt im Array wird eine zufällige Indexnummer zugewiesen und dann danach sortiert.
Ich könnte falsch liegen, höchstwahrscheinlich, aber so kann ich es interpretieren. Ich bin mir bei dem Teil
0.5 - Math.Random100% sicher, aber bei dersort-Funktion bin ich mir nicht ganz sicher.Aber hey, es funktioniert, oder?
So funktioniert das:
Wenn eine solche Funktion in array.sort() übergeben wird, werden die Array-Elemente basierend auf der Beziehung zwischen jedem Elementpaar „a“ und „b“ und dem Rückgabewert der Funktion sortiert. Die drei möglichen Rückgabewerte sind: 0 (größer als 0)
Weniger als 0: Sortiere „a“ zu einem niedrigeren Index als „b“
Null: „a“ und „b“ sollten als gleich betrachtet werden, und es wird keine Sortierung durchgeführt.
Größer als 0: Sortiere „b“ zu einem niedrigeren Index als „a“
Wenn Sie Math.random() aufrufen, gibt es eine Zufallszahl zwischen 0 und 1 zurück. In 50% der Fälle ist die 0,5 im obigen Fall kleiner als die Math.random()-Zahl und in den anderen 50% der Fälle ist sie größer. Wenn sie kleiner ist, ist die Sortierreihenfolge aufsteigend, wenn sie größer ist, ist die Sortierreihenfolge absteigend. Das führt zu einer zufälligen Sortierreihenfolge des Arrays.
Verwenden Sie NICHT die Array.sort()-Technik! Sie führt KEINE zufällige Mischung durch. Der Fisher-Yates-Algorithmus, der in der ersten Technik implementiert ist, ist der richtige Weg. Der folgende Link zeigt eine sauberere Implementierung dieses Algorithmus und erklärt, warum die Array.sort()-Technik falsch ist.
http://sroucheray.org/blog/2009/11/array-sort-should-not-be-used-to-shuffle-an-array/
Du bist ein Genie!!!! Danke!
Du bist ein Genie!!!! Danke!
http://eagle-design.ir/
Danke dafür, Chris, ich habe deine Mischtechnik verwendet, um diese Kartenspiel-Demo zu erstellen
http://codepen.io/bitmapshades/pen/raOZMa
Frohe Weihnachten!
Die Version mit sort sollte vermieden werden. Man kann leicht beobachten, dass die letzten Elemente selten genug gemischt werden (sie bleiben oft an derselben Stelle).
Der Grund, warum sort eine schlechte Idee ist, ist – sort ist optimiert, um ein Array nach Ihren Wünschen (der von Ihnen bereitgestellten Funktion) zu sortieren. Die von Ihnen bereitgestellte Funktion soll tatsächlich zwei Argumente (zwei Elemente aus dem Array) entgegennehmen. Sie sollen sie in der Funktion vergleichen und -1 zurückgeben, wenn das erste vor dem zweiten sortiert werden soll, 1, wenn das zweite vor dem ersten sortiert werden soll, und 0, wenn sie gleich sind...)
Daher ist sort eine brillante Methode, da Sie Ihre eigene Logik für die Reihenfolge eines Arrays anhand der von Ihnen angegebenen Funktion bereitstellen können. Sie haben die Kontrolle darüber, wie Sie Dinge ordnen möchten.
Und JavaScript hat die Kontrolle darüber, wie oft Ihre Funktion aufgerufen wird und mit welchen Elementen aus dem Array – die JS-Engine versucht, sie so selten wie möglich aufzurufen, gerade genug, um die richtige Sortierreihenfolge zu ermitteln. Dann hört sie auf, sort aufzurufen. Auf diese Weise dauert das Sortieren eines Arrays so wenig Zeit wie möglich.
Aber wenn Sie den Vergleich von Elementen ignorieren und einfach eine Zufallszahl zurückgeben, versucht die JS-Engine immer noch, die Aufrufe zu minimieren – daher stellen die meisten Sequenzen von zufälligen -1- und 1-Werten fest, dass sie alle notwendigen Sortierungen abgeschlossen hat, lange BEVOR alle Elemente gemischt wurden.
Also: Bitte verwenden Sie sort, um Dinge auf eine geordnete, schöne Weise nach logischen Regeln zu sortieren. Aber verwenden Sie es NICHT, um ein Array zu mischen! :D
Eine theoretischere Erklärung (und Messungen) finden Sie hier
http://www.robweir.com/blog/2010/02/microsoft-random-browser-ballot.html
Wenn Sie nach etwas suchen, das das Original-Array nicht zerstört, aber eine gemischte Kopie liefert, können Sie so etwas verwenden:
Array.prototype.shuffle = function(){
var x = this.slice(), y = [];
while(x.length){y.push(x.splice(Math.floor(Math.random()*x.length),1)[0]);}
return y;
}
Jetzt können alle Arrays gemischt werden wie
var a = [1,2,3,4,6,7,8];
console.log( “Shuffle 1”, a.shuffle() );
console.log( “Shuffle 2”, b.shuffle() );
usw.
Geschwindigkeitsvergleich
https://jsperf.com/array-shuffe-test
Technik #2 funktioniert nicht!
http://codepen.io/GottZ/pen/ZbEaZg
Statistisch gesehen würde der Tausch innerhalb von sort nur die Hälfte der Zeit passieren, wenn er „benötigt“ wird, und infolgedessen hätten Sie eine Verzerrung zu den ursprünglichen Werten.
Was wäre, wenn wir den Code ändern würden zu: „yourArray.sort(function() { return Math.random() – Math.random() });“? Würde das die Verzerrung eliminieren?
var arr = [1, 2, 3, 4];
function Shuffle(a){for(var b,c,d=a.length; d>0;)c=Math.floor(Math.random()*d),d–,b=a[d],a[d]=a[c],a[c]=b;return a;}
for(i=0;i<100;i++){
document.write(Shuffle(arr)+””);
}
Dies ist eine Chiffre für alphanumerische Zeichen, die sich jedes Mal ändert, wenn Sie den Code ausführen, wie rot13. Ich nenne es Rot-Rand.
Die zweite Technik erscheint sehr elegant und clever.
Ich bin immer noch besorgt darüber, was passiert, wenn der Webbrowser den Sortieralgorithmus mit BubbleSort oder QuickSort implementiert...
Es scheint, dass es bei einigen Sortieralgorithmen kein Problem gibt, aber bei anderen könnten sie sich endlos laufen lassen, da sie fast nie eine Reihe von „korrekten“ Antworten erhalten, da ihre Wahrscheinlichkeit exponentiell gegen 0 geht.
Großartig! Das hat mich gerettet! Vielen Dank :)