如何在 JavaScript 中隨機打亂陣列?
Shuffle(洗牌)意味著您正在重新排列陣列元素或將其混合以產生隨機順序。
_.shuffle() 屬於 underscore.js,這是一個提供通用功能的 JavaScript 庫。它用於以隨機方式排列陣列元素列表,它使用 Fisher-Yates 洗牌演算法。
因此,每次執行程式碼時,這都會根據 Fisher-Yates 洗牌演算法以不同的順序輸出結果。以下是 _.shuffle() 函式的示例:
_.shuffle(list)
引數 - 此函式接受單個引數列表。該引數用於儲存將在洗牌時使用的專案列表。
返回值 - 返回值是一個全新的隨機陣列,其中包含原始陣列中所有可用的元素,如傳遞到 _.shuffle() 函式一樣。
示例 1:將數字陣列傳遞給 _.shuffle() 函式
_.shuffle() 函式一次從原始陣列中獲取一個列表。並根據 Fisher-Yates 洗牌演算法執行指定的運算。
<!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>
在以上輸出中,每次重新整理頁面時,它都會根據頁面重新載入給出不同的輸出。以上 Javascript 程式碼在重新載入頁面後隨機重新排列輸出。
示例 2:將結構傳遞給 _.shuffle() 函式
將結構傳遞給 _.shuffle() 函式。首先,我們建立了一個名為 details 的陣列並將該陣列傳遞到 _.shuffle() 函式中。“details”陣列的元素將被打亂。
<!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>
示例 3:將陣列傳遞給 _.shuffle() 函式
宣告一個具有屬性“num”的陣列“users”,然後將其傳遞到 _.shuffle() 函式中,並使用引數 users 和 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>
示例 4:使用 sort() 和 Math.random()
以下示例演示了在 JavaScript 中使用 sort() 和 Math.random() 方法。
<!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>
廣告
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP