首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于js 各种排序方法和sort方法的区别(详解)

Posted in Javascript onJanuary 03, 2018

今天突发奇想，想明白sort方法是否比各种排序都有优势，所以就参考别人的代码，做了一个测试，结果令人惊讶啊，上代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <title>图片列表生成交互组件</title>
  <style>
    * {
      margin: 0;
      border: 0;
    }
    html, body {
      height: 100%;
    }
    #div {
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="div"></div>
<script src="myNeedExtend.js"></script>
<script>
  // ---------- 一些排序算法
  Sort = {
    // 利用sort进行排序
    systemSort:function(array){
      return array.sort(function(a, b){
        return a - b;
      });
    },
    // 冒泡排序
    bubbleSort:function(array){
      var i = 0, len = array.length,
        j, d;
      for(; i<len; i++){
        for(j=0; j<len; j++){
          if(array[i] < array[j]){
            d = array[j];
            array[j] = array[i];
            array[i] = d;
          }
        }
      }
      return array;
    },
    // 快速排序
    quickSort:function(array){
      //var array = [8,4,6,2,7,9,3,5,74,5];
      //var array =[0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];
      var i = 0;
      var j = array.length - 1;
      var Sort = function(i, j){
        // 结束条件
        if(i == j ){ return };
        var key = array[i];
        var tempi = i; // 记录开始位置
        var tempj = j; // 记录结束位置
        while(j > i){
          // j <<-------------- 向前查找
          if(array[j] >= key){
            j--;
          }else{
            array[i] = array[j]
            //i++ ------------>>向后查找
            while(j > ++i){
              if(array[i] > key){
                array[j] = array[i];
                break;
              }
            }
          }
        }
        // 如果第一个取出的 key 是最小的数
        if(tempi == i){
          Sort(++i, tempj);
          return ;
        }
        // 最后一个空位留给 key
        array[i] = key;
        // 递归
        Sort(tempi, i);
        Sort(j, tempj);
      }
      Sort(i, j);
      return array;
    },
    // 插入排序
    insertSort:function(array){
      // http://baike.baidu.com/image/d57e99942da24e5dd21b7080
      // http://baike.baidu.com/view/396887.htm
      // var array = [0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];
      var i = 1, j, temp, key, len = array.length;
      for(; i < len; i++){
        temp = j = i;
        key = array[j];
        while(--j > -1){
          if(array[j] > key){
            array[j+1] = array[j];
          }else{
            break;
          }
        }
        array[j+1] = key;
      }
      return array;
    },
    // 希尔排序
    shellSort:function(array){
      // http://zh.wikipedia.org/zh/%E5%B8%8C%E5%B0%94%E6%8E%92%E5%BA%8F
      // var array = [13,14,94,33,82,25,59,94,65,23,45,27,73,25,39,10];
      // var tempArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1];
      // reverse() 在维基上看到这个最优的步长 较小数组
      var tempArr = [1031612713, 217378076, 45806244, 9651787, 2034035, 428481, 90358, 19001, 4025, 836, 182, 34, 9, 1];
      //针对大数组的步长选择
      var i = 0;
      var tempArrLength = tempArr.length;
      var len = array.length;
      var len2 = parseInt(len/2);
      for(;i < tempArrLength; i++){
        if(tempArr[i] > len2){
          continue;
        }
        tempSort(tempArr[i]);
      }
      // 排序一个步长
      function tempSort(temp){
        //console.log(temp) 使用的步长统计
        var i = 0, j = 0, f, tem, key;
        var tempLen = len%temp > 0 ? parseInt(len/temp) + 1 : len/temp;
        for(;i < temp; i++){// 依次循环列
          for(j=1;/*j < tempLen && */temp * j + i < len; j++){
            //依次循环每列的每行
            tem = f = temp * j + i;
            key = array[f];
            while((tem-=temp) >= 0){
              // 依次向上查找
              if(array[tem] > key){
                array[tem+temp] = array[tem];
              }else{
                break;
              }
            }
            array[tem + temp ] = key;
          }
        }
      }
      return array;
    }
  };
  testArrs = [];
  for (var i = 10000000; i > 0; i--) {
    testArrs.push(i);
  }
  function test(fun,arr) {
    console.log(arr);
    var oldTime = +new Date();
    var new_arr = Sort[fun](arr);
    var newTime = +new Date();
    console.log(new_arr);
    console.log(newTime-oldTime);
  }
  /*
  * sort排序 systemSort
  * 冒泡排序 bubbleSort
  * 快速排序 quickSort
  * 插入排序 insertSort
  * 希尔排序 shellSort
  *
  * */
  test("systemSort",testArrs);
