前端動畫演繹排序算法

文章包含多個可交互案例，可經過博客原文實時查看案例

在學習了經常使用的排序算法以後，打算用動畫Demo來生動形象的展示它們。

這裏包含6種排序算法，其中一半是簡單算法，另外一半是高級算法:

• 冒泡排序
• 選擇排序
• 插入排序
• ~
• 歸併排序
• 希爾排序
• 快速排序

冒泡排序

這多是最簡單的一種，可是速度很是慢。
假設咱們按照棒球運動員的身高來排列隊列。從最左邊開始。

1. 比較兩個球員
2. 若是左邊的高一些，就換掉。不然,不作任何操做。
3. 向右移動一個位置

點擊運行案例

選擇排序

也從最左邊開始。

1. 尋找從當前位置到右邊的最矮球員
2. 將最矮球員與當前位置的球員交換
3. 向右移動一個位置

點擊運行案例

插入排序

在大多數狀況下，這是基礎排序方法中的最佳方法。它的速度是冒泡排序的兩倍。
而具體步驟比上面的排序稍微複雜一些。從左邊的開始。

1. 部分排序左球員
2. 選擇第一個未排序的球員做爲標記球員
3. 將比標記球員矮的球員移到右邊
4. 將標記的球員插入到第一個移動過位置的球員的前一個位置。

點擊運行案例

合併排序

合併排序算法的核心是兩個已經排序的數組的合併和遞歸。

如圖所示，主要步驟以下:

1. 將數字分紅兩部分
2. 合併兩部分

點擊運行案例

希爾排序

「Shell排序」的名稱是以發現它的Donald Shell命名的。它基於插入排序，可是增長了一個新特性，從而極大地提升了插入排序的性能。

主要步驟

1. 將數組按區間(例如3)劃分爲若干組，並對它們進行一直排序，直到全部元素都被劃分和排序爲止。
2. 縮小區間，繼續進行分割和排序，直到區間變爲1。

點擊運行案例

快速排序

在大多數狀況下，這是最快的排序。

1. 選擇一個參考元素(最右邊的元素)
2. 將數組劃分爲左子數組(比參考元素小的全部元素)和右子數組(比參考元素大的全部元素)
3. 對左子數組和右子數組重複步驟2

點擊運行案例

感謝你花時間閱讀這篇文章。若是你喜歡這篇文章,歡迎點贊、收藏和分享，讓更多的人看到這篇文章，這也是對我最大的鼓勵和支持！
歡迎Star和訂閱個人博客。