如何在 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 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告