JavaScript 数组排序方法

发布:2024-09-16 11:40 阅读:78 点赞:0

在JavaScript中,对数字数组进行排序可以通过多种方法实现。排序的目的是将数组中的元素按照特定的顺序排列,如升序或降序。本文将介绍两种主要的排序方法:使用循环和使用 sort() 方法。

一. 使用循环排序数组

方法概述

这是最简单的排序方法,通过嵌套循环比较数组中的每一对元素。这个方法的时间复杂度为 O(N^2),空间复杂度为 O(1)。

示例代码

以下是使用嵌套循环对数组进行升序排序的示例代码:

<!DOCTYPE html>
<html>
<body>
   <h2>使用 JavaScript 排序数字数组</h2>
   <p>输入数组元素:</p>
   <input type="number" id="inp1" placeholder="数字值"><br><br>
   <p id="prev">数组的初始顺序:</p>
   <button id="add" onclick="setValues()">将元素推入数组</button>
   <button id="btn" onclick="sortElement()">点击排序数组</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>数组为空,请先添加元素。</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]) {
                     // 交换元素
                     var a = myArr[i];
                     myArr[i] = myArr[j];
                     myArr[j] = a;
                  }
               }
            }
            result.innerHTML = "数组已按升序排序,排序后的数组为:<b>[ " + myArr + " ]</b>";
         }
      }
   
</script>
</body>
</html>

运行结果

该代码在网页上显示了一个数组排序工具,用户可以输入数字并点击按钮进行排序。排序采用了嵌套循环方法。

二. 使用 sort() 方法排序数组

方法概述

sort() 方法是JavaScript内置的数组排序函数。默认情况下,sort() 方法将数组元素视为字符串进行排序,可能导致不符合预期的结果。为了正确排序数值数组,需要使用比较函数。

示例代码

以下是使用 sort() 方法及其比较函数对数组进行升序排序的示例代码:

<!DOCTYPE html>
<html>
<body>
   <h2>使用 JavaScript 排序数字数组</h2>
   <p>输入数组元素:</p>
   <input type="number" id="inp1" placeholder="数字值"><br><br>
   <p id="prev">数组的初始顺序:</p>
   <button id="add" onclick="setValues()">将元素推入数组</button>
   <button id="btn" onclick="sortElement()">点击排序数组</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>数组为空,请先添加元素。</b>";
         } else {
            prev.innerHTML += "<b>[ " + myArr + " ]</b>";
            myArr.sort(cmp);
            result.innerHTML = "数组已按升序排序,排序后的数组为:<b>[ " + myArr + " ]</b>";
         }
      }
   
</script>
</body>
</html>

运行结果

此代码使用 sort() 方法及其比较函数对数组进行排序,用户可以通过点击按钮查看排序结果。

三.总结

本文介绍了两种在JavaScript中对数值数组进行排序的方法:使用循环和使用 sort() 方法。前者适合学习和理解排序算法的基本原理,而后者则是实际开发中更常用的方法。选择适当的方法取决于具体的应用场景和性能要求。