标签：
在百度前端技术学院的任务列表那里看到了有一个任务是要求用javascript实现可视化的排序算法，感觉很有趣，就稍微研究了一下，本来是想实现冒泡排序算法和快速排序算法的可视化的，可是快速排序在要如何实现可视化这一步上感觉有一点难度，于是就暂时放弃了。
冒泡排序原理
冒泡排序我们应该都不陌生吧？很简单的两个for循环就可以实现了，其基本原理是：在一开始的时候，比较第一第二个数，如果如果第一个数比第二个数大的话则交换二者位置，在比较第二个和第三个数，同样的如果第二个数比第三个数大的话，则交换二者位置，如此重复，所以一趟比较下来就能筛选出最大的一个数并把它排在最后的位置，又因为一个for循环的话只能选出一个最大的数，而我们还需要选出第二大、第三大...到最小的数，所以还需要加一个for循环才能实现我们的目标。用javascript实现就是：
/*冒泡排序*/ function bubbleSort(arr){ if(arr.length<=1){ return arr; }; var temp=0; for(var i=0; i<arr.length; i++){ for(var j=0; j<arr.length-i-1; j++){ if(arr[j]>arr[j+1]){ temp=arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; }; }; }; return arr; }；
可视化原理
接下来就是要用可视化的方式把排序的过程展现出来了。我们可以用这两种方法去实现它：
1 排序的每一步结束后，我们让程序暂停一下运行（javascript没有sleep函数，我们需要自己去实现它），这样子的话，在我们看来排序的过程就是一步一步的进行的，就不会一瞬间就排序结束了。
2 我们可以通过维护一个数组，把每一次排序之后的数组保存起来，在排序算法结束之后，我们再把保存的每一个数组依次绘制出来。我这里的实现用的就是这种方法。
var snapshots=[]; //快照集合
var timer=null; //定时
var arr=[50,21,5,89,13,35,69,44,60,15,51,80,55,71]; //排序数组
/*冒泡排序*/ function bubbleSort(arr){ if(arr.length<=1){ return arr; }; var temp=0; for(var i=0; i<arr.length; i++){ for(var j=0; j<arr.length-i-1; j++){ if(arr[j]>arr[j+1]){ temp=arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; snapshots.push(JSON.parse(JSON.stringify(arr))); //<=记录下快照 }; }; }; return arr; };
Array.prototype.bubbleSort=function(){
return bubbleSort(this);
}
我们设置一个snapshots数组变量，用于记录下每一次排序之后数组的快照，等排序结束之后，我们就能得到一组记录下完整的排序过程的数组的快照了，这个时候我们再按照一定的时间间隔依次把这些快照绘制出来，就能实现出排序过程的可视化了。
/*绘图*/ function painting(){ var container=document.getElementById("container"); var bars=[].slice.call( document.querySelectorAll(".bar") ); //将所有bar元素的集合转换为数组对象 for(var i=0;i<arr.length;i++){ if(bars.length!=arr.length){ var bar=document.createElement("div"); bar.className="bar"; container.appendChild(bar); }else{ break; //当bar的数量等于数组的长度时，停止创建bar元素 }; }; var snapshot=snapshots.shift() || []; //取出快照记录数组中的第一条记录 console.log(snapshot); if(snapshot.length!=0){ for(var i=0; i<bars.length; i++){ bars[i].innerHTML=snapshot[i]; bars[i].style.height=snapshot[i]*5+"px"; bars[i].style.left=(i+1)*50+"px"; }; }else{ clearInterval(timer); //绘制结束 return; }; }; arr.bubbleSort(); //排序 timer=setInterval(painting,200); //定时绘制
效果图：
附上演示地址：http://jerellin.github.io/visualization.html
总结
看起来很酷炫对不对?不过快排的可视化实现不出来让我感觉很是郁闷啊，看来基础还是不行还需要继续努力了。
标签：
原文地址：http://www.cnblogs.com/tianheila/p/5346445.html
