js实现冒泡、插入、快速排序

ゝ一纸荒年。 2023-02-25 08:45 1阅读 0赞

## js实现冒泡、插入、快速排序 ##

虽然js实现排序可以直接用sort()函数实现，但是对于简单的排序算法还是要掌的，本文用简单的方法实现十种排序算法中最常见的三种。详细步骤都写在注释中。

**冒泡排序**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>冒泡排序</title>
    </head>
    
    <body>
      <input type="text" name="" id="arrs" placeholder="输入需要排序的数组以,分割">
      <button>开始排序</button>
    </body>
    
    <script>
      var btn = document.getElementsByTagName('button')[0];
      btn.onclick = bubble;
      //处理输入框的value 转为数组形式
      function getarrs() { 
        let arrValue = document.getElementById("arrs").value;
        let stringArr = arrValue.split(',');
        let arrs = [];
        //将分割后的字符串数组转为整型数组
        stringArr.forEach(element => { 
          arrs.push(+element);
        });
        return arrs;
      }
    
      /* 数组当前项和后一项比较，如果当前项比后一项大，则两项交换位置（让大的靠后）即可 */
      function bubble() { 
        let arrs = getarrs();
        let temp = null;
        //外层循环控制比较的轮数
        for (let i = 0; i < arrs.length - 1; i++) { 
          //里层循环控制每一轮比较的次数
          for (let j = 0; j < arrs.length - 1 - i; j++) { 
            if (arrs[j] > arrs[j + 1]) { 
              temp = arrs[j];
              arrs[j] = arrs[j + 1];
              arrs[j + 1] = temp
            }
          }
        }
        console.log(arrs);
      }
    
    </script>
    
    </html>

**插入排序**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>插入排序</title>
    </head>
    
    <body>
      <input type="text" name="" id="arrs" placeholder="输入需要排序的数组以,分割">
      <button>开始排序</button>
    </body>
    
    <script>
      var btn = document.getElementsByTagName('button')[0];
      btn.onclick = insert
    
      function getarrs() { 
        let arrValue = document.getElementById("arrs").value;
        let stringArr = arrValue.split(',');
        let arrs = [];
        stringArr.forEach(element => { 
          arrs.push(+element);
        });
        return arrs;
      }
    
      function insert() { 
        let arrs = getarrs()
        //1.准备一个新数组,用来存储抓抓取的数组项，开始先抓数组首项进来
        let handle = [];
        handle.push(arrs[0]);
    
        //2.从第二项开始依次抓取
        for (let i = 1; i < arrs.length; i++) { 
          //当前抓取的项
          let temp = arrs[i];
          // 和handle里的数依次比较
          for (let j = arrs.length - 1; j >= 0; j--) { 
            //每次要比较的 handle 中的项
            let tempHandle = handle[j];
            //如果temp比tempHandle大，则放到 tempHandle后面
            if (temp > tempHandle) { 
              handle.splice(j + 1, 0, temp);
              break;
            }
            if (j === 0) { 
              handle.unshift(temp);
            }
          }
    
        }
        console.log(handle);
      }
    
    </script>
    
    </html>

**快速排序**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>快速排序</title>
    </head>
    
    <body>
      <input type="text" name="" id="arrs" placeholder="输入需要排序的数组以,分割">
      <button>开始排序</button>
    </body>
    
    <script>
      var btn = document.getElementsByTagName('button')[0];
      btn.onclick = ac
      function getarrs() { 
        let arrValue = document.getElementById("arrs").value;
        let stringArr = arrValue.split(',');
        let arrs = [];
        stringArr.forEach(element => { 
          arrs.push(+element);
        });
        return arrs;
      }
      //12, 8, 15, 16, 1, 24
    
    
      function ac() { 
        let ac = getarrs();
        console.log(quick(ac));
      }
    
      function quick(arrs) { 
        if (arrs.length <= 1) { 
          // console.log(arrs);
          return arrs
        }
        //1.找到数组的中间项，在原有的数组中把它移除
        let middleIndex = Math.floor(arrs.length / 2);
        let middleValue = arrs.splice(middleIndex, 1)[0];
    
        //2. 准备左右两个数组，循环剩下数组中的每一项，比当前项小的放到左边数组，反之放到右边数组中
        let arrLeft = [],
          arrRight = [];
        for (let i = 0; i < arrs.length; i++) { 
          let item = arrs[i];
          item < middleValue ? arrLeft.push(item) : arrRight.push(item);
        }
        //3.递归方式让左右两边的数组持续这样处理，一直到左右两边都排好序为止（最后让左边+中间+右边拼接成为最后的结果）
        return quick(arrLeft).concat(middleValue, quick(arrRight));
    
      }
    
    </script>
    
    </html>

希望本文对你有帮助，有什么问题可以留言哦，感谢你的阅读。