常见排序算法（JS版）包括：
内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序（递归 & 堆栈）,归并排序,堆排序,以及分析每种排序算法的执行时间。
index.html
<!DOCTYPE html>
<html>
<head>
<title>twobin 常见排序算法 （JS版） </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="排序,算法,JavaScript排序" />
<meta name="description" content="常见排序算法:冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归),快速排序(堆栈),归并排序,堆排序" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="doc" class="y-t3">
<div id="hd">
<h1 class="h1">twobin 常见排序算法（JS版）</h1>
</div>
<div id="bd">
<div class="y-main">
<div class="y-g main">
<div>
<h2>随机生成乱序数组</h2>
<textarea id="txtInput" style="width:100%;height:100px;" readonly></textarea>
<h2>排序数组</h2>
<textarea id="txtOutput" style="width:100%;height:100px;" readonly></textarea>
<br /><br />
<div>
<button id="btnSort">JS内置排序</button>
<button id="btnBubble">冒泡排序</button>
<button id="btnSelection" >选择排序</button>
<button id="btnInsertion" >插入排序</button>
<button id="btnShell" >希尔排序</button>
<button id="btnQuick" >递归快速排序</button>
<button id="btnStackQuick" >堆栈快速排序</button>
<button id="btnMerge" >归并排序</button>
<button id="btnHeap" >堆排序</button>
<button id="btnGenerate">生成随机数</button>
随机数个数：<input id="txtCount" value="10000" style="width:50px" />
最大随机数：<input id="txtMax" value="10000" style="width:50px" />
</div>
</div>
<div>
<h2>排序算法性能</h2>
<table cellpadding="0" cellspacing="0" class="table bd_1">
<colgroup>
<col >
<col >
<col >
</colgroup>
<thead class="b f14">
<tr>
<th class="tc">排序算法</th>
<th class="tc">数组长度（个）</th>
<th class="tc">平均耗时（毫秒）</th>
</tr>
</thead>
<tbody id="memberListIn">
<tr id="970000000000001">
<td class="tc">JS内置排序</td>
<td><span id="length_1"></span></td>
<td><span id="time_1"></span></td>
</tr>
<tr id="970000000000001">
<td class="tc">冒泡排序</td>
<td><span id="length_2"></span></td>
<td><span id="time_2"></span></td>
</tr>
<tr id="970000000000001">
<td class="tc">选择排序</td>
<td><span id="length_3"></span></td>
<td><span id="time_3"></span></td>
</tr>
<tr id="970000000000001">
<td class="tc">插入排序</td>
<td><span id="length_4"></span></td>
<td><span id="time_4"></span></td>
</tr>
<tr id="970000000000001">
<td class="tc">希尔排序</td>
<td><span id="length_5"></span></td>
<td><span id="time_5"></span></td>
</tr>
<tr id="970000000000001">
<td class="tc">递归快速排序</td>
<td><span id="length_6"></span></td>
<td><span id="time_6"></span></td>
</tr>
<tr id="970000000000001">
<td class="tc">堆栈快速排序</td>
<td><span id="length_7"></span></td>
<td><span id="time_7"></span></td>
</tr>
<tr id="970000000000001">
<td class="tc">归并排序</td>
<td><span id="length_8"></span></td>
<td><span id="time_8"></span></td>
</tr>
<tr id="970000000000001">
<td class="tc">堆排序</td>
<td><span id="length_9"></span></td>
<td><span id="time_9"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
main.js
/* 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:;padding:;}table{border-collapse:collapse;border-spacing:;}fieldset,img{border:;}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:;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:;} #bd,#hd,.clear{*zoom:;}
#bd:after,.clear:after{content:"\20";display:block;height:;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:; margin:5px 0;} /*member*/
.b{ font-weight:;}
.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:; top:5px;+margin-right:20px;}
.menu .m_r10{_margin-left:-4px;}
button{width: 100px;height: 30px;} .table{cellpadding:;cellspacing:; width:100%;line-height:2.5em; font-size:12px; text-align:center;}
.table thead{ border-bottom:1px solid #FFF;}
.table thead,.table tr:hover,.js_hover{background:#D0DBEE;}
.table thead th{font-weight:;}
.table .even{background:#EEF4F7;}
main.js
window.onload=function(){
//生成随机数
generate();
var oGenerate=document.getElementById('btnGenerate');
var oSort=document.getElementById('btnSort');
var oBubble=document.getElementById('btnBubble');
var oSelection=document.getElementById('btnSelection');
var oInsertion=document.getElementById('btnInsertion');
var oShell=document.getElementById('btnShell');
var oQuick=document.getElementById('btnQuick');
var oStackQuick=document.getElementById('btnStackQuick');
var oMerge=document.getElementById('btnMerge');
var oHeap=document.getElementById('btnHeap');
var oTxtCount=document.getElementById('txtCount');
oGenerate.onclick=function(){
generate();
}
oSort.onclick=function(){
document.getElementById('time_1').innerText=sortAlgorithm('js');
document.getElementById('length_1').innerText=oTxtCount.value;
}
oBubble.onclick=function(){
document.getElementById('time_2').innerText=sortAlgorithm('bubble');
document.getElementById('length_2').innerText=oTxtCount.value;
}
oSelection.onclick=function(){
document.getElementById('time_3').innerText=sortAlgorithm('selection');
document.getElementById('length_3').innerText=oTxtCount.value;
}
oInsertion.onclick=function(){
document.getElementById('time_4').innerText=sortAlgorithm('insertion');
document.getElementById('length_4').innerText=oTxtCount.value;
}
oShell.onclick=function(){
document.getElementById('time_5').innerText=sortAlgorithm('shell');
document.getElementById('length_5').innerText=oTxtCount.value;
}
oQuick.onclick=function(){
document.getElementById('time_6').innerText=sortAlgorithm('quick');
document.getElementById('length_6').innerText=oTxtCount.value;
}
oStackQuick.onclick=function(){
document.getElementById('time_7').innerText=sortAlgorithm('stackQuick');
document.getElementById('length_7').innerText=oTxtCount.value;
}
oMerge.onclick=function(){
document.getElementById('time_8').innerText=sortAlgorithm('merge');
document.getElementById('length_8').innerText=oTxtCount.value;
}
oHeap.onclick=function(){
document.getElementById('time_9').innerText=sortAlgorithm('heap');
document.getElementById('length_9').innerText=oTxtCount.value;
}
};
//交换函数
Array.prototype.swap = function(i, j) {
var temp = this[i];
this[i] = this[j];
this[j] = temp;
}
//JS内置排序
Array.prototype.jsSort = function() {
return this.sort(function(a, b){
return a - b;
});
}
//冒泡排序
Array.prototype.bubbleSort = function() {
for (var i = this.length - 1; i > 0; --i)
{
for (var j = 0; j < i; ++j)
if (this[j] > this[j + 1])
this.swap(j, j + 1);
}
}
//选择排序
Array.prototype.selectionSort = function() {
for (var i = 0; i < this.length; ++i)
{
var index = i;
for (var j = i + 1; j < this.length; ++j)
{
if (this[j] < this[index])
index = j;
}
this.swap(i, index);
}
}
//插入排序
Array.prototype.insertionSort = function() {
for (var i = 1; i < this.length; ++i)
{
var j = i,
value = this[i];
while (j > 0 && this[j - 1] > value)
{
this[j] = this[j - 1];
--j;
}
this[j] = value;
}
}
//希尔排序(>>位运算)
Array.prototype.shellSort = function() {
for (var step = this.length >> 1; step > 0; step >>= 1)
{
//alert(step >>= 1);
for (var i = 0; i < step; ++i)
{
for (var j = i + step; j < this.length; j += step)
{
var k = j, value = this[j];
while (k >= step && this[k - step] > value)
{
this[k] = this[k - step];
k -= step;
}
this[k] = value;
}
}
}
}
//递归快速排序
Array.prototype.quickSort = function(s, e) {
if (s == null)
s = 0;
if (e == null)
e = this.length - 1;
if (s >= e)
return;
this.swap((s + e) >> 1, e);
var index = s - 1;
for (var i = s; i <= e; ++i)
if (this[i] <= this[e]) this.swap(i, ++index);
this.quickSort(s, index - 1);
this.quickSort(index + 1, e);
}
//堆栈快速排序
Array.prototype.stackQuickSort = function() {
var stack = [0, this.length - 1];
while (stack.length > 0)
{
var e = stack.pop(), s = stack.pop();
if (s >= e)
continue;
this.swap((s + e) >> 1, e);
var index = s - 1;
for (var i = s; i <= e; ++i)
{
if (this[i] <= this[e])
this.swap(i, ++index);
}
stack.push(s, index - 1, index + 1, e);
}
}
//归并排序
Array.prototype.mergeSort = function(s, e, b) {
if (s == null)
s = 0;
if (e == null)
e = this.length - 1;
if (b == null)
b = new Array(this.length);
if (s >= e)
return;
var m = (s + e) >> 1;
this.mergeSort(s, m, b);
this.mergeSort(m + 1, e, b);
for (var i = s, j = s, k = m + 1; i <= e; ++i)
b[i] = this[(k > e || j <= m && this[j] < this[k]) ? j++ : k++];
for (var i = s; i <= e; ++i)
this[i] = b[i];
}
//堆排序
Array.prototype.heapSort = function() {
for (var i = 1; i < this.length; ++i)
{
for (var j = i, k = (j - 1) >> 1; k >= 0; j = k, k = (k - 1) >> 1)
{
if (this[k] >= this[j])
break;
this.swap(j, k);
}
}
for (var i = this.length - 1; i > 0; --i)
{
this.swap(0, i);
for (var j = 0, k = (j + 1) << 1; k <= i; j = k, k = (k + 1) << 1)
{
if (k == i || this[k] < this[k - 1])
--k;
if (this[k] <= this[j])
break;
this.swap(j, k);
}
}
}
//生成随机数
function generate() {
var max = parseInt(txtMax.value),
count = parseInt(txtCount.value);
if (isNaN(max) || isNaN(count))
{
alert("随机数个数和最大值必须是整数");
return;
}
var array = [];
for (var i = 0; i < count; ++i)
array.push(Math.round(Math.random() * max));
txtInput.value = array.join(",");
txtOutput.value = "";
}
//返回排序时间
function sortAlgorithm(type) {
var timer=0;
var array = txtInput.value == "" ? [] : txtInput.value.replace().split(",");
for (var i = 0; i < array.length; ++i)
array[i] = parseInt(array[i]);
var t1 = new Date();
//eval() 函数可计算某个字符串，并执行其中的的JavaScript代码
eval("array." + type + "Sort()");
var t2 = new Date();
timer= t2.valueOf() - t1.valueOf();
txtOutput.value = array.join(",");
return timer;
}
排序效果：
