作为一个程序员，一些基本的排序算法是必须要掌握的。以前人们总觉得算法是后端程序员去学的，前端只需要专注于网页的美观以及 JS 的基本逻辑交互就行，然而，近几年随着前端行业的发展，前端越来越注重逻辑交互，如果你还像很久之前那样只知道用 HTML + CSS 去构建网页，那就落伍了。如今，前端程序员也需要对算法有一定的了解，不说别的，多掌握点东西总是好的。这篇文章记录下很常见的一种排序算法——冒泡排序，文章不会太长，方便你快速看完。

什么是排序

维基百科中这样说明：一种能将一串数据依照特定排序方式进行排列的一种算法。生活中也有很多排序的例子：超市购物排队，学生成绩排序，班级座位排序等。排序可以分为内部排序还有外部排序。内部排序是指待排序列完全存放在内存中所进行的排序过程，适合不太大的元素序列；外部排序能够处理极大量数据的排序算法，通常需要结合外存储器（硬盘）使用。下图是排序的分类，下面的冒泡排序就属于交换排序的一种。

各种排序归类
各种排序归类

什么是冒泡排序

顾名思义，冒泡排序就是比较一个待排序的数组中相邻的两个数，如果一个数大于它后面的数，那就将它们交换，这样较大的数就被“冒泡”到后面了，所以第一次冒泡排序后，第一个数肯定是数组中最大的数，接着数组中较大的数会不断排到后面去，这就是冒泡排序。

实现代码

下面是冒泡排序的代码，由于比较的是相邻两个数，所以只需比较到倒数第二个元素，最后一个元素例外，因此i = arr.length - 1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function bubbleSort(arr){
  console.time('冒泡排序耗时: ');
  var i = arr.length - 1;
  while(i>0){
    var pos = 0;      // 标记每次排序的位置，这样只需循环到这里，后面的数已排好
    for(var j=0;j<i;j++){
      if(arr[j] > arr[j+1]){
        pos = j;
        var temp = arr[j];     // 交换两个数
        arr[j] = arr[j+1];
        arr[j+1] = temp;
      }
    }
        i = pos;      // 准备下一次排序
  }
  console.timeEnd('冒泡排序耗时: ');
  return arr;
}

var arr=[9,2,38,4,16,36,22,68,46,1,42,48];
console.log(bubbleSort(arr));    // 冒泡排序耗时: : 0.27294921875ms
                                 // 1, 2, 4, 9, 16, 22, 36, 38, 42, 46, 48, 68

也许上面的代码看着不是很懂，没关系，算法代码这种东西不是看一次就能懂的，大神忽略，多看几遍多学习，一定能有所收获。

时间和空间复杂度

最好的情况：T(n) = O(n)
最坏的情况：T(n) = O(n²)
平均时间复杂度是：T(n) = O(n²)
空间复杂度为：O(1)


最近在网上看到了一段代码，很有意思，代码如下：
1
2
3
4
5
6
7
8
.red{
  color: red;
}
.blue{
  color: blue;
}
<div class="red blue"></div>
<div class="blue red"></div>

猜猜两个 div 各自的颜色，在心中有了自己的结果后可以去验证下看看自己想得对不对哦。欢迎关注下方的公众号，一起学习交流！