冒泡排序（Bubble Sort）算是前端最简单的算法，也是最经典的排序算法了。网上JavaScript版本的冒泡排序很多，今天用Vue实现一个动态的可视化冒泡排序。
01、JavaScript冒泡排序
冒泡排序原理也比较简单，就是相邻元素两两比较排序，把大的元素冒泡排序到后面，递归所有相邻元素组合完成排序。
1.1、原理
有一个无序数组：let arr = [100, 5, 6, 17, 3, 1]，长度为len=6。
- ①、从第一位元素100（0索引）开始，比较相邻
arr[0]、arr[1]元素的大小，大的排后面，如果arr[0]>arr[1]则交换值位置。 - ②、依次相邻元素比较、交换，一轮完成后，最大元素就到了最右边了。这个过程中，最大的元素（最大的泡泡）就像冒泡一样到了末尾。
- ③、然后继续对剩下的前面
len-1=5个元素重复上述步骤，直到只剩下一个元素。这是一个递归的过程，递归到第一个元素，就完成了冒泡排序。
冒泡排序的动画过程如下图，排序过程很直观，一目了然，下一章节也实现一个跟好的。
1.2、JavaScript实现
经典冒泡排序算法，用两个for循环来实现所有元素的两两对比排序。统计了一下排序次数，一共比较了15次。冒泡排序的时间复杂度是O(n^2)，这是最大值，最小为O(n)。
//经典冒泡排序算法 |
|
//从小到大冒泡排序 |
|
let arr = [100, 5, 6, 17, 3, 1]; |
|
let count=0; //计数器 |
|
function bubbleSort(arr) { |
|
const len = arr.length; |
|
let t;count=0; |
|
for (let i = 0; i < len - 1; i++) { |
|
for (let j = 0; j < len - i - 1; j++) { |
|
count++; |
|
//比较相邻两个元素 |
|
if (arr[j] > arr[j + 1]) { |
|
//交换两个元素，大的往后排列 |
|
t = arr[j]; |
|
arr[j] = arr[j + 1]; |
|
arr[j + 1] = t; |
|
} |
|
} |
|
} |
|
return arr; |
|
} |
|
console.log(bubbleSort(arr),"比较次数：",count); |
|
//[1, 3, 5, 6, 17, 100] '比较次数：' 15 |
上面代码中交换两个元素位置的时候，用了一个中间变量（t），可以改进一下。用一个解构赋值来交换值，就不用额外的一个中间变量（t）了。
let arr = [100, 5, 6, 17, 3, 1]; |
|
function bubbleSort(arr) { |
|
const len = arr.length; |
|
for (let i = 0; i < len - 1; i++) { |
|
for (let j = 0; j < len - i - 1; j++) { |
|
//比较相邻两个元素 |
|
if (arr[j] > arr[j + 1]) { |
|
//用结构赋值进行交换 |
|
[arr[j], arr[j + 1]] = [arr[j+1], arr[j]]; |
|
} |
|
} |
|
} |
|
return arr; |
|
} |
|
console.log(bubbleSort(arr)); |
|
//[1, 3, 5, 6, 17, 100] |
02、Vue实现一个冒泡动画
用Vue来实现一个可视化的冒泡排序，用Vue就不用去操作Dom了，只需要要处理好排序过程即可，因此首先要对排序过程进行改造。
2.1、排序过程改造
上一章节的排序是连续执行，瞬间完成的。要实现可视化的排序效果，每一个排序步骤之间得有间隔，给过渡动画留时间。就需要把排序的每一个步骤拆开，可以单独控制执行。
- 定义一个排序对象
SortItem，包装待排序元素，用于可视化展示，属性包括排序值、泡泡大小、泡泡颜色。 - 用上面的排序对象
SortItem，生成排序对象集合，正式排序步骤中用该集合。方法的参数为排序元素字符串，空格隔开，如“9 100 6 17 3 1”。
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/294968.html