JavaScript冒泡排序算法

JS冒泡排序由于比较简单和容易理解,往往会成为人们首先想到的排序算法。最基本的想法就是在一次里面比较两个数字,并且确保他们在移动到其他项目之前有一个正确的顺序。在每一结束价值的“排序”到正确的位置最终只留下其他项目排序。

算法实现思路

  1. 对比第一项和第二项
  2. 如果第一项应该在第二项的后面,交换他们
  3. 对比第二项和第三项
  4. 如果第二项应该在第三项之后,交换他们
  5. 持续直到数据结束

这个过程就是重复数次直到数据完全排序完毕,在每一次循环中,由于每一次的最后一项都是正确的排序,所以排序的项就越来越少。为了更好的理解,我们来进行一个数组对比一下:[3, 2, 4, 5, 1].

例子对比过程

  1. 首先是正排序,对比第一项和第二项,由于2比3小,所以3排到后面,结果是[2,3,4,5,1].
  2. 第二项和第三项,顺序是正确的,无须交换;第三项和第四项也是正确的,无须交换,第四项和第五项交换,结果为[2,3,4,1,5].
  3. 再次循环第一项和第二项,依次到第三项和第四项交换,为[2,3,1,4,5]
  4. 第三次循环,第二和第三交换为[2,1,3,4,5]
  5. 第四次循环,第一和第二交换为[1,2,3,4,5]

实现冒泡排序的第一步就是创建一个方法来交换数组里面的两项,这个方法在很多低效率的排序中是比较常见的。一个简单的JavaScript实现代码为:

function swap(items, firstIndex, secondIndex){
    var temp = items[firstIndex];
    items[firstIndex] = items[secondIndex];
    items[secondIndex] = temp;
}

如上所述,这个排序算法由于需要进行多次的排序,效率是比较低的。假设一个数组有n个项,那么则需要2的n次方来计算,让我们来看看这个

正向冒泡算法

function bubbleSort(items){

    var len = items.length,
        i, j, stop;

    for (i=0; i < len; i++){
        for (j=0, stop=len-i; j < stop; j++){
            if (items[j] > items[j+1]){
                swap(items, j, j+1);
            }
        }
    }

    return items;
}

外面的循环是控制了循环周期数,里面的循环则是项与项之间的排序比较。

反向冒泡排序

function bubbleSort(items){
    var len = items.length,
        i, j;

    for (i=len-1; i >= 0; i--){
        for (j=len-i; j >= 0; j--){
            if (items[j] < items[j-1]){
                swap(items, j, j-1);
            }
        }
    }

    return items;
}

上面两个代码的结果是一样的,都是从小到大排序,只是循环的顺序略有不同,都是正序冒泡。

反序冒泡排序

其实就是判断大小改变,第一项小于第二项时,交换位置,依次类推。

function bubbleSort2(items){
var len = items.length,
i,j,stop;
for(i=0;i<len; i++){
for(j=0,stop=len-i;j<stop;j++){
if(items[j]<items[j+1]){
swap(items,j,j+1);
}
}
}
return items;
}

代码演示

演示地址

总结

再次说明一下,JS冒泡排序可能并不适用于你的实际工作中哦,它只是一个简单的工具帮助我们了解算法并且为进一步获取更多的知识打下基础。而我们用得最多的可能是内置的Array.prototype.sort() 原型方法,这是由于它具有更高效率。

发现研究这些算法也挺有意思的,后面我将继续与大家分享更多的JavaScript算法知识,欢迎朋友们登录留言,与前端博客一起交流这方面的知识。本文为前端博客原创内容,转载的朋友请看底部转载声明。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流