資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何隨機化（洗牌）JavaScript陣列？
在本教程中，我們將學習隨機化或洗牌 JavaScript 陣列的方法。
我們可以透過使用某些庫或演算法中現有的洗牌函式來實現這一點。
讓我們繼續討論這個問題。
使用 Fisher-Yates 演算法和解構賦值
在此，演算法從最後一個索引迭代到第一個索引。在每次迴圈中，它都會交換陣列值並建立有限序列的隨機排列。
我們可以按照以下語法使用此演算法。
語法
for (var i=arr.length – 1;i>0;i--) {
var j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
這裡，解構賦值語法用於在迴圈內交換兩個變數的值。
演算法
步驟 1 - 列出 1 到 N。
步驟 2 - 選擇一個介於 1 和剩餘值之間的隨機值 x。
步驟 3 - 將從最後開始的第 x 個值放入新列表中，並從實際列表中刪除第 x 個值。
步驟 4 - 重複步驟 2，直到列表中的所有值都被刪除。
步驟 5 - 步驟 3 中的新列表是實際列表的隨機排列。
示例
在此程式碼中，我們在一行程式碼中交換兩個變數的值。根據 Fisher-Yates 演算法，我們的程式會對輸入陣列進行洗牌並顯示輸出。
<html> <body> <p id = "data"></p> <p id="result"></p> <script> function fisherYatesRandomize(arr) { for (var i = arr.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } var fshArray = [10, 20, 30, 40, 50, 60]; document.getElementById("data").innerHTML = "Original Array - " +fshArray document.getElementById("result").innerHTML = "Shuffled Array - " + fisherYatesRandomize(fshArray); </script> </body> </html>
使用 Drustenfield 洗牌演算法
Drustenfield 演算法是Fisher-Yates演算法的最佳化版本。
該演算法為每個陣列索引選擇一個隨機值，並從下一個選擇中排除此值。這與從一副牌中抽牌完全一樣。此迴圈向後工作。因此，這裡的效率是最佳的。此演算法的執行時間為O(n)。
使用者可以按照以下語法使用此演算法。
語法
for (var i = arr.length - 1; i > 0; i--)
{
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
在此，交換是在迴圈內藉助新變數完成的。
演算法
步驟 1 - 令陣列長度為 len
步驟 2 - 迴圈遍歷索引 len-1 和 1 的值。遞減迴圈控制 lc。
步驟 3 - 從當前 lc 和 1 中選擇一個隨機值 n。
步驟 4 - 交換索引 n 和 lc 的值。因此，隨機值會向下一個迭代索引移動。
步驟 5 - 繼續步驟 2 和後續步驟，直到迴圈結束。
示例
在此示例中，我們將陣列提供給迴圈。Math.random() 和一般交換在從最後一個索引到第一個索引的迴圈內工作。迴圈執行後返回洗牌後的陣列。
<html> <body> <h3> Shuffle a JavaScript array using <i>Drustenfield shuffle algorithm</i> </h3> <p id="data"></p> <p id="result"></p> <script> function doShuffle(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } var drsArr = [100, 200, 300, 400, 500, 600]; document.getElementById("data").innerHTML = "Original Array - " + drsArr document.getElementById("result").innerHTML = "Shuffled Array - " + doShuffle(drsArr); document.getElementById("result").innerHTML = "Shuffled Array - " + doShuffle(drsArr); </script> <p> Note: You may get different shuffled array each time when you run the program </body> </html>
使用 Array sort() 方法
在這裡，我們將討論sort() 方法。sort() 方法依賴於 JavaScript 引擎。Math.random()的值在每次執行時可能為正或為負。這將返回 0 到 0.999 之間的值。Math.random() – 0.5 返回 -0.5 到 0.499 之間的值。
當 value1 和 value2 的排序結果大於 0 時，value1 將放在 value2 之前。這是邏輯。
sort 方法會修改原始陣列。如果您需要原始陣列的副本，可以使用下面給出的展開運算子語法。
語法
arr.sort(function(a, b)
{
return Math.random() - 0.5;
});
//Arrow function syntax
arr.sort(() => Math.random() - 0.5);
//The spread operator syntax
[...arr].sort(() => Math.random() - 0.5);
通常，陣列的兩個值會傳遞給 sort 函式，就像在第一個語法中一樣。因為我們沒有在函式內部使用它，所以我們可以省略引數。
示例
在此示例中，sort 方法使用 Math.random() – 0.5 邏輯以隨機順序對輸入陣列值進行排序。
<html> <body> <h3>Shuffle a JavaScript array using the <i>array sort()</i> method</h3> <p id="data"></p> <p id="result"></p> <script> let srtLst = [1, 2, 3, 4, 5, 6, 7]; document.getElementById("data").innerHTML = "Original Array - " + srtLst srtLst = srtLst.sort(() => Math.random() - 0.5); document.getElementById("result").innerHTML = "Shuffled array - " + srtLst; </script> <p>Note: You may get different shuffled array each time when you run the program</p> </body> </html>
使用 underscore.js/Lo-Dash 庫
我們將看到如何在程式中實現此庫方法。這裡我們不需要任何演算法。此庫具有_.shuffle() 方法。首先，我們將在 script 標籤中匯入庫。
語法
_.shuffle(arr);
在這裡，輸入陣列將提供給此庫的 shuffle 方法。
引數
arr - 輸入陣列
示例
在此程式中，我們添加了一個庫檔案。shuffle 方法處理我們的輸入陣列並顯示洗牌後的陣列。
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script> </head> <body> <h3> Shuffle a JavaScript array using <i>Underscore js library</i> </h3> <p id="libShuffOp"></p> <script> var libArray = ["Green", "Blue", "White"]; libResArray = _.shuffle(libArray); document.getElementById("libShuffOp").innerHTML = "Shuffled array - " + libResArray; </script> </body> </html>
本教程幫助我們學習了兩種演算法方法、陣列排序方法和 JavaScript 庫方法來隨機化 JavaScript 陣列。
Drustenfield 演算法方法高效、快速且可靠。陣列排序方法不可靠，因為沒有明確的模式。Underscore.js 庫會增加負載，因此最好將其作為最後的選擇。
2K+ 次瀏覽
