Vue使用动画实现冒泡排序、选择排序

1、Vue使用动画实现冒泡排序、选择排序废话不多说，先看一下使用Vue来实现冒泡排序的动画效果（注意：此处调整了交换过度时间为50毫秒）BubbleSortVisualizer再来看一下选择排序的动画效果（注意：同样加快了动画过渡时间）原理：由于Vue是基于MVVM的，所以我们只需要绑定属性后，直接更改绑定的数据即可，不需要每次操纵Dom树了。下面为的图片中的方法就是提取出来的公共方法，动画效果是使用的CSS特性。/激活/用参数payload的indexes属性中所有成员，与state.cards的每个成员(card)的sortindex属性与进行匹配，/如果找到相等的，就将state.cards

2、的成员(card)的isActive设置为trueactivate(state,payload)payload.indexes.forEach(index)=state.cards.forEach(card)=if(card.sortIndex=index)card.isActive=true;););,/释放/用参数payload的indexes属性中所有成员，与state.cards的每个成员(card)的sortIndex属性与进行匹配，/如果找到相等的，就将state.cards的成员(card)的isActive设置为falsedeactivate(state,payload)pay

3、load.indexes.forEach(index)=state.cards.forEach(card)=if(card.sortIndex=index)card.isActive=false;););,/锁定/用参数payload的indexes属性中所有成员，与state.cards的每个成员(card)的sortIndex属性与进行匹配，/如果找到相等的，就将state.cards的成员(card)的isLocked设置为truelock(state,payload)payload.indexes.forEach(index)=state.cards.forEach(card)=if(

4、card.sortIndex=index)card.isLocked=true;););,/解锁/用参数payload的indexes属性中所有成员，与state.cards的每个成员(card)的sortIndex属性与进行匹配,/如果找到相等的，就将state.cards的成员(card)的isLocked设置为falseunlock(state,payload)payload.indexes.forEach(index)=state.cards.forEach(card)=if(card.sortIndex=index)card.isLocked=false;););下面一步就是写算法的

5、实现过程了，冒泡算法和选择排序算法代码如下。冒泡算法实现步骤：/冒泡排序方法，返回包括每一步的数组bubbleSort(values)/sequence为包括每一步内容的数组letsequence=;/swapped为判断是否已经排序好的标志位letswapped;/indexLastUnsorted用来减少不必要的循环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);/结束这次循环之前，把原来两个card的isActive的值为true的，设置为falsesequence.push(type:deactivate,indexes:i,i+1);/外层循环，每循环完一次，就锁定最后一个card，下次这个card就不参与循环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(包括每一步内容的数组sequence);returnsequence;选择排序算法实现步骤：/选择排序方法，返回包括每一步的数组(从小至大的顺序)selectionSort(values)/sequence为包括每一步内容的数组letsequence=;/数组的长度letlen=valu

8、es.1ength;letminIndex;for(leti=0;ilen-1;i+)minIndex=i;将第minIndex个元素设为锁定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