`
rockyuse
  • 浏览: 196647 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js sort

 
阅读更多

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jun Code Test</title>
<link href="css/reset.css" rel="stylesheet" />
<style type="text/css">
/* yahoo reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}


/* 必须 */
body{font:13px/1.231 arial,helvetica,clean,sans-serif; text-align:center;}
#doc{margin:0 auto; text-align:left;}

#doc{width:100%;}/* 网页宽度*/

.y-main{width:100%;}

.y-b{width:180px;} /* 侧栏宽度 */


.y-u{width:49.3%;float:right;}
.first{float:left;}

.y-t1 .y-b{float:right;}
.y-t1 .y-main{float:left;margin-right:-190px;}
.y-t1 .y-main .y-g{margin-right:190px;}

.y-t2 .y-b{float:left;}
.y-t2 .y-main{float:right;margin-left:-190px;}
.y-t2 .y-main .y-g{margin-left:190px;}

.y-t3 .y-b{float:left; display:none;}
.y-t3 .y-main{float:right;margin-left:-190px;}
.y-t3 .y-main .y-g{margin-left:0;}


#bd,#hd,.clear{*zoom:1;}
#bd:after,.clear:after{content:"\20";display:block;height:0;clear:both;visibility:hidden;}

/*以上必须*/


/**/
.y-b{ display:none;}
#hd,#fd{ height:50px; background:#f8f8f8;}
#hd{border-bottom:1px solid #ccc; overflow:hidden;}
#fd{border-top:1px solid #ccc;}
.h1{font-size:24px; margin:10px 0 0 30px;}
.main{padding:20px;}


.main h2{ font-size:18px; font-weight:700; margin:5px 0;}
/*member*/
.b{ font-weight:700;}
.bd_1{border:1px solid #ABB8CE;}
.f14{ font-size:14px;}
.tc{ text-align:center;}
.tl{ text-align:left;}

.table_list{}
.w30{ width:30px;}
.w50{ width:50px;}
.w100{ width:100px;}
.table_list .menu,.menu .page_number{padding:6px 8px 4px 8px; }
.table_list .menu{background:#E3E5E6;position:relative;}
.menu .page_number{ display:inline-block; position:absolute; right:0; top:5px;+margin-right:20px;}
.menu .m_r10{_margin-left:-4px;}


.table{cellpadding:0;cellspacing:0; width:100%;line-height:2.5em; font-size:12px; text-align:left;}
.table thead{ border-bottom:1px solid #FFF;}
.table thead,.table tr:hover,.js_hover{background:#D0DBEE;}
.table thead th{font-weight:700;}
.table .even{background:#EEF4F7;}
</style>
</head>
<body>
    <div id="doc" class="y-t3">
        <div id="hd">
                   <h1 class="h1">Jun Code</h1>
        </div>
        <div id="bd">
            <div class="y-main">
                <div class="y-g main">
                   
                    <div>
                        <h2>算法正确性测试</h2>
                        <div>给出一个正确的测试数组</div>
                        <textarea style="width:600px;" id="testArray">[4,2,5,6,8,9,7,0,1,3]</textarea>
                        <div id="testResults">
                           
                        </div>
                       
                        <div>
                        <button type="button" onclick="jelle.correctness('quickSort')" >快速排序</button>
                        <button type="button" onclick="jelle.correctness('insertSort')" >插入排序</button>
                        <button type="button" onclick="jelle.correctness('shellSort')" >希尔排序</button>
                        <button type="button" onclick="jelle.correctness('systemSort')" >系统方法</button>
                        <button type="button" onclick="jelle.correctness('bubbleSort')" >冒泡排序</button>
                        <button type="button" onclick="jelle.$('testResults').innerHTML = ''" >清空</button>
                         </div>
                    </div>
                   
                    <br/><br/>
                    <div>
                    <h2>速度测试</h2>
                    <div>
                    测试数组长度：<input type="text" value="1000" id="arrayLength" /><br/>
                    测试次数：10次<br/><span style="color:#f30;">数组太长请慎用 冒泡排序 </span>
</div>
<table cellpadding="0" cellspacing="0" class="table bd_1">
                       
                        <colgroup>

                        <col style="width:100px;">
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        </colgroup>
                       
                        <thead class="b f14">
                          <tr>
                              <th class="tc">算法</th>
                              <th>数组长度</th>
                              <th class="tl">分别用时(毫秒)</th>                                       
                              <th>平均(毫秒)</th>                                       
                              <th>点击测试</th>                               
                          </tr>
                         </thead>
                      <tbody id="memberListIn">  
                     
                     
                      <tr id="970000000000001">
                            <td  class="tc">快速排序</td>
                            <td><span id="length_1"></span></td>
                            <td><span id="times_1"></span></td>
                            <td><span id="time_1"></span></td>
                            <td><button type="button" onclick="jelle.test('quickSort', 1)">测试</button></td>

                        </tr>
                       
                        <tr id="970000000000001">
                            <td  class="tc">插入排序</td>
                            <td><span id="length_2"></span></td>
                            <td><span id="times_2"></span></td>
                            <td><span id="time_2"></span></td>
                            <td><button type="button" onclick="jelle.test('insertSort', 2)" >测试</button></td>
                        </tr>
                       
                       
                        <tr id="970000000000001">
                            <td  class="tc">希尔排序</td>
                            <td><span id="length_3"></span></td>
                            <td><span id="times_3"></span></td>
                            <td><span id="time_3"></span></td>
                            <td><button type="button" onclick="jelle.test('shellSort', 3)" >测试</button></td>
                        </tr>
                       
                       
                        <tr id="970000000000001">
                            <td  class="tc">系统方法</td>
                            <td><span id="length_4"></span></td>
                            <td><span id="times_4"></span></td>
                            <td><span id="time_4"></span></td>
                            <td><button type="button" onclick="jelle.test('systemSort', 4)" >测试</button>
                            </td>
                        </tr>
                       
                        <tr id="970000000000001">
                            <td  class="tc">冒泡排序</td>
                            <td><span id="length_5"></span></td>
                            <td><span id="times_5"></span></td>
                            <td><span id="time_5"></span></td>
                            <td><button type="button" onclick="jelle.test('bubbleSort', 5)" title="数组太长可能就卡死">小心测试</button></td>
                        </tr>
                       
                      </tbody>
                    </table>
</div>
                   
                </div>
            </div>
            <div class="y-b">
               
            </div>
        </div>
    </div>
   
   
    <div id="fd">CopyRight Jun.Lu Blogs 2011</div>
   
   
<script type="text/javascript">
Jun = {};
Jun.array = {
    df:function(len){
        var array = [], i;
        len = len || 1000;
        for(i = 0; i< len; i++){
            array.push(i);
        }
        return array.sort(function(){ return Math.random() > 0.5});
    },
    // Jun.array.test();
    test:function(method, arrayLength, callBack){
       
        var times = [];
        var i = 0;
        var sum = 0;
        var len = 10;
       
        for(;i<len;i++){
            test();
        }
       
        for(i=0;i<times.length;i++){
            sum+=times[i];
        }
       
       

        function test(){
            var array = Jun.array.df(arrayLength);
            var st = new Date().getTime();
            Jun.array[method](array); //shellSort  quickSort  systemSort
            var d = new Date().getTime() - st;
            callBack && callBack(new Date().getTime() - st);
            times.push(d);
        }
       
        return sum / len;
    },
   
    // ---------- 一些排序算法
    // js 利用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 stepi = i; // 记录开始位置
            var stepj = 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(stepi == i){
                Sort(++i, stepj);
                return ;
            }
           
            // 最后一个空位留给 key
            array[i] = key;
           
            // 递归
            Sort(stepi, i);
            Sort(j, stepj);
        }
       
        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, step, key,
            len = array.length;
       
        for(; i < len; i++){
           
            step = 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;
    },
   
    // 希尔排序
    //Jun.array.shellSort(Jun.array.df(10000));
    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 stepArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1]; // reverse() 在维基上看到这个最优的步长 较小数组
        //var stepArr = [1031612713, 217378076, 45806244, 9651787, 2034035, 428481, 90358, 19001, 4025, 836, 182, 34, 9, 1]//针对大数组的步长选择
        var i = 0;
        var stepArrLength = stepArr.length;
        var len = array.length;
        var len2 =  parseInt(len/2);
       
        for(;i < stepArrLength; i++){
            if(stepArr[i] > len2){
                continue;
            }
           
            stepSort(stepArr[i]);
        }

        // 排序一个步长
        function stepSort(step){
           
            //console.log(step) 使用的步长统计
           
            var i = 0, j = 0, f, tem, key;
            var stepLen = len%step > 0 ?  parseInt(len/step) + 1 : len/step;
           
           
            for(;i < step; i++){// 依次循环列

                for(j=1;/*j < stepLen && */step * j + i < len; j++){//依次循环每列的每行
                    tem = f = step * j + i;
                    key = array[f];

                    while((tem-=step) >= 0){// 依次向上查找
                        if(array[tem] > key){
                            array[tem+step] = array[tem];
                        }else{
                            break;
                        }
                    }
                   
                    array[tem + step ] = key;
                   
                }
            }
           
        }
       
        return array;
       
    }
 };
</script>

<script type="text/javascript">
var jelle = {
    index:1,
    $:function(id){
        return document.getElementById(id);
    },
    test:function(method, num){
        var arrayLength = parseInt(jelle.$('arrayLength').value);
        jelle.index = num;
        jelle.$('length_'+num).innerHTML = arrayLength;
        jelle.$('times_'+num).innerHTML = '';
        jelle.$('time_'+num).innerHTML = Jun.array.test(method, arrayLength, jelle.insert);;
    },
    insert:function(num){
        jelle.$('times_'+jelle.index).innerHTML += num+', ';
    },
    correctness:function(method){
        var array = new Function('return '+ jelle.$('testArray').value)();
        jelle.$('testResults').innerHTML += '<div>['+method+']: '+Jun.array[method](array)+'</div>';
    }
}
</script>

</body>
</html>

分享到：
| 认识AJAX
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript Sort.rar_冒泡

    在这个“JavaScript Sort.rar_冒泡”压缩包中，包含的是关于JavaScript排序算法的实现，主要聚焦在冒泡排序。让我们深入探讨一下冒泡排序及其相关的快速排序和选择排序。 首先，我们来详细了解一下冒泡排序（Bubble...

    jssort:JavaScript排序方法，将按给定数组中对象的多个字段进行排序

    jsSort v0.0.5 jsSort是一种通用的排序方法，可以通过多个属性对对象数组进行排序。概述jsSort的公共API归结为一个名为sortByMultiple的方法。 此方法采用两个参数，每个参数都是数组。 sequence ：要排序的数组。 ...

    JavaScript Sort 表格排序

    在JavaScript中，`Array.prototype.sort()`方法是一个非常实用的功能，它允许我们对数组进行排序。然而，在处理表格数据时，我们需要特别注意这个方法的工作原理，因为它默认的排序方式可能会导致意外的结果。下面...

    JS sort方法基于数组对象属性值排序

    JavaScript的`sort`方法是数组的一个内置方法，用于对数组元素进行排序。在处理数组对象时，如果数组的元素是对象，我们可能需要根据对象的某个属性值来排序。本篇将详细介绍如何利用`sort`方法实现基于数组对象属性...

    js代码-sort源码实现原理

    在`main.js`文件中，可能会包含一个模拟`sort()`方法实现的示例代码，你可以打开文件查看具体实现。而`README.txt`文件通常用来记录项目简介或使用说明，可能包含了关于`sort()`方法的额外信息。 总的来说，理解和...

    关于javascript sort()排序你可能忽略的一点理解

    在Javascript数组排序中有一个sort()方法，sort（）方法可以说分为两种，一种是文字数组排序，一种是数字数组排序。下面这篇文章主要和大家分享了关于最近学习javascript sort()排序发现了一点理解，下面话不多说了...

    JavaScript sort

    学习JavaScript不是问题，让网页东西来，让生活也跟着动起来1

    javascript sort()对数组中的元素进行排序详解

    JavaScript中的`sort()`方法是数组的一个内置方法，用于对数组中的元素进行排序。该方法具有极大的灵活性，不仅可以实现基本的升序或降序排序，还能根据自定义规则进行复杂排序。 1. `sort()`方法的基本用法： `...

    Js sort排序使用方法

    在JavaScript中，数组对象提供了一个非常有用的内置方法sort()，用于对数组中的元素进行排序。该方法接受一个函数作为参数，这个函数对于实现自定义排序规则至关重要。下面详细展开sort方法的使用方法以及相关的知识...

    JavaScript Sort 的一个错误用法示例

    JavaScript是一种广泛使用的前端脚本语言，其中Array对象提供了sort方法，该方法可以对数组中的元素进行排序。然而，在使用sort方法时，如果不正确地应用，很容易出现错误用法，导致排序结果不是预期的。本文通过一...

    zuoxiaobai#zuo11.com#JS sort对数组进行默认排序时如果有数字为什么会不准确？1

    我们来看看MDN官方解释 arr.sort([compareFunction])compareFunction(Optional)，Specifies a fu

    js sort 二维数组排序的用法小结

    我们知道在js中默认提供了sort函数，但是这个函数默认是按照数组内容的ascii码升序进行排列的，如果我们要对二维数组排序要如何做呢？在php中是有multi_sort函数可供调用的，但是在js中似乎没有这种函数，但是没关系...

    JS sort排序详细使用方法示例解析

    JavaScript中的sort()方法是数组对象的内置函数，用于对数组内的元素进行排序。默认情况下，sort()方法按照字符串的Unicode码点值进行排序，适用于字符串数组。对于数字数组或需要自定义排序逻辑的数组，sort()方法...

    nodejs排序小工具sort

    排序文本文件内容 去重 拖到cmd即可 D:\_NodeJS\sort&gt;dir /b a.txt a.txt_sort.txt ip.txt PULL.CMD sort_hosts.cmd sort_hosts.js sort_text.cmd sort_text.js

    javascript-natural-sort, 在Javascript中，排序 thing.zip

    javascript-natural-sort, 在Javascript中，排序 thing 演示运行QUnit测试套件简单数字&gt;&gt;&gt; ['10',9,2,'1','4'].sort(naturalSort)['1',2,'4',9,'10']浮点数&gt;&gt;&

    JavaScript中用sort()方法对数组元素进行排序的操作

    JavaScript数组sort()方法排序数组的元素。 语法 array.sort( compareFunction ); 下面是参数的详细信息： compareFunction : 指定一个函数，定义排序次序。如果省略，数组字典顺序排序。 返回值: 返回一个排序的...

    简单了解JavaScript sort方法

    JavaScript的`sort()`方法是数组的一个内置方法，用于对数组的元素进行排序。默认情况下，`sort()`会将数组元素转换为字符串，并按照字典顺序进行升序排列。然而，这种方法并不适用于所有情况，特别是在处理数值排序...

    模拟javascript中的sort排序(简单实例)

    JavaScript中的`Array.prototype.sort()`方法是用于对数组的元素进行排序的一个强大工具。它可以直接对数组进行原地排序，也就是说，排序操作不会创建新的数组，而是直接修改原数组。但需要注意的是，`sort()`方法...

Magicbox
Global site tag (gtag.js) - Google Analytics