前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 前端算法面试

    • 快速上手——从0到1掌握算法面试需要的数据结构(一)
    • 快速上手——从0到1掌握算法面试需要的数据结构(二)
    • 快速上手——从0到1掌握算法面试需要的数据结构(三)
    • 递归初相见——二叉树递归遍历的三种姿势
    • 算法的衡量——轻松理解时间复杂度与空间复杂度
    • 数组的应用——真题归纳与解读
    • 字符串的应用——真题归纳与解读
    • 链表的应用——真题归纳与解读
    • 快慢指针与多指针——玩转链表复杂操作
    • 姿势特别的链表——环形链表专题
    • 栈与队列怎么玩(上)
    • 栈与队列怎么玩(下)
    • 遍历专题 DFS 与 BFS
    • 场景化解读递归与回溯思想在真题中的应用
    • 二叉树真题归纳与解读
    • 特殊的二叉树——二叉搜索树专题
    • 特殊的二叉树——平衡二叉树专题
    • 特殊的二叉树——堆结构及其在排序中的应用
    • 排序算法专题(上)
      • 冒泡排序
        • 基本思路分析
        • 真实排序过程演示
        • 基本冒泡思路编码实现
        • 基本冒泡思路的改进
        • 改进版冒泡排序的编码实现
        • 面向“最好情况”的进一步改进
      • 选择排序
        • 思路分析
        • 真实排序过程演示
        • 编码复盘——选择排序的时间复杂度
      • 插入排序
        • 真实排序过程演示
        • 编码复盘——插入排序的时间复杂度
      • 小结
    • 排序算法专题(下)
    • 普通人也能吃透的动态规划思想专题(上)
    • 普通人也能吃透的动态规划思想专题(下)
完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

各位老铁,从本节开始,我们进入排序算法的世界。

对于前端来说,排序算法在应用方面似乎始终不是什么瓶颈——JS 天生地提供了对排序能力的支持,很多时候,我们实现排序只需要这样寥寥数行的代码:

arr.sort((a,b) => {
    return a - b
})
@前端进阶之旅: 代码已经复制到剪贴板

以某一个排序算法为“引子”,顺藤摸瓜式地盘问,可以问出非常多的东西,这也是排序算法始终热门的一个重要原因——面试官可以通过这种方式在较短的时间里试探出候选人算法能力的扎实程度和知识链路的完整性。因此排序算法在面试中的权重不容小觑。

以面试为导向来看,需要大家着重掌握的排序算法,主要是以下5种:

基础排序算法:

  • 冒泡排序
  • 插入排序
  • 选择排序
  • 进阶排序算法
  • 归并排序
  • 快速排序

我们的学习安排就按照这个从基础到进阶的次序来。

和以往不同的是,本专题的讲解线索不再是“题目”,而是排序算法本身:针对每一种算法,我都会首先介绍其思想,然后为大家逐步示范一遍真实的排序过程,接着为大家做编码教学。最后,别忘了,排序算法的时间复杂度也是一个不能忽视的考点,“编码复盘”部分我们不见不散。

注意:考虑到排序类题目在未经特别声明的情况下,都默认以“从小到大排列”为有序标准。因此下文中所有”有序“的描述指代的都是“从小到大排列”。

# 冒泡排序

# 基本思路分析

冒泡排序的过程,就是从第一个元素开始,重复比较相邻的两个项,若第一项比第二项更大,则交换两者的位置;反之不动。

每一轮操作,都会将这一轮中最大的元素放置到数组的末尾。假如数组的长度是 n,那么当我们重复完 n 轮的时候,整个数组就有序了。

# 真实排序过程演示

下面我们基于冒泡排序的思路,尝试对以下数组进行排序:

[5, 3, 2, 4, 1]
@前端进阶之旅: 代码已经复制到剪贴板

首先,将第一个元素 5 和它相邻的元素 3 作比较,发现5 比 3 大,故将 5 和 3 交换:

[3, 5, 2, 4, 1]
 ↑  ↑
@前端进阶之旅: 代码已经复制到剪贴板

将第二个元素 5 和第三个元素 2 作比较,发现 5 比 2大,故将 5 和 2 交换:

[3, 2, 5, 4, 1]
    ↑  ↑
@前端进阶之旅: 代码已经复制到剪贴板

将第三个元素 5 和第四个元素 4 作比较,发现 5 比 4 大,故将 5 和 4 交换:

[3, 2, 4, 5, 1]
       ↑  ↑
@前端进阶之旅: 代码已经复制到剪贴板

将第四个元素 5 和第五个元素 1 作比较,发现 5 比 1 大,故将 5 和 1 交换:

[3, 2, 
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 前端算法面试

    • 快速上手——从0到1掌握算法面试需要的数据结构(一)
    • 快速上手——从0到1掌握算法面试需要的数据结构(二)
    • 快速上手——从0到1掌握算法面试需要的数据结构(三)
    • 递归初相见——二叉树递归遍历的三种姿势
    • 算法的衡量——轻松理解时间复杂度与空间复杂度
    • 数组的应用——真题归纳与解读
    • 字符串的应用——真题归纳与解读
    • 链表的应用——真题归纳与解读
    • 快慢指针与多指针——玩转链表复杂操作
    • 姿势特别的链表——环形链表专题
    • 栈与队列怎么玩(上)
    • 栈与队列怎么玩(下)
    • 遍历专题 DFS 与 BFS
    • 场景化解读递归与回溯思想在真题中的应用
    • 二叉树真题归纳与解读
    • 特殊的二叉树——二叉搜索树专题
    • 特殊的二叉树——平衡二叉树专题
    • 特殊的二叉树——堆结构及其在排序中的应用
    • 排序算法专题(上)
      • 冒泡排序
        • 基本思路分析
        • 真实排序过程演示
        • 基本冒泡思路编码实现
        • 基本冒泡思路的改进
        • 改进版冒泡排序的编码实现
        • 面向“最好情况”的进一步改进
      • 选择排序
        • 思路分析
        • 真实排序过程演示
        • 编码复盘——选择排序的时间复杂度
      • 插入排序
        • 真实排序过程演示
        • 编码复盘——插入排序的时间复杂度
      • 小结
    • 排序算法专题(下)
    • 普通人也能吃透的动态规划思想专题(上)
    • 普通人也能吃透的动态规划思想专题(下)