</script>
</body>
</html>

上面的方法通过测试时间，然后分析哪个排序方法省时，时间就是生命，用对正确的方法，就能省下好多时间，尤其是大数据运行的时候。

首先看运行处理10000个长度数组时的所用的时间：

* sort排序 systemSort 11
* 冒泡排序 bubbleSort 169
* 快速排序 quickSort 144
* 插入排序 insertSort 139
* 希尔排序 shellSort 3

测试十万长的数组数据：

* sort排序 systemSort 63
* 冒泡排序 bubbleSort 16268
* 快速排序 quickSort 直接报错
* 插入排序 insertSort 13026
* 希尔排序 shellSort 8

测试一百万的长度的数组：

* sort排序 systemSort 575
* 冒泡排序 bubbleSort 时间未知
* 快速排序 quickSort 直接报错
* 插入排序 insertSort 直接崩溃
* 希尔排序 shellSort 93

测试一千万长的数组：

* sort排序 systemSort 7039
* 冒泡排序 bubbleSort 没测
* 快速排序 quickSort 没测
* 插入排序 insertSort 没测
* 希尔排序 shellSort 1225

测试一亿长的数组：

* sort排序 systemSort 直接崩溃
* 冒泡排序 bubbleSort 没测
* 快速排序 quickSort 没测
* 插入排序 insertSort 没测
* 希尔排序 shellSort 19864

最后通过测试，在最坏的情况下，发现希尔排序还是最好，竟然比系统的sort排序都快，确实令人惊讶，大家这样就能看出来在什么情况需要使用什么方法进行排序了吧

