如何使用 JavaScript 对数字数组进行排序?


在本文中,我们将学习在 JavaScript 中对数字数组进行排序的方法。数组排序是指按特定顺序排列数组元素,可以是升序或递增顺序,也可以是降序或递减顺序。

在 JavaScript 中,我们可以通过两种方式对数字数组进行特定顺序的排序:

  • 使用循环遍历数组

  • 使用 JavaScript 中提供的 sort() 方法

让我们详细讨论以上两种方法,并对数字值数组进行排序。

使用循环遍历数组

这是对数组进行排序的一种简单、容易和最基本的方法。我们甚至可以使用此方法对任何语言中的数字数组进行排序。在此方法中,我们使用两个不同的循环,并将每个元素相互比较以对数组进行排序。此方法的时间复杂度为 **O(N^2)**,额外空间复杂度为 **O(1)**,其中 **N** 为数组的大小。

语法

以下语法将向您展示如何使用嵌套循环按递增顺序对数组进行排序:

for(var i=0; i<n; i++){
   for(var j=i+1; j<n; j++){
      // statements inside the loops
   }
}

现在让我们了解此方法的实际实现,并通过 JavaScript 代码示例对数字值数组进行排序。

步骤

  • **步骤 1** - 在第一步中,我们将添加一个数字类型的输入元素到文档中,并获取用户输入的数字,将其作为元素推入数组。

  • **步骤 2** - 在此步骤中,我们将在文档中添加两个按钮元素以执行不同的任务。第一个按钮将插入或将输入的值推入数组,而第二个按钮将通过比较其数值来对数组元素进行排序。

  • **步骤 3** - 在下一步中,我们将定义一个 JavaScript 函数,并将其作为值分配给上一步中添加的第一个按钮的 onclick 事件,以便将元素插入到数组中。

  • **步骤 4** - 在第四步中,我们将定义另一个 JavaScript 函数,该函数将使用嵌套循环通过相互比较来对数组元素进行排序,并将其作为值分配给第二步中添加的第二个按钮的 onclick 事件。

示例

下面的示例将解释如何使用两个嵌套循环按升序对数字数组进行排序:

<!DOCTYPE html>
<html>
<body>
   <h2>Sort Numeric Array using JavaScript</h2>
   <p>Enter elements of the array in numeric form:</p>
   <input type = "number" id = "inp1" placeholder = "Number Value"><br><br>
   <p id = "prev"> The initial order of the elements stored in the array is:</p>
   <button id = "add" onclick = "setValues()"> Push element to the array</button>
   <button id = "btn" onclick = "sortElement()"> click to sort the array</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var prev = document.getElementById("prev");
      var myArr = [];
      function setValues() {
         var inp1 = document.getElementById("inp1");
         var val1 = inp1.value;
         var num = Number(val1);
         myArr.push(num)
         inp1.value = " ";
      }
      function sortElement() {
         var n = myArr.length;
         if (n == 0) {
            result.innerHTML = " <b> The array is empty, Please push the elements in the array and then try to sort. </b> "
         } else {
            prev.innerHTML += " <b> [ " + myArr + " ] </b> ";
            for (var i = 0; i < n; i++) {
               for (var j = i + 1; j < n; j++) {
                  if (myArr[j] < myArr[i]) {
                     // swap the numbers
                     var a = myArr[i];
                     myArr[i] = myArr[j];
                     myArr[j] = a;
                  }
               }
            }
            result.innerHTML = " The array is sorted in the increasing order and the sorted order is: <b> [ " + myArr + " ]. </b> ";
         }
      }
   </script>
</body>
</html>

在此示例中,我们看到了如何使用两个嵌套循环遍历并比较每个元素,并将它们按特定顺序排列,从而对数字值数组进行排序。

使用 sort() 方法

sort() 方法是 JavaScript 提供的一种用于对数组元素进行排序的方法。它将数组的所有值视为字符串,然后进行比较以进行排序。

sort() 方法的问题

将数组元素视为字符串的 sort() 方法的特性限制了其用途。因为,当存在一个包含零且大于所有其他元素的元素时,由于字符串的考虑,sort 方法会将该元素视为最小元素。例如,如果数组包含 **10** 和 **7** 作为元素。因此,根据数学运算,10>7,但 sort 方法会根据 10<7(字符串比较)进行相反顺序的排序,并将 10 放在 7 之前。

Array : [ 7, 5, 10, 12 ];
Order given by sort() method : [ 10, 12, 5, 7 ]
Correct order will be : [ 5, 7, 10, 12 ] 

**解决方案** - 以上问题的解决方案是使用比较器函数,并将其传递到 sort() 方法的括号内,以指定我们想要排序元素的顺序。比较器函数将返回三个值:

  • **负数** - 如果返回负值,则表示第一个参数小于第二个参数,因此它将在排序顺序中排在前面。

  • **零** - 零值表示两个参数相同,并且它们的位置不会改变。

  • **正数** - 正值表示第一个参数大于第二个参数,因此第二个参数将在排序顺序中排在前面。

语法

以下语法将让您知道如何使用 sort() 方法对数组进行排序:

array_name.sort( comparator_function ); 

让我们通过在 JavaScript 代码示例中进行实际实现来了解它:

算法

前一个示例和此示例的算法几乎相同。您只需要使用带有比较器函数的 **sort()** 方法对数组进行排序即可。

示例

下面的示例将解释如何使用带有比较器函数的 sort() 方法对数组元素进行排序:

<!DOCTYPE html>
<html>
<body>
   <h2>Sort Numeric Array using JavaScript</h2>
   <p>Enter elements of the array in numeric form:</p>
   <input type = "number" id = "inp1" placeholder = "Number Value"><br><br>
   <p id = "prev">The initial order of the elements stored in the array is:</p>
   <button id = "add" onclick = "setValues()">Push element to the array</button>
   <button id = "btn" onclick = "sortElement()">click to sort the array</button>
   <p id = "result"> </p> 
   <script>
      var result = document.getElementById("result");
      var prev = document.getElementById("prev");
      var myArr = [];
      function setValues() {
         var inp1 = document.getElementById("inp1");
         var val1 = inp1.value;
         var num = Number(val1);
         myArr.push(num)
         inp1.value = " ";
      }

      function sortElement() {
         function cmp(a, b) {
            return a - b;
         }
         var n = myArr.length;
         if (n == 0) {
            result.innerHTML = " <b> The array is empty, Please push the elements in the array and then try to sort. </b> "
         }
         else {
            prev.innerHTML += " <b> [ " + myArr + " ] </b> ";
            myArr.sort(cmp);
            result.innerHTML = " The array is sorted in the increasing order and the sorted order is: <b> [ " + myArr + " ]. </b> ";
         }
      }
   </script>
</body>
</html>

在上面的示例中,我们使用了带有比较器函数的 sort() 方法按递增或升序对数组元素进行排序。

**注意** - 如果您交换比较器函数和循环方法中我们比较的值,则数组元素将按相反顺序排序,即降序或递减顺序。

结论

在本文中,我们学习了两种不同的对数字数组元素进行排序的方法。我们还讨论了使用 sort() 方法对数组进行排序时出现的问题以及该问题的解决方案,并通过代码示例来了解每种方法的实际实现。

更新于:2023年11月20日

664 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告