js实现冒泡、插入、快速排序-蒲公英云

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>