前言

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

为啥要考算法?

  1. 算法是通用技能,包含了诸多逻辑和相关的技术点,优秀的算法方案会体现出优秀的逻辑思维和和解决问题的能力。
  2. 扎实的算法有助于我们在解决复杂问题时获得更优的解决方案。

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

一、冒泡算法

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

排序规则

  1. 每次循环,比较当前位置项与下一个位置项的大小,如果当前项 > 后一项,则交换两者的位置。每次循环比较都能选择出一个最大值,放在末尾,剩余待筛选的比较项就减少一项。
  2. 如果数组存在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]
    解构赋值和扩展运算符,为不影响原数组,使用该方式接收原数组元素
  2. [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)

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流...

胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。

胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!

长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!

前端面试题解密:经典算法之冒泡算法(ES6版)及优化的更多相关文章

  1. C语言——<算法>_冒泡算法的使用及理解

    对数组内数值进行有规则排序时,就要用冒泡算法,也是比较简单的一个算法 #include <stdio.h> #include <stdlib.h> int main() { i ...

  2. Python - Python算法之冒泡算法的超简单实现

    [原创]转载请注明作者Johnthegreat和本文链接 冒泡排序在算法中算是最简单也最容易实现的,这里介绍一个非常简单实现的代码: def bubble_sort(ls): for first in ...

  3. C#冒泡算法复习

    C#冒泡算法复习 冒泡算法的意思:每一趟找到一个最小或最大的数放到最后面,比较总数的n-1次(因为比较是2个双双比较的) 第一层循环表示进行比较的次数,总共要比较(数的)-1次 (因为比较是2个双双比 ...

  4. Shell数组以及排序算法(冒泡、直接选择、反转)

    Shell数组以及排序算法(冒泡.直接选择.反转) 目录 Shell数组以及排序算法(冒泡.直接选择.反转) 一.数组概述 1. 数组的定义 2. 下标的定义 3. 数组的特点 4. 数组定义的方法 ...

  5. java:高速排序算法与冒泡排序算法

     Java:高速排序算法与冒泡算法 首先看下,冒泡排序算法与高速排序算法的效率: 例如以下的是main方法: /**   *  * @Description:  * @author:cuiyaon ...

  6. 排序算法| Array.sort()算法规则

    1.js的Array.sort()是使用什么算法排序: 1.火狐中是“归并排序” 2.V8引擎是 “插入排序和快速排序结合”.数组长度不超过10时,使用插入排序.长度超过10使用快速排序.在数组较短时 ...

  7. 经典面试题(二)附答案 算法+数据结构+代码 微软Microsoft、谷歌Google、百度、腾讯

    1.正整数序列Q中的每个元素都至少能被正整数a和b中的一个整除,现给定a和b,需要计算出Q中的前几项, 例如,当a=3,b=5,N=6时,序列为3,5,6,9,10,12 (1).设计一个函数void ...

  8. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  9. web前端面试试题总结---其他

    其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy ...

随机推荐

  1. 学会了这些redis知识点,面试官会觉得你很nb(转自十年技术大牛)

    是数据结构而非类型 很多文章都会说,redis支持5种常用的数据类型,这其实是存在很大的歧义.redis里存的都是二进制数据,其实就是字节数组(byte[]),这些字节数据是没有数据类型的,只有把它们 ...

  2. Leetcode 1160: 拼写单词

    给你一份『词汇表』(字符串数组) words 和一张『字母表』(字符串) chars. 假如你可以用 chars 中的『字母』(字符)拼写出 words 中的某个『单词』(字符串),那么我们就认为你掌 ...

  3. js 小练习题

    <script> /*1.结论,IIFE中运行顺序3,1,执行test(4),会传递参数*/ /*var a=5; var test = (function(a){ console.log ...

  4. celery订单定时回滚

    目录 订单回滚 控制执行(多少时间后执行) celery异步定时任务 订单回滚 用celery异步,定时任务.可以设置:如果下单15分钟后没有支付,则取消订单.做反向操作 控制执行(多少时间后执行) ...

  5. JavaScript 预编译与作用域

    JavaScript 预编译与作用域 JavaScript 预编译的过程和作用域的分析步骤是 JS 学习中重要的一环,能够帮助我们知道代码的执行顺序,更好理解闭包的概念 预编译 JavaScript ...

  6. 动手建立jdbc连接

    工具:Idea  Navicat 环境:jdk 1.8  mysql-5.7.27-winx64 创建一个project 打开navicat开启连接. 在idea中导入数据库. 导入好后可以开始连接了 ...

  7. 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

  8. K:剑指offer-56 题解 谁说数字电路的知识不能用到算法中?从次数统计到数字电路公式推导,一文包你全懂

    前言: 本题解整理了一位大佬在leetcode中的代码的方法,该博文致力于让所有人都能够能够看懂该方法.为此,本题解将从统计数字出现次数的解题方式开始讲起,再推导出逐位统计的解题方式,期望以循序渐进的 ...

  9. python浅学【网络服务中间件】之RabbitMQ

    一.关于AMQP: AMQP,即Advanced Message Queuing Protocol,高级消息队列协议. AMQP使符合要求的客户端应用程序能够与符合要求的消息传递中间件代理进行通信. ...

  10. python-文本字符串

    2019-12-05 14:41:36 一.Unicode 编码问题一直都是文本处理的时候的大难题,python2中的编码异常混乱,本章节主要讨论python3中的编码情况. python3 str的 ...