如何在 JavaScript 中排序集合?


集合也是一種資料結構,它與對映資料結構非常相似。它們之間唯一的區別在於,對映以鍵值對的形式儲存元素,而集合則只儲存單個值,順序與插入順序相同。它也可以像對映一樣儲存原始資料型別以及物件。

集合包含所有元素,順序與插入順序相同。但是,我們可以使用 JavaScript 的sort()方法按元素的升序或降序對集合進行排序,該方法通常用於按特定順序對陣列進行排序。

在本文中,我們將學習如何使用 sort() 方法在 JavaScript 中對集合進行排序。

讓我們首先看看如何在 JavaScript 中建立一個集合。

語法

按照以下語法在 JavaScript 中建立集合:

var set_name = new Set();

我們可以使用集合的add()方法將新元素插入或新增到集合中。

步驟

  • 步驟 1 - 在第一步中,我們將向文件中新增一個輸入元素,以便逐個從使用者獲取輸入元素。

  • 步驟 2 - 在下一步中,我們將新增三個按鈕元素,每個元素都關聯 onclick 事件。第一個按鈕將把輸入的元素新增到集合中,第二個按鈕將清除集合中的所有元素,第三個按鈕將對集合的元素進行排序,並顯示元素之前的順序和排序後的順序。

  • 步驟 3 - 在第三步中,我們將定義三個具有不同功能的不同函式,並根據它們的功能將它們分配給上一步中定義的按鈕的 onclick 事件。

  • 步驟 4 - 在最後一步中,我們將編寫上一步中定義的三個函式的程式碼,以便在 JavaScript 中新增、清除和排序集合的元素。

讓我們實際運用 sort() 方法來按特定順序對集合的元素進行排序。

示例

下面的示例將向您解釋如何使用 sort() 方法按升序對集合的元素進行排序:

<!DOCTYPE html>
<html>
<body>
   <h2>Sorting a set in JavaScript</h2>
   <p>Enter a number to insert into set:</p>
   <input type = "number" id = "inp1"><br><br>
   <button id = "add" onclick = "setAdd()"> Add Item to set</button>
   <button id = "clear" onclick = "clearSet()"> Clear the set</button>
   <button id = "btn" onclick = "setSort()">click to sort</button>
   <p id = "prev">The initial order of values in set is:</p>
   <p id = "result">The final sorted order of values in set is:</p>
   <script>
      var result = document.getElementById("result");
      var prev = document.getElementById("prev");
      var mySet = new Set();

      function setAdd() {
         var inp1 = document.getElementById("inp1");
         var val1 = inp1.value;
         var num1 = Number(val1);
         mySet.add(num1);
         inp1.value = " ";
      }

      function clearSet() {
         mySet.clear();
      }

      function setSort() {
         var tempArr = [];

         for (var item of mySet) {
            tempArr.push(item);
         }

         tempArr.sort();

         for (var item of mySet) {
            prev.innerHTML += " <b> " + item + " </b> ";
         }

         mySet.clear();

         for (var item of tempArr) {
            mySet.add(item);
         }

         for (var item of mySet) {
            result.innerHTML += " <b> " + item + " </b> ";
         }
      }
   </script>
</body>
</html>

在上面的示例中,我們使用了 sort() 方法,藉助陣列(正如我們在解決此問題的方法中所討論的)按升序對集合的元素進行排序。

讓我們再看一個程式碼示例,我們將按降序對集合的元素進行排序。

方法

前面示例和本示例的方法相同。您只需要編寫一個cmp函式並將其傳遞給sort()方法,使其按給定順序對專案進行排序。cmp函式由下面的程式碼示例解釋,我們將使用它來按降序對專案進行排序。

示例

下面的示例將演示如何使用帶 cmp 函式的 sort() 方法來定義排序順序:

<!DOCTYPE html>
<html>
<body>
   <h2>Sort a set in JavaScript</h2>
   <p>Enter a number to insert into set:</p>
   <input type = "number" id = "inp1"> <br> <br>
   <button id = "add" onclick = "setAdd()">Add Item to set</button>
   <button id = "clear" onclick = "clearSet()">Clear the set</button>
   <button id = "btn" onclick = "setSort()">click to sort</button>
   <p id = "prev">The initial order of values in set is:</p>
   <p id = "result">The final sorted order of values in set is:</p>
   <script>
      var result = document.getElementById("result");
      var prev = document.getElementById("prev");
      var mySet = new Set();
      function setAdd() {
         var inp1 = document.getElementById("inp1");
         var val1 = inp1.value;
         var num1 = Number(val1);
         mySet.add(num1);
         inp1.value = " ";
      }

      function clearSet() {
         mySet.clear();
      }

      function setSort() {
         var tempArr = [];

         for (var item of mySet) {
            tempArr.push(item);
         }

         function cmp(a, b) {
            return b - a;
         }

         tempArr.sort(cmp);

         for (var item of mySet) {
            prev.innerHTML += " <b> " + item + " </b> ";
         }

         mySet.clear();

         for (var item of tempArr) {
            mySet.add(item);
         }

         for (var item of mySet) {
            result.innerHTML += " <b> " + item + " </b> ";
         }
      }
   </script>
</body>
</html>

在這個例子中,我們使用 sort() 方法,透過使用 cmp 函式指定排序順序,按降序對集合的元素進行排序。

結論

在本文中,我們學習了在 JavaScript 中使用 sort() 方法以不同順序對集合的專案進行排序的不同方法。我們還看到了兩個不同的 JavaScript 程式碼示例,第一個示例按升序對專案進行排序,第二個示例透過使用 cmp 函式為 sort() 方法提供排序順序,按降序對元素進行排序。

更新於:2023年11月20日

316 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告