前端动画演绎排序算法

文章包含多个可交互案例，可经过博客原文实时查看案例

在学习了经常使用的排序算法以后，打算用动画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和订阅个人博客。