`
highfly-s
  • 浏览: 100870 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 数组排序

阅读更多

<!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">
    /*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;
        });
    },

 

/*

冒泡排序(Bubble sorting)

算法思想: 相邻2个数比较大小,小者往前移动,一趟比较完后,最小的数冒到最前面,较 

                  大的数(重者)慢慢沉下去,排列到数组的后面.如果有n个数,经过n-1趟比  

                   较,数组中的数便已经排序(升序)的数。

 

*/
    // 冒泡排序
    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;
    },
    /*

算法思想:

         第1个元素的值与后面的所有元素的值比较大小,如果其中一个值比第1个值   

          小,进行交换。领奖类推,再将第2个元素与后面的所有元素比较交换,直到

           n-1个元素为止。

*/
    // 插入排序
    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>

分享到:
评论

相关推荐

    JavaScript 数组排序 比较器 示例代码

    JavaScript 是一种广泛使用的脚本语言,主要用于网页和Web应用程序的客户端开发。 JavaScript(简称JS)是一种轻量级、解释型、动态类型的脚本语言,主要用于网页前端开发,但也被广泛用于服务器端和移动应用开发。...

    JavaScript数组排序的六种常见算法总结

    在JavaScript中,数组排序是常见的操作,涉及到多种不同的算法,每种算法有着不同的效率和适用场景。本文将总结六种常见的排序算法,并提供相应的代码示例。 首先,我们来看看希尔排序(Shell Sort),这是一种改进...

    javascript 数组排序函数

    JavaScript数组排序函数是JavaScript编程语言中用于对数组元素进行排序的标准方法。数组的sort方法可以对数组中的元素进行排序,其默认排序行为是按照字符串的Unicode码点顺序进行排序,也就是说,它会将数组元素...

    javascript数组排序汇总

    JavaScript数组排序汇总主要涉及到四种经典的排序算法:冒泡排序、快速排序、插入排序和希尔排序。这些算法在处理数组时有着不同的效率和应用场景。 1. **冒泡排序**(Bubble Sort): 冒泡排序是一种简单的排序...

    17 - 数组排序.rar

    在这个“17 - 数组排序.rar”压缩包文件中,很可能是包含了关于JavaScript数组排序方法的详细讲解和示例代码。 JavaScript提供了内置的`Array.prototype.sort()`方法来对数组进行排序。这个方法接受一个可选的比较...

    关于JavaScript的数组排序

    在学习JavaScript中,做的笔记,关于数组排序的,具体是按字母升序排序,按数字升序或降序排序。如有需要,请自行下载。

    Javascript数组及其操作

    Javascript 数组及其操作 Javascript 数组是一种基本的数据结构,用于存储和操作多个值。数组是一种复杂的数据类型,可以存储不同的数据类型,如数字、字符串、对象等。 创建数组 在 Javascript 中,可以使用三种...

    JavaScript对象数组排序函数及六个用法

    为了应对不同场景下的排序需求,本文将介绍一个自定义的JavaScript函数,该函数支持对数组或对象进行排序,并且能够根据数组或对象中嵌套的任意深度的子键进行排序。以下是对该函数及其使用方法的详细解析。 函数...

    javascript 数组排序与对象排序的实例

    在JavaScript中,数组排序是通过`Array.prototype.sort()`方法实现的。默认情况下,`sort()`函数会按照字典顺序对数组中的元素进行排序,这在处理数字时可能不会得到预期的结果。例如,数组`[2, 98, 34, 45, 78, 7, ...

    Javascript 数组排序详解

    JavaScript中的数组排序功能主要通过`Array.prototype.sort()`方法实现,这个方法可以对数组中的元素进行排序,无论是简单数据类型还是复杂的数据结构如多维数组或包含对象的数组。`sort()`方法的核心在于可选的`...

    JavaScript数组排序小程序实现解析

    JavaScript 提供了内置的 `sort()` 函数来对数组进行排序,但在某些情况下,这个函数可能无法满足我们的需求,比如当数组元素为数字且需要按照数值大小而非字典顺序排序时。 `sort()` 函数默认将数组元素视为字符串...

    JavaScript数组排序功能简单实现

    JavaScript提供了内置的`sort()`函数,它默认按照字典顺序(即字符串比较规则)对数组元素进行排序,这在处理数字数组时可能会导致错误的结果。为了正确地对数字数组进行排序,我们需要自定义排序算法,如在提供的...

    javascript 数组排序函数sort和reverse使用介绍

    总结来说,`sort`和`reverse`是JavaScript数组对象的两个非常实用的方法。`reverse`方法通过调换数组元素的顺序来反转数组,而`sort`方法则通过比较函数来实现数组的排序。在实际开发中,合理地使用这两个方法可以极...

    排序函数(数字或字符串数组排序)

    为普通数组和对象数组排序,对象数组排序时,可指定排序所依据的对象属性,汉字将以汉语拼音为序。

    JavaScript数组排序reverse()和sort()方法详解

    在JavaScript中,数组排序是常见的操作,它允许开发者以特定的顺序重新排列数组中的元素。数组排序有两个主要的方法:reverse()和sort()。...正确使用这两个方法,可以在处理JavaScript数组时提供极大的便利。

Global site tag (gtag.js) - Google Analytics