I found very interesting stuff about Fisher-Yates and randomization here: How to randomize (shuffle) a JavaScript array?
Content!
//function source code from https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
//define input array.
//If you like, a site such as http://textmechanic.com/text-tools/numeration-tools/generate-list-numbers/ could be useful to generate different length arrays.
const inputArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
//define Durstenfield shuffle
const durstenShuffle = function(array) {
for (var i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = array[i];
array[i] = array[j];
array[j] = temp;
}
document.getElementById("dfresults").append(array.toString());
};
//define Fisher-Yates shuffle
const fisherShuffle = function(array) {
let currentIndex = array.length,
temporaryValue,
randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
document.getElementById("fyresults").append(array.toString());
};
//run Fisher shuffle
fisherShuffle(inputArray);
//run Durstenfield shuffle
durstenShuffle(inputArray);
html,
body {
font-size: 16px;
font-family: sans-serif;
}
h1,
h2 {
font-family: serif;
margin: 1rem 0.5rem;
}
h1 {
font-size: 1.75rem;
}
h2 {
font-size: 1.25rem;
}
p {
line-height: 1.5;
margin: 0.5rem 0.5rem;
}
<h1>Shuffling</h1>
<p>Comparing the Fisher-Yates to Durstenfield shuffle. Both return randomly sorted numbers quickly and efficiently. Is it O(n)? Only you can tell!</p>
<p>The array to be sorted is 30 numbers, 1-30 inclusive. Originally, I intended to do a performance comparison but because of deliberate error introduced into performance.now() due to Spectre mitigation fixes, that was infeasible to do clientside. So enjoy some shuffled numbers!</p>
<p>Specifically, on pageload each shuffle function will take the input array and return a shuffled result to the DOM.</p>
<div class="results">
<h2>Results</h2>
<p>Fisher-Yates: <span id="fyresults"></span></p>
<p>Durstenfield: <span id="dfresults"></span></p>
</div>
And now I would like to replace those 30 digits with first names (example: Thomas, Adrian, James, Patrick, Victor...)
How can I do this? I'm very new to this, I take my first steps
Since the shuffle
functions shuffle the arrays indexes, you can just shuffle the array the same way you did but add name strings in the array.
// replace numbers with names
const inputArray = ["Thomas", "Adrian", "James", "Patrick", "Victor"];
//define Durstenfield shuffle
const durstenShuffle = function(array) {
for (var i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = array[i];
array[i] = array[j];
array[j] = temp;
}
document.getElementById("dfresults").append(array.toString());
};
//define Fisher-Yates shuffle
const fisherShuffle = function(array) {
let currentIndex = array.length,
temporaryValue,
randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
document.getElementById("fyresults").append(array.toString());
};
fisherShuffle(inputArray);
durstenShuffle(inputArray);
<div class="results">
<h2>Results</h2>
<p>Fisher-Yates: <span id="fyresults"></span></p>
<p>Durstenfield: <span id="dfresults"></span></p>
</div>