前端面试题解密:经典算法之冒泡算法(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)


相关文章
|
缓存 前端开发 UED
如何优化前端性能以提高加载速度
前端性能优化对提升网站加载速度至关重要,直接影响用户体验、SEO排名和转化率。本文介绍了优化前端加载速度的关键技巧,包括最小化HTTP请求、使用CDN、优化图片、利用浏览器缓存、压缩文件和实现懒加载。通过这些方法,可以显著减少页面加载时间,提高网站的整体性能和用户满意度。
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
1813 80
|
缓存 监控 前端开发
前端性能优化:现代框架的关键策略
前端性能优化:现代框架的关键策略
658 74
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅的用户体验
前端性能优化:打造流畅的用户体验
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
521 5
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
1459 4
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
搜索推荐 前端开发 定位技术
前端开发人员SEO优化技术方案
不同的搜索引擎提供了服务后台常见功能来优化网站搜索
447 2

热门文章

最新文章