归并排序(合并排序)是一个递归算法,这个算法的理解其实可以借助下面这个图:
对于原始的数组2,1,3,8,5,7,6,4,10,在整个过程执行的是顺序是途中红色编号1-20。虽然我们描述中说的是程序先分解,再归并,但实际过程是一边分解一边归并,前半部分分先排好序,后半部分再拍好,最后整个归并为一个完整的序列,途中的merge过程它所在层的两个序列的merge过程:下图展示了每个merge过程对作用于数组的哪部分(红色)。
整个过程就像一个动态的树,执行顺序就是对树的先序遍历顺序。
下面用JS演示归并排序过程
附代码:
<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> js归并排序 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<style>
table,td{
border:1px solid gray;
text-align:center;
color:white;
}
</style>
<script>
var array;
var left,right;
function init(){
array=$("#arr1").val().split(',');
left=0;
right=array.length-1;
$("#detail").html('');
}
function sort(){
mergeSort(array,left,right);
}
function mergeSort(array,lo,hi){
//alert(lo+":"+hi);
if(lo>=hi)return;
var mid=lo+parseInt((hi-lo)/2);
mergeSort(array,lo,mid);
//$("#detail").append("left sort("+lo+","+mid+")<br/>");
mergeSort(array,mid+1,hi);
//$("#detail").append("right sort("+(mid+1)+","+hi+")<br/>");
$("#detail").append("merge("+lo+","+mid+","+hi+")<br/>");
merge(array,lo,mid,hi);
}
function merge(array,lo,mid,hi){
var i=lo,j=mid+1;
var aux=[];
for(var k=lo;k<=hi;k++){
aux[k]=array[k];
}
for(var a=lo;a<=hi;a++){
if(i>mid){
array[a]=aux[j++];
}else if(j>hi){
array[a]=aux[i++];
}else if(parseInt(aux[i])<parseInt(aux[j])){
array[a]=aux[i++];
}else{
array[a]=aux[j++];
}
}
alert("aux:"+aux.join()+" array:"+array.join());
$("#lab2").text(array.join());
}
</script>
</HEAD>
<BODY style="text-align:center">
数据:
<input type="text" name="arr1" id="arr1" style="width:600px" value="2,1,3,8,5,7,6,4,10"/>
<br/>
<input type="button" value="初始化" οnclick="init()"/>
<input type="button" value="合并排序" οnclick="sort()"/>
<br/>
合并结果数组:<label id="lab2"></label><br/>
<div id="detail" style="border:1px solid blue;width:500px;height:100%;margin:0 auto;text-align:left;padding-left:20px;">
</div>
</BODY>
</HTML>
</span>
本文参考了博客