前端算法 - 排序

322 阅读3分钟

前言

算法 对于一个程序员来说,特别是对于前端开发来说,基本上用的场景有限,但是学习算法仍然是必要的,一方面对于面试来说,面试官如果想要在一群合格的候选人中挑出一个最优秀的,算法是其中一个考虑项,另一方面,学习算法可以使我们的思维变的严谨和开阔.

那么我们今天就从基础的也是最常见的算法 -排序算法讲起

排序对于前端来说是很简单的,因为 js 提供了 sort 这个 api

 arr.sort((a,b)=>{
     return a-b
 })

寥寥几行就可以实现排序,但是如果是面试,可不会让你用api,那么应该怎么自己实现一个排序算法呢?🧐

今天我们自己实现几个排序算法

排序

💡 冒泡

正如它的名字 冒泡 一样,这种算法可以让一个数据从一个位置不断移动到另一个位置(向前或者向后),就像水泡一样不断的浮出水面

P311380_383861f64f1afd5346717633ac071827.jpg 这种算法最简单,也最经典

算法步骤

  • 比较相邻的元素。如果第一个比第二个大,就交换他们两个。
  • 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。这步做完后,最后的元素会是最大的数。
  • 针对所有的元素重复以上的步骤,除了最后一个。
  • 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。

动图演示

6372421615561287501701539.gif

原理说明

image.png 代码实现起来比较简单

代码演示

code.png

这个以前面试的时候被要求手写,但是没写出来😔,所以这个写的最详细

插入排序

这个算法最容易理解,只要打过扑克牌的人都应该能够懂,你可以想象,当你打扑克的时候,手里握着 3,4,5,7,8的时候,来了一张6,你怎么把6插入到5,7之间,直觉是拿最后一张牌86比,8 比 6 大,再8往后移动一位,然后 6 与 7 比较,7 仍然 比 6大,7 继续往后移动一位,再与 5 比较,4 小于 6,那么 6 的位置就在这里

OIP-C.jpg

算法步骤

将第一待排序序列第一个元素看做一个有序序列,把第二个元素到最后一个元素当成是未排序序列。
从头到尾依次扫描未排序序列,将扫描到的每个元素插入有序序列的 适当位置

动图演示

6372423046865975008515903.gif

原理说明

image.png

代码演示

code.png

选择排序

正如它的名字一样,要选择 首先在未排序序列中找到最小元素,存放到排序序列的起始位置。再从剩余未排序元素中继续寻找最小元素,然后放到已排序序列的末尾。重复第二步,直到所有元素均排序完毕。

算法步骤

  1. 找到最小值1,拿 1 与 数组第一项进行交换
  2. 在未排序中找到最小值2,与数组第二项进行交换
  3. ....

动图演示

6372422465497225003979134.gif

原理说明

e0c2cf775bb1b74a361a066c3694f4f5.png

代码演示

code.png

总结

排序 作为算法的开篇,是最基本也是面试中最常见的算法,排序 不仅有上文说的这三种,还有 快速排序,归并排序等等,每周抽出一点时间学习算法,可以锻炼自己的思维能力,厚积薄发,写出更优雅的代码