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

更新於: 2022-12-06

365 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告