Vue使用動(dòng)畫實(shí)現(xiàn)冒泡排序、選擇排序

1、Vue使用動(dòng)畫實(shí)現(xiàn)冒泡排序、選擇排序廢話不多說(shuō)，先看一下使用Vue來(lái)實(shí)現(xiàn)冒泡排序的動(dòng)畫效果（注意：此處調(diào)整了交換過(guò)度時(shí)間為50毫秒）BubbleSortVisualizer再來(lái)看一下選擇排序的動(dòng)畫效果（注意：同樣加快了動(dòng)畫過(guò)渡時(shí)間）原理：由于Vue是基于MVVM的，所以我們只需要綁定屬性后，直接更改綁定的數(shù)據(jù)即可，不需要每次操縱Dom樹了。下面為的圖片中的方法就是提取出來(lái)的公共方法，動(dòng)畫效果是使用的CSS特性。/激活/用參數(shù)payload的indexes屬性中所有成員，與state.cards的每個(gè)成員(card)的sortindex屬性與進(jìn)行匹配，/如果找到相等的，就將state.cards

2、的成員(card)的isActive設(shè)置為trueactivate(state,payload)payload.indexes.forEach(index)=state.cards.forEach(card)=if(card.sortIndex=index)card.isActive=true;););,/釋放/用參數(shù)payload的indexes屬性中所有成員，與state.cards的每個(gè)成員(card)的sortIndex屬性與進(jìn)行匹配，/如果找到相等的，就將state.cards的成員(card)的isActive設(shè)置為falsedeactivate(state,payload)pay

3、load.indexes.forEach(index)=state.cards.forEach(card)=if(card.sortIndex=index)card.isActive=false;););,/鎖定/用參數(shù)payload的indexes屬性中所有成員，與state.cards的每個(gè)成員(card)的sortIndex屬性與進(jìn)行匹配，/如果找到相等的，就將state.cards的成員(card)的isLocked設(shè)置為truelock(state,payload)payload.indexes.forEach(index)=state.cards.forEach(card)=if(

4、card.sortIndex=index)card.isLocked=true;););,/解鎖/用參數(shù)payload的indexes屬性中所有成員，與state.cards的每個(gè)成員(card)的sortIndex屬性與進(jìn)行匹配,/如果找到相等的，就將state.cards的成員(card)的isLocked設(shè)置為falseunlock(state,payload)payload.indexes.forEach(index)=state.cards.forEach(card)=if(card.sortIndex=index)card.isLocked=false;););下面一步就是寫算法的

5、實(shí)現(xiàn)過(guò)程了，冒泡算法和選擇排序算法代碼如下。冒泡算法實(shí)現(xiàn)步驟：/冒泡排序方法，返回包括每一步的數(shù)組bubbleSort(values)/sequence為包括每一步內(nèi)容的數(shù)組letsequence=;/swapped為判斷是否已經(jīng)排序好的標(biāo)志位letswapped;/indexLastUnsorted用來(lái)減少不必要的循環(huán)letindexLastUnsorted=values.length-1;doswapped=false;for(leti=0;ivaluesi+1)lettemp=valuesi;valuesi=valuesi+1;valuesi+1=temp;swapped=true;/滿

6、足交換的條件，就重新定義所有card的sortIndex屬性sequence.push(type:swap,indexes:i,i+1);/結(jié)束這次循環(huán)之前，把原來(lái)兩個(gè)card的isActive的值為true的，設(shè)置為falsesequence.push(type:deactivate,indexes:i,i+1);/外層循環(huán)，每循環(huán)完一次，就鎖定最后一個(gè)card，下次這個(gè)card就不參與循環(huán)sequence.push(type:lock,indexes:indexLastUnsorted);indexLastUnsorted-;while(swapped);/如果提前排序好了，把剩下的car

7、d全部鎖定letskipped=Array.from(Array(indexLastUnsorted+1).keys();sequence.push(type:lock,indexes:skipped);/修改done為true，完成排序sequence.push(type:done);console.log(包括每一步內(nèi)容的數(shù)組sequence);returnsequence;選擇排序算法實(shí)現(xiàn)步驟：/選擇排序方法，返回包括每一步的數(shù)組(從小至大的順序)selectionSort(values)/sequence為包括每一步內(nèi)容的數(shù)組letsequence=;/數(shù)組的長(zhǎng)度letlen=valu

8、es.1ength;letminIndex;for(leti=0;ilen-1;i+)minIndex=i;將第minIndex個(gè)元素設(shè)為鎖定sequence.push(type:lock,indexes:minIndex);for(letj=i+1;jlen;j+)sequence.push(type:activate,indexes:j);if(valuesjvaluesminIndex)sequence.push(type:unlock,indexes:minIndex);sequence.push(type:deactivate,indexes:minIndex);sequence.push(type:lock,indexes:j);將比i元素小的的索引保存minIndex=j;elsesequence.push(type:deactivate,indexes:j);if(minIndex!=i)lettemp=valuesi;valuesi=val