如何在 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>
廣告