Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to shuffle an array in a random manner in JavaScript?
Shuffle means you are rearranging something from the elements of your array or mixing it to produce a random order.
The _.shuffle() belongs to underscore.js a JavaScript library that provides versatile functions. It is used to arrange the list of array elements in a random manner it uses Fisher-Yates shuffle Algorithm.
So every time you execute your code this will gives outputs in a different order according to the Fisher-Yates shuffle Algorithm. Following is an example of the _.shuffle() function −
_.shuffle(list)
Parameters − This function accepts the single arguments list. the argument is used to hold the list of items when we will be shuffled.
Return Value − The returned value is an all-new randomized array holding all the elements which are available in the original array as proceed to the _.shuffle() function.
Example 1: Passing a numeric array to the _.shuffle() function
The _.shuffle() function takes the list one by one from the original array. And performing the specified operation according to the Fisher−Yates shuffle Algorithm.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
<script type="text/javascript">
document.write(_.shuffle([1, 2, 3, 4, 5, 6]));
</script>
</body>
</html>
In the above output every time, it will give different outputs according to the page reloading.The above Javascript randomly re-arranging the output after reloading the page.
Example: 2: Passing a structure to _.shuffle() function
Passing a structure to the _.shuffle() function. first, we created an array named details and passed the array into _.shuffle() function. The element of the "details" array will be shuffled.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
<script type="text/javascript">
var details = [{
"category": "Tutorials",
"title": "Point",
"id": "1"
},
{
"category": "easy",
"title": "to",
"id": "2"
},
{
"category": "learn",
"title": "here",
"id": "3"
},
];
document.write(JSON.stringify(_.shuffle(details)));
</script>
</body>
</html>
Example: 3 Passing an array to the _.shuffle() function
Declare an array ‘users’ with property ‘num’ and then passed it into the _.shuffle() function with arguments users, and id.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
<script type="text/javascript">
var users = [
{ "num": "1" },
{ "num": "2" },
{ "num": "3" }
];
document.write(JSON.stringify(_.shuffle(users, 'id')));
</script>
</body>
</html>
Example 4: Using sort() and Math.random()
The following example demonstrates the use of the sort() and the Math.random() method in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shuffle an array in a random manner</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<div id="shuffle"></div>
</head>
<body>
<script>
let arr = new Array("Alice", 40, "Edward", 39, "cullen");
arr = arr.sort(() => Math.random() - 1 / 2);
document.getElementById("shuffle").innerHTML = "Shuffle an array in a random manner : " + arr;
</script>
</body>
</html>
311 Views
