js演算法：分治法-歸併排序
阿新 • • 發佈：2018-12-23
歸併排序（合併排序）是一個遞迴演算法，這個演算法的理解其實可以藉助下面這個圖：
對於原始的陣列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>