然后我们进行随机情况进行测试：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <title>图片列表生成交互组件</title>
  <style>
    * {
      margin: 0;
      border: 0;
    }
    html, body {
      height: 100%;
    }
    #div {
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="div"></div>
<script src="myNeedExtend.js"></script>
<script>
  // ---------- 一些排序算法
  Sort = {
    // 利用sort进行排序
    systemSort:function(array){
      return array.sort(function(a, b){
        return a - b;
      });
    },
    // 冒泡排序
    bubbleSort:function(array){
      var i = 0, len = array.length,
        j, d;
      for(; i<len; i++){
        for(j=0; j<len; j++){
          if(array[i] < array[j]){
            d = array[j];
            array[j] = array[i];
            array[i] = d;
          }
        }
      }
      return array;
    },
    // 快速排序
    quickSort:function(array){
      //var array = [8,4,6,2,7,9,3,5,74,5];
      //var array =[0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];
      var i = 0;
      var j = array.length - 1;
      var Sort = function(i, j){
        // 结束条件
        if(i == j ){ return };
        var key = array[i];
        var tempi = i; // 记录开始位置
        var tempj = j; // 记录结束位置
        while(j > i){
          // j <<-------------- 向前查找
          if(array[j] >= key){
            j--;
          }else{
            array[i] = array[j]
            //i++ ------------>>向后查找
            while(j > ++i){
              if(array[i] > key){
                array[j] = array[i];
                break;
              }
            }
          }
        }
        // 如果第一个取出的 key 是最小的数
        if(tempi == i){
          Sort(++i, tempj);
          return ;
        }
        // 最后一个空位留给 key
        array[i] = key;
        // 递归
        Sort(tempi, i);
        Sort(j, tempj);
      }
      Sort(i, j);
      return array;
    },
    // 插入排序
    insertSort:function(array){
      // http://baike.baidu.com/image/d57e99942da24e5dd21b7080
      // http://baike.baidu.com/view/396887.htm
      // var array = [0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];
      var i = 1, j, temp, key, len = array.length;
      for(; i < len; i++){
        temp = j = i;
        key = array[j];
        while(--j > -1){
          if(array[j] > key){
            array[j+1] = array[j];
          }else{
            break;
          }
        }
        array[j+1] = key;
      }
      return array;
    },
    // 希尔排序
    shellSort:function(array){
      // http://zh.wikipedia.org/zh/%E5%B8%8C%E5%B0%94%E6%8E%92%E5%BA%8F
      // var array = [13,14,94,33,82,25,59,94,65,23,45,27,73,25,39,10];
      // var tempArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1];
      // reverse() 在维基上看到这个最优的步长 较小数组
      var tempArr = [1031612713, 217378076, 45806244, 9651787, 2034035, 428481, 90358, 19001, 4025, 836, 182, 34, 9, 1];
      //针对大数组的步长选择
      var i = 0;
      var tempArrLength = tempArr.length;
      var len = array.length;
      var len2 = parseInt(len/2);
      for(;i < tempArrLength; i++){
        if(tempArr[i] > len2){
          continue;
        }
        tempSort(tempArr[i]);
      }
      // 排序一个步长
      function tempSort(temp){
        //console.log(temp) 使用的步长统计
        var i = 0, j = 0, f, tem, key;
        var tempLen = len%temp > 0 ? parseInt(len/temp) + 1 : len/temp;
        for(;i < temp; i++){// 依次循环列
          for(j=1;/*j < tempLen && */temp * j + i < len; j++){
            //依次循环每列的每行
            tem = f = temp * j + i;
            key = array[f];
            while((tem-=temp) >= 0){
              // 依次向上查找
              if(array[tem] > key){
                array[tem+temp] = array[tem];
              }else{
                break;
              }
            }
            array[tem + temp ] = key;
          }
        }
      }
      return array;
    }
  };
  testArrs = [];
  for (var i = 0; i < 10000000; i++) {
    testArrs.push(Math.random());
  }
  function test(fun,arr) {
    var oldTime = +new Date();
    var new_arr = Sort[fun](arr);
    var newTime = +new Date();
    console.log(fun);
    console.log(newTime-oldTime);
  }
  /*
  * sort排序 systemSort
  * 冒泡排序 bubbleSort
  * 快速排序 quickSort
  * 插入排序 insertSort
  * 希尔排序 shellSort
  *
  * */
  test("systemSort",testArrs);
  //test("bubbleSort",testArrs);
  //test("quickSort",testArrs);
  test("insertSort",testArrs);
  test("shellSort",testArrs);
</script>
</body>
</html>

测试一千万长的数组：

* sort排序 systemSort 8842
* 冒泡排序 bubbleSort 没测
* 快速排序 quickSort 没测
* 插入排序 insertSort 45
* 希尔排序 shellSort 1133

在未知的情况和比较好的情况下，插入排序的效率最高

以上这篇基于js 各种排序方法和sort方法的区别(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

基于js 各种排序方法和sort方法的区别(详解)

- Author -

专注前端30年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
JS代码实现页面切换效果
Jan 10 Javascript
vue项目中用cdn优化的方法
Jan 03 #Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 #Javascript
利用原生js实现html5小游戏之打砖块（附源码）
Jan 03 #Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 #Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 #Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 #Javascript
Node使用Sequlize连接Mysql报错：Access denied for user ‘xxx’@‘localhost’
Jan 03 #Javascript
竞聘书(31) 聘任书(31) 公证书(45) 任命书(51) 委托书(259) 担保书(46) 意向书(73) 检举信(8) 说明书(38) 协议书(568)
You might like
Php部分常见问题总结
2006/10/09 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
ASOS英国官网：英国在线时装和化妆品零售商
2017/05/19 全球购物
大学生物业管理求职信
2013/10/24 职场文书
营销与策划专业毕业生求职信
2013/11/01 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
学生党支部先进事迹
2014/02/04 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
2015年教师节活动总结
2015/03/20 职场文书
利用python进行数据加载
2021/06/20 Python
字节飞书面试promise.all实现示例
2022/06/16 Javascript