资讯专栏INFORMATION COLUMN

前端动画演绎排序算法

goji / 378人阅读

摘要:寻找从当前位置到右边的最矮球员将最矮球员与当前位置的球员交换向右移动一个位置点击运行案例插入排序在大多数情况下,这是基础排序方法中的最佳方法。点击运行案例合并排序合并排序算法的核心是两个已经排序的数组的合并和递归。

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

在学习了常用的排序算法之后,打算用动画Demo来生动形象的展现它们。

这里包含6种排序算法,其中一半是简单算法,另一半是高级算法:

冒泡排序

选择排序

插入排序

~

归并排序

希尔排序

快速排序

冒泡排序

这可能是最简单的一种,但是速度非常慢。
假设我们按照棒球运动员的身高来排列队列。从最左边开始。

比较两个球员

如果左边的高一些,就换掉。否则,不做任何操作。

向右移动一个位置

点击运行案例

选择排序

也从最左边开始。

寻找从当前位置到右边的最矮球员

将最矮球员与当前位置的球员交换

向右移动一个位置

点击运行案例

插入排序

在大多数情况下,这是基础排序方法中的最佳方法。它的速度是冒泡排序的两倍。
而具体步骤比上面的排序稍微复杂一些。从左边的开始。

部分排序左球员

选择第一个未排序的球员作为标记球员

将比标记球员矮的球员移到右边

将标记的球员插入到第一个移动过位置的球员的前一个位置。

点击运行案例

合并排序

合并排序算法的核心是两个已经排序的数组的合并和递归。

如图所示,主要步骤如下:

将数字分成两部分

合并两部分

点击运行案例

希尔排序

“Shell排序”的名称是以发现它的Donald Shell命名的。它基于插入排序,但是增加了一个新特性,从而极大地提高了插入排序的性能。

主要步骤

将数组按区间(例如3)划分为若干组,并对它们进行一直排序,直到所有元素都被划分和排序为止。

缩小区间,继续进行分割和排序,直到区间变为1。

点击运行案例

快速排序

在大多数情况下,这是最快的排序。

选择一个参考元素(最右边的元素)

将数组划分为左子数组(比参考元素小的所有元素)和右子数组(比参考元素大的所有元素)

对左子数组和右子数组重复步骤2

点击运行案例

感谢你花时间阅读这篇文章。如果你喜欢这篇文章,欢迎点赞、收藏和分享,让更多的人看到这篇文章,这也是对我最大的鼓励和支持!
欢迎Star和订阅我的博客。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103092.html

相关文章

  • ELSE 技术周刊(2017.10.23期)

    摘要:为目前使用范围最广的网络保护协议。身处攻击目标周边的恶意人士能够利用密钥重装攻击,利用此类安全漏洞。本文和大家一起探讨下如何在三年内快速成长为一名技术专家。 业界动态 Vue 2.5 released Vue 2.5 正式发布,作者对于该版本的优化总结:更好的TypeScript 集成,更好的错误处理,更好的单文件功能组件支持以及更好的与环境无关的SSR WiFi爆惊天漏洞!KRACK...

    galaxy_robot 评论0 收藏0
  • 前端开发——让算法"动"起来

    摘要:函数和我们之前介绍的冒泡排序是一样的,只不过这里有一句这句是核心,一看是乍看是不是很奇怪,为什么要然后再。而且细心的会发现之前我们看到的冒泡排序它只有一层循环。 正文 当然在我们不清楚具体操作细节前我们可以先假设一下,我们能够用什么来实现。按照以前看过的排序动画我将其分为 1.Js操作Dom,再搭配简单的css 2.Canvas动画 之后在查资料的时候发现还有人用d3这个库来完成。...

    233jl 评论0 收藏0
  • 前端开发——让算法"动"起来

    摘要:函数和我们之前介绍的冒泡排序是一样的,只不过这里有一句这句是核心,一看是乍看是不是很奇怪,为什么要然后再。而且细心的会发现之前我们看到的冒泡排序它只有一层循环。 正文 当然在我们不清楚具体操作细节前我们可以先假设一下,我们能够用什么来实现。按照以前看过的排序动画我将其分为 1.Js操作Dom,再搭配简单的css 2.Canvas动画 之后在查资料的时候发现还有人用d3这个库来完成。...

    Tangpj 评论0 收藏0

发表评论

0条评论

goji

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<