Yogesh Chauhan's Blog

How to Sort (Shuffle) an Array in Random Order in JavaScript?

in JavaScript on August 12, 2020

Solution 1


var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
// [ 1, 100, 40, 10, 25, 5 ]

points.sort(function(a, b){return 0.5 - Math.random()});
// [ 5, 1, 25, 100, 10, 40 ]

...
...

Solution 2


var points = [40, 100, 1, 5, 25, 10];
var i, j, k;
for (i = points.length - 1; i > 0; i--) {
  j = Math.floor(Math.random() * i);
  k = points[i];
  points[i] = points[j];
  points[j] = k;
}
console.log(points);
// [ 10, 40, 100, 1, 5, 25 ]

console.log(points);
// [ 10, 40, 25, 100, 5, 1 ]

...
...

Make a function..


var points = [40, 100, 1, 5, 25, 10];
function myFunction() {
var i, j, k;
  for (i = points.length -1; i > 0; i--) {
    j = Math.floor(Math.random() * i)
    k = points[i]
    points[i] = points[j]
    points[j] = k
  }
  console.log(points) ;
}
myFunction();
// [ 10, 5, 25, 1, 40, 100 ]

myFunction();
// [ 1, 25, 100, 10, 5, 40 ]

Solution 3


function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

var points = [40, 100, 1, 5, 25, 10];
shuffle(points);

console.log(points);
// [ 40, 100, 5, 10, 1, 25 ]

console.log(points);
[ 40, 1, 5, 10, 100, 25 ]

Sources


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How JavaScript classes allows us to do less typing (syntactic sugar)?JavaScriptHow to add navigation menu in Angular 9 app?AngularColumn and Table Alias in PostgresPostgresSelf-Driving and Intelligent NetworksMiscellaneousHow to animate list items using CSS and JavaScript?CSSWhat are Class Constants in PHP?PHP