国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript實(shí)現(xiàn)冒泡排序 可視化

RebeccaZhong / 2210人閱讀

摘要：說明上次寫了實(shí)現(xiàn)冒泡排序，只是簡單的說了冒泡排序算法是什么，怎么實(shí)現(xiàn)，這次來實(shí)現(xiàn)將冒泡排序的過程展現(xiàn)出來。總結(jié)上面的兩個版本的思路基本一樣，用一句話概括就是，記錄冒泡排序所有的改變，將這些改變一步一步的顯示出來。

說明

上次寫了 JavaScript實(shí)現(xiàn)冒泡排序 ，只是簡單的說了冒泡排序算法是什么，怎么實(shí)現(xiàn)，這次來實(shí)現(xiàn)將冒泡排序的過程展現(xiàn)出來。

解釋

先來個簡單的版本，看效果圖

實(shí)現(xiàn)這個效果，思路是這樣的
1、先將需要排序的數(shù)組，進(jìn)行冒泡排序，記錄每一步的內(nèi)容，存放在一個數(shù)組中
2、利用canvas，實(shí)現(xiàn)一個 darw 方法，能將一步的內(nèi)容畫到頁面上
3、實(shí)現(xiàn)動畫效果，利用定時器，每隔一段時間，調(diào)用 darw 方法，畫出一步到頁面上

實(shí)現(xiàn)這個效果還是需要會一點(diǎn)點(diǎn)canvas的，比如知道怎么畫個長方形，怎么寫幾個字，換個顏色，如果不會的話，請到這里去看看。

代碼

看上面的代碼，能看出，實(shí)現(xiàn)效果主要靠的是三個函數(shù)
1、sort，實(shí)現(xiàn)冒泡排序，返回包括每一步的數(shù)組
2、darw ，畫出一步的內(nèi)容
3、animation ，實(shí)現(xiàn)動畫效果，定時調(diào)用darw 方法

上面實(shí)現(xiàn)的是比較簡單的一版，下來看一版更加漂亮的，這是我在Codepen上找到的，改了些代碼后，是這樣了，看圖

這一版比上一版要好看很多，但是思路其實(shí)一樣，都是需要一個包含每一步內(nèi)容的數(shù)組，遍歷數(shù)組，定時執(zhí)行操作，實(shí)現(xiàn)動畫效果。不同的地方就在于，這一版把每一步分的更細(xì)了，每一步都有不同的類型。

這一版是使用vue做的，在vuex中的mutations定義了 6個方法 來實(shí)現(xiàn)效果
1、reset，重置，
2、swap，交換，實(shí)現(xiàn)圖中兩個綠色div，進(jìn)行位移，
3、activate，激活，實(shí)現(xiàn)圖中兩個紅色div，變成綠色，
4、deactivate，釋放，實(shí)現(xiàn)圖中兩個綠色div，恢復(fù)成紅色，
5、lock，鎖定，實(shí)現(xiàn)找到一個最大值后，將它變成藍(lán)色，
6、done，完成，返回 true 表示排序完成。
點(diǎn)這里下載代碼 ，代碼里加了很詳細(xì)的注釋，非常容易看懂。

總結(jié)

上面的兩個版本的思路基本一樣，用一句話概括就是，記錄冒泡排序所有的改變，將這些改變一步一步的顯示出來。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93969.html

相關(guān)文章

  • JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法之美 - 冒泡排序、插入排序、選擇排序

    摘要：之所以把冒泡排序選擇排序插入排序放在一起比較，是因?yàn)樗鼈兊钠骄鶗r間復(fù)雜度都為。其中，冒泡排序就是原地排序算法。所以冒泡排序是穩(wěn)定的排序算法。選擇排序思路選擇排序算法的實(shí)現(xiàn)思路有點(diǎn)類似插入排序，也分已排序區(qū)間和未排序區(qū)間。 showImg(https://segmentfault.com/img/bVbuvnj?w=900&h=250); 1. 前言 算法為王。 想學(xué)好前端，先練好內(nèi)功，...

    canger 評論0 收藏0

  • JavaScript實(shí)現(xiàn)冒泡排序

    說明 對數(shù)組進(jìn)行 冒泡排序 算是比較簡單的，冒泡排序也是容易理解的一種排序算法了，在面試的時候，很可能就會問到。 實(shí)現(xiàn)原理 數(shù)組中有 n 個數(shù)，比較每相鄰兩個數(shù)，如果前者大于后者，就把兩個數(shù)交換位置；這樣一來，第一輪就可以選出一個最大的數(shù)放在最后面；那么經(jīng)過 n-1（數(shù)組的 length - 1） 輪，就完成了所有數(shù)的排序。 showImg(https://segmentfault.com/img...

    Aomine 評論0 收藏0

  • JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法之美 - 十大經(jīng)典排序算法匯總

    摘要：筆者寫的數(shù)據(jù)結(jié)構(gòu)與算法之美系列用的語言是，旨在入門數(shù)據(jù)結(jié)構(gòu)與算法和方便以后復(fù)習(xí)。這應(yīng)該是目前較為簡單的十大經(jīng)典排序算法的文章講解了吧。比如原本在的前面，而，排序之后，在的后面十大經(jīng)典排序算法冒泡排序思想冒泡排序只會操作相鄰的兩個數(shù)據(jù)。 showImg(https://segmentfault.com/img/bVbvHet); 1. 前言 算法為王。想學(xué)好前端，先練好內(nèi)功，內(nèi)功不行，就...

    zsy888 評論0 收藏0

  • JavaScript 版各大排序算法

    摘要：推薦一下，，這里還有個可視化的排序博客，各大排序算法的實(shí)現(xiàn)都栩栩如生。堆排序堆排序是指利用堆這種數(shù)據(jù)結(jié)構(gòu)所設(shè)計的一種排序算法。共勉參考維基百科排序搜索聊一聊排序算法秒殺種排序算法版排序圖解排序算法實(shí)現(xiàn)歡迎來我的博客交流 最近看到了很多公司都在準(zhǔn)備明年的實(shí)習(xí)校招，雖然離三月份還有一段時間，感覺已經(jīng)可以準(zhǔn)備了。在網(wǎng)上看了一些排序算法和數(shù)組去重操作，感覺都寫的很好，心血來潮，也來寫一寫。 s...

    FrozenMap 評論0 收藏0

  • 優(yōu)秀程序員都應(yīng)該學(xué)習(xí)的 GitHub 上開源的數(shù)據(jù)結(jié)構(gòu)與算法項(xiàng)目

    摘要：強(qiáng)烈推薦上值得前端學(xué)習(xí)的數(shù)據(jù)結(jié)構(gòu)與算法項(xiàng)目，包含圖的演示過程與視頻講解。該倉庫包含了多種基于的算法與數(shù)據(jù)結(jié)構(gòu)，提供進(jìn)一步閱讀的解釋和鏈接。數(shù)據(jù)結(jié)構(gòu)和算法必知必會的個代碼實(shí)現(xiàn)。 showImg(https://segmentfault.com/img/bVbvpYZ); 前言 算法為王。想學(xué)好前端，先練好內(nèi)功，內(nèi)功不行，就算招式練的再花哨，終究成不了高手；只有內(nèi)功深厚者，前端之路才會走得...

    cheukyin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<