How to shuffle an array using JavaScript ?
Shuffling an array or a list means that we randomly re-arranging the content of that structure. To shuffle an array we will use the following algorithms:
Algorithm 1:
javascript
function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { // Generate random number var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } |
chevron_right
filter_none
Example:
html
<!DOCTYPE html> <html> <head> <title>Shuffle array</title> </head> <body> <p>Array is=[1, 2, 3, 4, 5, 6, 7]</p> <button onclick="show()"> click </button> <script> // Fucntion to shuffle the array content function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { // Generate random number var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } // Function to show the result function show() { var arr = [1, 2, 3, 4, 5, 6, 7] var arr1 = shuffleArray(arr) document.write("After shuffling: ", arr1) } </script> </body> </html> |
chevron_right
filter_none
Output:
- Before Clicking the Button:
- After Clicking the button:
Algorithm 2:
Passing a function that returns (random value – 0.5 ) as comparator to sort function, so as to sort elements on random basis.
Javascript
function shuffleArray(array) { return array.sort( ()=>Math.random()-0.5 ); } |
chevron_right
filter_none
Example:
HTML
<!DOCTYPE html> <html> <head> <title>Shuffle array</title> </head> <body> <p>Array is=[1, 2, 3, 4, 5, 6, 7]</p> <button onclick="show()"> click </button> <script> // Fucntion to shuffle the array content function shuffleArray(array) { return array.sort( ()=>Math.random()-0.5 ); } // Function to show the result function show() { var arr = [1, 2, 3, 4, 5, 6, 7] var arr1 = shuffleArray(arr) document.write("After shuffling: ", arr1) } </script> </body> </html> |
chevron_right
filter_none
Output:
- Before Clicking the Button:
- After Clicking the button:
