<!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>
相关推荐
开发中，遇到数组排序的需求很频繁，这篇文章会介绍几个常见排序思路。 一、希尔排序（性能最好） 如果要从大到小排列，则 while(arr[n] > arr[n – interval] && n > 0) 。 // 希尔排序算法 function xier(arr){ ...
本文给大家汇总了一下javascript的数组排序算法，包括冒泡排序、快速排序、插入排序、希尔排序，希望对大家熟悉javascript数组排序能够有所帮助。
这篇文章主要介绍了JavaScript数组排序小程序实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 JavaScript数组的sort()函数是按字符串大小排序,不能正确...
主要介绍了javascript 数组排序与对象排序的实例的相关资料,需要的朋友可以参考下
在学习JavaScript中，做的笔记，关于数组排序的，具体是按字母升序排序，按数字升序或降序排序。如有需要，请自行下载。
主要介绍了JavaScript数组排序功能简单实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
javascript的数组排序函数 sort方法，默认是按照ASCII 字符顺序进行升序排列。
主要介绍了JavaScript数组排序reverse()和sort()方法详解,需要的朋友可以参考下
JavaScript实现多维数组、对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序。今天我们就来详细探讨下sort（）方法
为普通数组和对象数组排序，对象数组排序时，可指定排序所依据的对象属性，汉字将以汉语拼音为序。
首先我们先说一下reverse方法。 reverse 方法将一个 Array 对象中的元素位置进行反转。... 如果数组中只包含数字，那么数字将降序排列，如果数组中还包含其他类型，就将数组反转并返回数组。 sort 方法 返回