基于JavaScript实现的八种排序算法的可视化实现

八大排序算法 可视化过程

1、效果图

排序过程中，对应比较交换的颜色矩形发生变化

排序前的一段简单介绍

2、八大排序算法核心代码

参考文章：https://blog.csdn.net/qq_23994787/article/details/77965750?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162561910016780264088695%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=162561910016780264088695&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-2-77965750.first_rank_v2_pc_rank_v29&utm_term=java%E6%8E%92%E5%BA%8F&spm=1018.2226.3001.4187

2.1、冒泡排序

• 实现步骤

  alert("冒泡排序\n"+
        "1将序列中所有元素两两比较，将最大的放在最后面。\n" +
        "2将剩余序列中所有元素两两比较，将最大的放在最后面。\n" +
        "3重复第二步，直到只剩下一个数。");//排序前的一段介绍
  

• 代码实现

  for(let i=1;i<out.length;i++){
      for(let j=0;j<out.length-i;j++){
          if(typeof showSort === "function"){//function对应的是主方法
              showSort(out,j,j+1);
          }
          if(order*out[j] > order*out[j+1]){//冒泡排序的算法
              let tem = out[j];
              out[j] = out[j+1];
              out[j+1] = tem;
          }
      }
  }
  

2.2、直接插入排序

• 实现步骤

  alert("直接插入排序\n" +
      "1将第一个数和第二个数排序，然后构成一个有序序列\n" +
      "2将第三个数插入进去，构成一个新的有序序列。\n" +
      "3对第四个数、第五个数……直到最后一个数，重复第二步。");
  

• 代码实现

  for(let i=1;i<out.length;i++){
      let temp = out[i];
      for(var j=i-1;j>=0;j--){
          if(order*out[j]>order*temp){
              out[j+1] = out[j];
              out[j] = temp;
              if(typeof showSort === "function"){
                  showSort(out,j,null);
              }
          }else{
              break;//找到比temp小的则跳出循环
          }
      }
      out[j+1] = temp;//在比temp小的值后面插入temp值
      if(typeof showSort === "function"){
          showSort(out,j+1,j+1);
      }
  }
  

2.3、希尔排序

• 实现步骤

  alert("希尔排序\n"+
  "1将数的个数设为n，取奇数k=n/2，将下标差值为k的书分为一组，构成有序序列。\n" +
  "2再取k=k/2 ，将下标差值为k的书分为一组，构成有序序列。\n" +
  "3重复第二步，直到k=1执行简单插入排序。");
  

• 代码实现

  var half = parseInt(out.length/2);
  for(let d=half;d>=1;d=parseInt(d/2) ){
      for(let i=d;i<out.length;i++){
          for(let j=i-d;j>=0;j-=d){
              if(typeof showSort === "function"){
                  showSort(out,j,j+d);
              }
              if(order*out[j+d] < order*out[j]){
                  let tem = out[j+d];
                  out[j+d] = out[j];
                  out[j] = tem;
              }
              if(typeof showSort === "function"){
                  showSort(out,null,null);
              }
          }
      }
  }
  

2.4、快速排序

• 实现步骤

  alert("快速排序\n"+
      "1选择第一个数为p，小于p的数放在左边，大于p的数放在右边。\n" +
      "2递归的将p左边和右边的数都按照第一步进行，直到不能递归。")
  

• 实现代码

  if(first<end){
      let i=first, j=end, temp=0;
      //一个循环完成一趟扫描
      while(i<j){
          while(i<j&& order*out[i]< order*out[j]){
              if(typeof showSort === "function"){
                  showSort(out,i,j);
              }
              j--;
          }
          if(i<j){
              if(typeof showSort === "function"){
                  showSort(out,i,j);
              }
              temp = out[i];
              out[i] = out[j];
              out[j] = temp;
              if(typeof showSort === "function"){
                  showSort(out,null,null);
              }
              i++;
          }
          while(i<j&& order*out[i]<order*out[j]){
              if(typeof showSort === "function"){
                  showSort(out,j,i);
              }
              i++;
          }
          if(i<j){
              if(typeof showSort === "function"){
                  showSort(out,j,i);
              }
              temp = out[i];
              out[i] = out[j];
              out[j] = temp;
              if(typeof showSort === "function"){
                  showSort(out,null,null);
              }
              j--;
          }
      }
      if(typeof showSort === "function"){
          showSort(out,i,i);
      }
      quick(out,first,i-1);
      quick(out,i+1,end);
  }
  

2.5、选择排序

• 实现步骤

  alert("选择排序\n"+
      "1遍历整个序列，将最小的数放在最前面。\n" +
      "2遍历剩下的序列，将最小的数放在最前面。\n" +
      "3重复第二步，直到只剩下一个数。");
  

• 代码实现

  for(let i=0;i<arr.length;i++){
      out[i] = arr[i];
  }
  //order==false为升序，否则为降序
  var order = type!==true?1:-1;
  for(let i=0;i<out.length;i++){
      let index = i;
      for(let j=i;j<out.length;j++){
          if(typeof showSort === "function"){
              showSort(out,index,j);
          }
          if(order*out[j]<order*out[index]){
              index = j;
          }
      }
      let temp = out[i];
      out[i] = out[index];
      out[index] = temp;
      if(typeof showSort === "function"){
          showSort(out,null,null);
      }
  }
  

2.6、堆排序

• 实现步骤

  alert("堆排序\n"
     +"1将序列构建成大顶堆。\n" +
      "2将根节点与最后一个节点交换，然后断开最后一个节点。\n" +
      "3重复第一、二步，直到所有节点断开。")
  

• 代码实现

  //建立堆
  var sift = function(out, k, m){
      let i = k, j = 2*k+1;
      while(j <= m && j!=len){
          if(j<m && out[j+1] && order*out[j]<order*out[j+1]){
              j++;
          }
          if(order*out[i] > order*out[j]){
              break;
          }else{
              if(typeof showSort === "function"){
                  showSort(out,i,j);
              }
              let temp = out[i];
              out[i] = out[j];
              out[j] = temp;
              if(typeof showSort === "