JavaScript之冒泡排序

迷南。 2022-12-14 03:34 130阅读 0赞

我们去大厂面试前端的时候，最容易被问及的一个内容就是排序，而其中，冒泡排序作为最基础的排序算法，很多时候是被要求进行手写代码的，面试官通过对手写代码的考察，可以看出求职者的算法基础功底、JavaScript语言功底以及在开发时，对变量的语义化水平。

下面，将对冒泡排序的原理进行讲解。

冒泡排序原理

假设数组中有n个数，比较相邻两个数的大小，若前者大于后者，则两数交换位置。这样，第一轮结束的时候，就可以选出最大的一个数放在最后面，那么，经过n-1轮之后，所有的数就完成了排序。

代码演示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70][]

上图中，是我们使用ES5语法进行的一个冒泡排序封装函数。

首先，需要封装一个名为bubbleSort()的函数（名字最好语义化一些），在该函数中传入一个arr形参，目的是方便在后续调用该方法的时候，可以利用形参接收传入方法中的真实参数。

其次，我们在函数体内定义了一个temp变量，用它来作为一个中间量，在后续交换变量位置时，可以起到临时保存的作用。

当有了这些之后，我们开始在函数体内进行第一次for循环。目的是来确定，完成整个排序，需要进行多少次的数据访问。

紧接着，我们在第一个for循环内部嵌套写入第二个for循环，目的是来获取相邻的两个数。

然后，我们在第二个for循环体内进行判断，如果前者大于后者，那么这两个数交换对应位置，进行排序。

最后，我们将排序完成的数组返回给形参arr中。

上述步骤是我们采用ES5的语法来进行实现的，随着前端技术的发展，新的ES6语法也已经问世，所以，除了ES5语法外，我们还可以利用ES6语法的新特性来实现，当然，基本原理是一样的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 1][]

上面这个代码块就是我们使用ES6语法来实现的，里面大部分代码和ES5差不多，但是有以下几点不同：

1、let关键字是新增的，没有var关键字变量提升的特点。

2、在进行位置交换时，采用了赋值的新特性。

总结

1、外层for循环控制循环次数

2、内层for循环进行两数交换，找到每次最大数，放在最后

3、设置标志位，减少不必要的训话次数

看到这里，想必你已经对冒泡排序有了一定认知。后续，大白老师还还会陆续进行许多面经技术文，希望可以助你一臂之力。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70]: /images/20221123/96fbdcf196044229a182771a247d380e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 1]: /images/20221123/caa509aea74b4ac7aa88430c1f7ec3f7.png