首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用vue实现排序算法演示动画

,如下: 嗯,舒服了很多,这个需求到这里就完了,但是事情并没有结束,我突然想到了以前看一些算法文章的时候通常会配上一些演示的动画,感觉跟这个很类似,那么是不是可以用这个来实现呢,当然是可以的。...实现算法演示动画 先写一下基本的布局和样式: <transition-group name="flip-list" tag...} }) return max } } } 其他样式可以自行发挥,显示效果如下: 简约而不简单~,现在万事俱备,只欠让它动起来,排序算法有很多...,但是本人比较菜,所以就拿冒泡算法来举例,最最简单的冒泡排序算法如下: { mounted(){ this.bubbleSort() }, methods: {...,这是选择排序的算法: { selectSort() { for (let i = 0; i < len - 1; i++) { minIndex = i

54030

【数据结构】排序算法---桶排序(动图演示)

桶排序 (Bucket sort)的工作的原理:假设输入数据服从均匀分布,将数据分到有限数量的桶里,每个桶再分别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排)。...演示 3.1 动态演示1 3.2 动态演示2 3.3 图片演示1 元素分布在桶中: 然后,元素在每个桶中排序: 3.4 图片演示2 4....性质 稳定性: 如果使用稳定的内层排序,并且将元素插入桶中时不改变元素间的相对顺序,那么桶排序就是一种稳定的排序算法。 由于每块元素不多,一般使用插入排序。此时桶排序是一种稳定的排序算法。...空间复杂度: 桶排序算法排序过程中新建了一个桶和一个输出数组,所以算法的空间复杂度是 O(N+M) 。...算法分析 桶排序最好情况下使用线性时间 O(n) ,桶排序的时间复杂度,取决与对各个桶之间数据进行排序的时间复杂度,因为其它部分的时间复杂度都为 O(n) 。

13110
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【数据结构】排序算法---希尔排序(动图演示)

    是第一个突破 O(n^2) 的排序算法,它与插入排序的不同之处在于,它会优先比较距离较远的元素。 2....算法步骤 排序对不相邻的记录进行比较和移动: 将待排序序列分为若干子序列(每个子序列的元素在原始数组中间距相同); 对这些子序列进行插入排序; 减小每个子序列中元素之间的间距,重复上述过程直至间距减少为...动图演示 基本思想:先选定一个整数(通常是 gap = n/3+1 ),把待排序文件所有记录分成各组,所有的距离相等的记录分在同一组内,并对每一组内的记录进行排序,然后 gap=gap/3+1 得到下一个整数...它是在直接插入排序算法的基础上进行改进而来的,综合来说它的效率肯定是要高于直接入排序算法的。 当 gap > 1 时都是预排序,目的是让数组更接近于有序。...当 gap == 1 时,数组已经接近有序的了,这样就会很快。这样整体而言,可以达到优化的效果。 4. 性质 稳定性: 希尔排序是一种不稳定的排序算法。

    42510

    10大常用的排序算法(算法分析+动图演示)

    各种常用的排序算法 算法概述 算法分类 十种常见排序算法可以分为两大类: 比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此也称为非线性时间比较类排序。...1.2 动图演示 ​ 1.3 代码实现 C/C++实现: //冒泡排序 void bubble_sort(int a[], int n) {//n为a[]的实际长度-1,例如a[4]={3,2,9,10...3、插入排序(Insertion Sort) 插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法。...5、归并排序(Merge Sort) 归并排序是建立在归并操作上的一种有效的排序算法。该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。...10.1 算法描述 取得数组中的最大数,并取得位数; arr为原始数组,从最低位开始取每个位组成radix数组; 对radix进行计数排序(利用计数排序适用于小范围数的特点); 10.2 动图演示 10.3

    41310

    【数据结构】排序算法---快速排序(动图演示)

    本质上来看,快速排序应该算是在冒泡排序基础上的递归分治法。 快速排序的名字起的是简单粗暴,因为一听到这个名字你就知道它存在的意义,就是快,而且效率高!它是处理大数据最快的排序算法之一了。...在《算法艺术与信息学竞赛》上有给出满意的答案: 快速排序的最坏运行情况是 O(n^2) ,比如说顺序数列的快排。...动图演示 4. 性质 稳定性: 快速排序是一种不稳定的排序算法。...在实践中,几乎不可能达到最坏情况,而快速排序的内存访问遵循局部性原理,所以多数情况下快速排序的表现大幅优于堆排序等其他复杂度为 O(nlogn) 的排序算法。 5....下面介绍几种较为成熟的快速排序优化方式: 三路快速:三路快速排序(英语:3-way Radix Quicksort)是快速排序和 [基数排序] 的混合。它的算法思想基于 [荷兰国旗问题]的解法。

    33910

    【数据结构】排序算法---计数排序(动图演示)

    定义 计数排序又称为鸽巢原理,是对哈希直接定址法的变形应用。计数排序不是基于比较的排序算法,其核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。...算法步骤 算法的步骤如下: (1)找出待排序的数组中最大和最小的元素 (2)统计数组中每个值为i的元素出现的次数,存入数组C的第i项 (3)对所有的计数累加(从C中的第一个元素开始,每一项和前一项相加)...动图演示 4. 性质 稳定性: 计数排序是一种稳定的排序算法。...算法分析 计数排序是一个稳定的排序算法。当输入的元素是 n 个 0到 k 之间的整数时,时间复杂度是 O(n+k) ,其排序速度快于任何比较排序算法。...当k不是很大并且序列比较集中时,计数排序是一个很有效的排序算法。 6.

    9410

    【数据结构】排序算法---堆排序(动图演示)

    定义 堆排序(Heapsort)是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构,并同时满足堆积的性质:即子结点的键值或索引总是小于(或者大于)它的父节点。...堆排序可以说是一种利用堆的概念来排序的选择排序。...分为两种方法: 大顶堆:每个节点的值都大于或等于其子节点的值,在堆排序算法中用于升序排列; 小顶堆:每个节点的值都小于或等于其子节点的值,在堆排序算法中用于降序排列; 2....动图演示 4. 性质 稳定性: 同直接选择排序一样,由于其中交换位置的操作,所以是不稳定的排序算法。...空间复杂度: 由于可以在输入数组上建立堆,所以这是一个原地算法,空间复杂度为 O(1) 时间复杂度: 堆排序的最优时间复杂度、平均时间复杂度、最坏时间复杂度均为 O(nlogn) 。 5.

    9610

    【数据结构】排序算法---冒泡排序(动图演示)

    定义 冒泡排序(英语:Bubble sort)是一种简单的排序算法。它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来。...走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。 由于在算法的执行过程中,较小的元素像是气泡般慢慢「浮」到数列的顶端,故叫做冒泡排序。...作为最简单的排序算法之一,冒泡排序给我的感觉就像 Abandon 在单词书里出现的感觉一样,每次都在第一页第一位,所以最熟悉。...动图演示 4. 性质 稳定性: 冒泡排序是一种稳定的排序算法。...算法分析 这个算法是最简单了解和实现的排序算法之一,但它对于包含大量的元素的数列排序是很没有效率的。由于它的简洁,冒泡排序通常被用来对于程序设计入门的学生介绍算法的概念。 6.

    29810

    【数据结构】排序算法---归并排序(动图演示)

    定义 归并排序(Merge sort)是建立在归并操作上的一种有效的排序算法。该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。...作为一种典型的分而治之思想的算法应用,归并排序的实现由两种方法: 自上而下的递归(所有递归的方法都可以用迭代重写,所以就有了第 2 种方法); 自下而上的迭代; 2....算法步骤 把长度为n的输入序列分成两个长度为n/2的子序列; 对这两个子序列分别采用归并排序; 将两个排序好的子序列合并成一个最终的排序序列。 3. 动图演示 4....性质 稳定性: 归并排序是高效的基于比较的稳定排序算法。 空间复杂度: 归并排序可以只使用 O(1) 大小的辅助空间,但为便捷通常使用与原数组等长的辅助数组。...算法分析 和选择排序一样,归并排序的性能不受输入数据的影响,但表现比选择排序好的多,因为始终都是 O(nlogn) 的时间复杂度。代价是需要额外的内存空间。 6.

    21610

    【数据结构】排序算法---直接选择排序(动图演示)

    定义 选择排序(Selection-sort)是一种简单直观的排序算法。...算法步骤 首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置。 再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。...重复第二步,直到所有元素均排序完毕。 3. 动图演示 4. 性质 稳定性: 由于 swap(交换两个元素)操作的存在,直接选择排序是一种不稳定的排序算法。...直接选择排序思考非常好理解,但是效率不是很好,所以实际中很少使用 5. 算法分析 无论什么数据进去都是 O(n^2) 的时间复杂度,所以用到它的时候,数据规模越小越好。...唯一的好处可能就是不占用额外的内存空间了吧。理论上讲,选择排序可能也是平时排序一般人想到的最多的排序方法了吧。 6.

    17210

    【数据结构】排序算法---基数排序(动图演示)

    ⚠本节要介绍的不是计数排序 1. 定义 基数排序(英语:Radix sort)是一种非比较型的排序算法,最早用于解决卡片排序的问题。...一般而言,我们默认基数排序是稳定的,所以在 MSD 基数排序中,我们也仅仅考虑借助 稳定算法(通常使用计数排序)完成内层对关键字的排序。...LSD 基数排序也需要借助一种 稳定算法 完成内层对关键字的排序。同样的,通常使用计数排序来完成。 3. LSD 基数排序动图演示 4....性质 稳定性: 如果对内层关键字的排序是稳定的,则 MSD 基数排序和 LSD 基数排序都是稳定的排序算法。 空间复杂度: MSD 基数排序和 LSD 基数排序的空间复杂度都为 O(k+n) 。...但由于需要额外的内存空间,因此当内存空间稀缺时,原地置换算法(比如快速排序)或许是个更好的选择。

    13810

    经典八种排序算法总结(带动画演示)

    每一轮分割的数组的个数逐步缩小,h/2->h/4->h/8,并且进行排序,保证有序。当h=1时,则数组排序完成。 动画演示: ?...归并排序的优点在于最好情况和最坏的情况的时间复杂度都是O(nlogn),所以是比较稳定的排序方式。 动画演示: ?...对于数组中的元素分布均匀的情况,排序效率较高。相反的,如果分布不均匀,则会导致大部分的数落入到同一个桶中,使效率降低。 动画演示(来源于五分钟学算法,侵删): ?...M+N) 算法空间复杂度:O(M+N) 算法稳定性:稳定(取决于桶内的排序算法,这里使用的是插入排序所以是稳定的)。...动画演示来源于算法学习网站:https://visualgo.net 讲完这些排序算法后,可能有人会问学这些排序算法有什么用呢,难道就为了应付笔试面试?平时开发也没用得上这些。

    93411

    各大排序算法性能比较及演示实例

    排序算法分析 本文主要分析的排序算法有:冒泡排序、选择排序、插入排序、希尔排序、快速排序、归并排序、堆排序。...交换算法 由于大部分排序算法中使用到两个记录相互交换的动作,因此将交换动作单独封装出来,便于各排序算法使用。 ?...在这个过程中,大的记录就像一块石头一样沉底,小的记录逐渐向上浮动。冒泡排序算法结束的条件是一趟排序没有发生元素交换。 ? 算法性能:最内层循环的元素交换操作是算法的基本操作。...算法性能:快速排序最好情况下时间复杂度为O(nlogn),待排序列越接近无序,则该算法效率越高,在最坏情况下时间复杂度为O(n*n),待排序列越接近有序,则该算法效率越低,算法的平均时间复杂度为O(nlogn...就平均时间而言,快速排序是所有排序算法中最好的。该算法的空间复杂度为O(logn),快速排序是递归进行的,需要栈的辅助,因此需要的辅助空间比前面几类排序方法要多。

    803100

    【数据结构】排序算法---直接插入排序(动图演示)

    定义 直接插入排序是一种简单直观的排序算法。它的工作原理为将待排列元素划分为「已排序」和「未排序」两部分,每次从「未排序的」元素中选择一个插入到「已排序的」元素中的正确位置。...直接插入排序的代码实现虽然没有冒泡排序和选择排序那么简单粗暴,但它的原理应该是最容易理解的了,因为只要打过扑克牌的人都应该能够秒懂。 直接插入排序和冒泡排序一样,也有一种优化算法,叫做折半插入。...动图演示 4. 性质 稳定性: 直接插入排序是一种稳定的排序算法。 空间复杂度: 直接插入排序的空间复杂度为 O(1) 。...时间复杂度: 元素集合越接近有序,直接插入排序算法的时间效率越高。 直接插入排序的最优时间复杂度为 O(n) ,在数列几乎有序时效率很高。...折半插入排序 直接插入排序还可以通过二分算法优化性能,在排序元素数量较多时优化的效果比较明显。

    32710

    数据结构与算法-十大排序算法(动画演示)

    排序算法的概念 1. 算法相关名词 稳定:如果a原本在b前面,而a = b,排序之后a仍然在b的前面。 不稳定:如果a原本在b的前面,而a = b,排序之后 a 可能会出现在 b 的后面。...动画演示 黄色表示已排序部分,蓝色表示未排序部分,红色表示当前正在处理的key ? 3....动画演示 黄色表示已排序部分,蓝色表示未排序部分,红色表示从未排序中选择的最小值。 ? 3....将归并排序后的看成一个整体元素,从头到尾再进行归并排序,直到所有的元素都成为一个归并排序整体。 2. 动画演示 ? 3....算法描述 (1). 设置固定数量的空桶; (2). 把数据放在对应的桶内,分别对每个非空桶内数据进行排序; (3). 拼接非空的桶内数据,得到最终的结果。 2. 动画演示 ? 3.

    73820
    领券