您的位置:首页 > Web前端 > JavaScript

js算法:分治法-归并排序

2015-08-23 17:30 651 查看
归并排序(合并排序)是一个递归算法,这个算法的理解其实可以借助下面这个图:



对于原始的数组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="初始化" onclick="init()"/>
<input type="button" value="合并排序" onclick="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>
本文参考了博客

归并排序 详解

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: