首页
所有分类
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的倒计时插件代码
May 07 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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
MVCC(4) DBLink(1) IIS7(1) 事务并发(1) 复读(1) GZIP(2) 磁盘分区(1) .NET Framework(2) FTP服务器(1) 幻读(5)
You might like
php中的观察者模式
2010/03/24 PHP
PHP图片上传代码
2013/11/04 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
URL中“#” “？” &amp;“”号的作用浅析
2017/02/04 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
原生js更改css样式的两种方式
2017/03/15 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
pandas去除重复列的实现方法
2019/01/29 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
python实现经典排序算法的示例代码
2021/02/07 Python
怎么处理XML的中文问题
2015/03/26 面试题
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
如何客观的进行自我评价
2013/12/17 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
python基础之错误和异常处理
2021/10/24 Python