前端面试题解密:经典算法之冒泡算法(ES6版)及优化

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

前言


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


为啥要考算法?


  1. 算法是通用技能,包含了诸多逻辑和相关的技术点,优秀的算法方案会体现出优秀的逻辑思维和和解决问题的能力。


  1. 扎实的算法有助于我们在解决复杂问题时获得更优的解决方案。


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


一、冒泡算法


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


排序规则


  1. 每次循环,比较当前位置项与下一个位置项的大小,如果当前项 > 后一项,则交换两者的位置。每次循环比较都能选择出一个最大值,放在末尾,剩余待筛选的比较项就减少一项。


  1. 如果数组存在n项,那么需要循环执行筛选的次数为n次


二、冒泡算法代码实现


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


ES6语法结构


  1. 函数定义时形参:[...arr]


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


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


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


三、冒泡算法优化


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


优化方案


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


function bubbleSort ([...arr]) {
  for (let i = 0; i < arr.length; i++) {
    // 设置标记,标记当前轮筛选时是否有交换位置元素,默认为true,如果有交换设置为false
    let flag = true
    // 第j和j+1项比较,故j的最大值为 最大长度 - 1 - 减去已经执行筛选的轮数i
    for (let j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        // 交换数组元素的位置
        [arr[j + 1], arr[j]] = [arr[j], arr[j + 1]]
        // 有交换位置,设置标记为false
        flag = false
      }
    }
    // 如果当前轮比较时没有交换位置,说明已经排序完成了
    if (flag) {
      break
    }
  }
  return arr
}
let arr = [1, 2, 3, 4]
// 输出排序结果
let sortArr = bubbleSort(arr)
console.log(sortArr) // [1, 2, 3, 4]
// 输出原数组
console.log(arr) // [1, 2, 3, 4]


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


相关文章
|
4天前
|
前端开发 JavaScript Java
2024高频前端面试题合集(一)
JavaScript Bridge 是一种在 JavaScript 和其他语言(如 Java、Objective-C 等)间建立通信的技术,常用于混合应用开发,允许调用原生功能、获取数据、事件通知及优化性能。SSR(服务器端渲染)的单机 QPS 取决于服务器性能、应用复杂度、网络条件等因素。Egg.js 是基于 Node.js 的企业级框架,通过目录结构约定、启动流程、插件机制和核心组件来初始化应用。前端错误捕获可通过 try-catch、window.onerror、Promise.catch 和 unhandledrejection 事件等方式实现。
|
7天前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
25 8
|
11天前
|
缓存 前端开发 JavaScript
前端性能优化
在前端重构项目中,为提升用户体验和页面响应速度,采用React框架。遇到页面加载慢和白屏问题,主要归因于数据渲染效率低和状态管理复杂。通过路由懒加载减少初次加载时间,使用Redux Toolkit和immer优化状态管理,配合精细化数据缓存策略。此外,借助React.memo和shouldComponentUpdate避免不必要的渲染,并实施预加载和预渲染策略。关键在于性能意识、技术工具选择、状态管理和用户体验优先。前端开发是技术、用户体验和性能的综合艺术,需持续学习和优化。
|
4天前
|
缓存 前端开发 JavaScript
基于JavaScript的前端性能优化技术探讨
基于JavaScript的前端性能优化技术探讨
18 1
|
7天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
9 1
|
7天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
13 0
|
11天前
|
Web App开发 前端开发 UED
前端开发之移动端体验优化
在一个前端项目中,面对移动端网页加载慢的问题,团队使用Chrome开发者工具和Lighthouse进行性能分析,发现资源加载、重绘回流和首屏空白是瓶颈。通过压缩图片和视频、使用懒加载、优化CSS样式、预加载内容及利用阿里云CDN,成功提升加载速度,改善用户体验,强调了前端性能优化的关键性。
86 0
前端开发之移动端体验优化
|
17天前
|
算法 数据安全/隐私保护 计算机视觉
基于二维CS-SCHT变换和LABS方法的水印嵌入和提取算法matlab仿真
该内容包括一个算法的运行展示和详细步骤,使用了MATLAB2022a。算法涉及水印嵌入和提取,利用LAB色彩空间可能用于隐藏水印。水印通过二维CS-SCHT变换、低频系数处理和特定解码策略来提取。代码段展示了水印置乱、图像处理(如噪声、旋转、剪切等攻击)以及水印的逆置乱和提取过程。最后,计算并保存了比特率,用于评估水印的稳健性。
|
1天前
|
机器学习/深度学习 算法 数据安全/隐私保护
基于DCT变换和位平面分解的数字水印嵌入提取算法matlab仿真
这是一个关于数字水印算法的摘要:使用MATLAB2022a实现,结合DCT和位平面分解技术。算法先通过DCT变换将图像转至频域,随后利用位平面分解嵌入水印,确保在图像处理后仍能提取。核心程序包括水印嵌入和提取,以及性能分析部分,通过PSNR和NC指标评估水印在不同噪声条件下的鲁棒性。
|
2天前
|
算法 数据安全/隐私保护 C++
基于二维CS-SCHT变换和扩频方法的彩色图像水印嵌入和提取算法matlab仿真
该内容是关于一个图像水印算法的描述。在MATLAB2022a中运行,算法包括水印的嵌入和提取。首先,RGB图像转换为YUV格式,然后水印通过特定规则嵌入到Y分量中,并经过Arnold置乱增强安全性。水印提取时,经过逆过程恢复,使用了二维CS-SCHT变换和噪声对比度(NC)计算来评估水印的鲁棒性。代码中展示了从RGB到YUV的转换、水印嵌入、JPEG压缩攻击模拟以及水印提取的步骤。