前端面试题解密：经典算法之冒泡算法（ES6版）及优化

前言

随着前端的飞速发展，前端业务开发给前端工程师提出了更高的要求，因而算法题也越来越高频次的出现在前端面试中。有很多的小伙伴找胡哥苦诉，在前端实际开发中（除了涉及游戏开发方面），算法使用有很多吗？大厂的面试是故意要自我标榜下吗？其实不然，考核算法还是相当有必要的，来来来，让胡哥给你拯救世界的理由，哦，不，是考核算法的理由。

为啥要考算法？

算法是通用技能，包含了诸多逻辑和相关的技术点，优秀的算法方案会体现出优秀的逻辑思维和和解决问题的能力。
扎实的算法有助于我们在解决复杂问题时获得更优的解决方案。

算法的实现基于不同的语言有不同的形式，对于JavaScript来说，算法的实现也有很多种不同的方式，本文基于JS最新的ES6语法来实现，各位小伙伴在领略算法魅力的同时也能掌握到ES6的语法。

一、冒泡算法

冒泡算法，闻名而知其意，使用类似于水中气泡自下而上逐渐变大的原理（这个原理要是有不清楚的童鞋，可咨询物理老师压强问题，看看老师会不会把你打出shi来...）来对数组进行排序。

排序规则

每次循环，比较当前位置项与下一个位置项的大小，如果当前项 > 后一项，则交换两者的位置。每次循环比较都能选择出一个最大值，放在末尾，剩余待筛选的比较项就减少一项。
如果数组存在n项，那么需要循环执行筛选的次数为n次

二、冒泡算法代码实现

1function bubbleSort ([...arr]) {
2  for (let i = 0; i < arr.length; i++) {    
3    // 第j和j+1项比较，故j的最大值为 = 最大长度 - 1 - 减去已经执行筛选的轮数i
4    for (let j = 0; j < arr.length - 1 - i; j++) {
5      if (arr[j] > arr[j + 1]) {
6        // 交换数组元素的位置
7        [arr[j + 1], arr[j]] = [arr[j], arr[j + 1]]
8      }
9    }
10  }
11  return arr
12}
13
14let arr = [4, 3, 2, 1]
15
16// 输出排序结果
17let sortArr = bubbleSort(arr)
18console.log(sortArr) // [1, 2, 3, 4]
19// 输出原数组
20console.log(arr) // [4, 3, 2, 1]

ES6语法结构

函数定义时形参：[...arr]

解构赋值和扩展运算符，为不影响原数组，使用该方式接收原数组元素

[arr[j + 1], arr[j]] = [arr[j], arr[j + 1]]表达式

1利用数组的解构赋值，交换两个位置的值
2[a, b] = [b, a]
3这样就不必借助于第三个变量来交换值

三、冒泡算法优化

使用上面的方式来实现冒泡算法排序时，时间平均复杂度为O(n^2)，那最坏的情况是什么呢？传入的数组完全是逆序的，即[4, 3, 2, 1]。但是如果传入的数组[1, 2, 3, 4]是完全正序的呢？如果还按该方式，那在执行时是性能浪费的，那该如何优化呢？

优化方案

如果数组是完全顺序的，那就说明在执行一次循环比较时，没有数组元素被交换位置，所以我们来设置一个标志flag，初始化为true，如果存在交换则赋值为false。在一次循环后，如果标志为true，则表示为无交换，已经是完全顺序了，则可以break停止外层循环了。下面我们来看下代码实现。

1function bubbleSort ([...arr]) {
2  for (let i = 0; i < arr.length; i++) {
3    // 设置标记，标记当前轮筛选时是否有交换位置元素，默认为true，如果有交换设置为false
4    let flag = true
5    
6    // 第j和j+1项比较，故j的最大值为 最大长度 - 1 - 减去已经执行筛选的轮数i
7    for (let j = 0; j < arr.length - 1 - i; j++) {
8      if (arr[j] > arr[j + 1]) {
9        // 交换数组元素的位置
10        [arr[j + 1], arr[j]] = [arr[j], arr[j + 1]]
11        
12        // 有交换位置，设置标记为false
13        flag = false
14      }
15    }
16    
17    // 如果当前轮比较时没有交换位置，说明已经排序完成了
18    if (flag) {
19      break
20    }
21  }
22  return arr
23}
24
25let arr = [1, 2, 3, 4]
26// 输出排序结果
27let sortArr = bubbleSort(arr)
28console.log(sortArr) // [1, 2, 3, 4]
29// 输出原数组
30console.log(arr) // [1, 2, 3, 4]

此时在完成排序时，只执行了一次循环，此刻的时间复杂度为O(n)

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得点赞、收藏呦，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...

胡哥有话说，专注于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！