XingYun blog
  • JS基础

    • 图解js原型链
    • JS Event Loop
    • 对象的底层数据结构
    • 让你的JavaScript代码简单又高效
    • 函数参数按值传递
    • 判断数据类型
    • 浮点数精度问题和解决办法
    • 常用方法snippet
    • 实现Promise
    • 防抖和节流
    • 巧用sort排序
  • CSS && HTML

    • CSS也需要性能优化
    • class命名规范
    • em、px、rem、vh、vw 区别
    • CSS揭秘阅读笔记
  • 浏览器

    • 浏览器是如何渲染页面的
    • 重排和重绘
    • BOM浏览器对象模型
    • DOM事件
    • 浏览器存储
  • 数据结构

    • JS实现链表
    • JS实现栈与栈应用
    • JS实现常见排序
    • 哈夫曼编码
    • MD5算法
  • vue原理浅析

    • Vue虚拟dom与Diff算法
    • 前端打包文件的缓存机制
    • vue数组为什么不是响应式
    • v-for为什么不能用index做key
  • 前端工程化

    • 浏览器是如何渲染页面的
    • 前端打包需要gzip压缩吗
    • 前端打包文件的缓存机制
    • webpack loader和plugin
  • 轮子&&组件库

    • 实现水波浪进度球
  • 文字转语音mp3文件
  • 文件上传前后端实现
  • moment.js给定时间获取自然月、周的时间轴
  • 实现文件上传功能
  • 批量下载照片
  • leaflet改变坐标原点
  • 网络

    • 有了MAC地址 为什么还需要IP地址
    • 为什么IP地址老是变
    • 我们为什么需要IPV6
    • TCP与UDP
  • 计算机组成原理

    • ASCII、Unicode、UTF-8和UTF-16
  • VSCode

    • VSCode图片预览插件 Image preview
    • rsync:linux间的高效传输工具

XingYun

冲!
  • JS基础

    • 图解js原型链
    • JS Event Loop
    • 对象的底层数据结构
    • 让你的JavaScript代码简单又高效
    • 函数参数按值传递
    • 判断数据类型
    • 浮点数精度问题和解决办法
    • 常用方法snippet
    • 实现Promise
    • 防抖和节流
    • 巧用sort排序
  • CSS && HTML

    • CSS也需要性能优化
    • class命名规范
    • em、px、rem、vh、vw 区别
    • CSS揭秘阅读笔记
  • 浏览器

    • 浏览器是如何渲染页面的
    • 重排和重绘
    • BOM浏览器对象模型
    • DOM事件
    • 浏览器存储
  • 数据结构

    • JS实现链表
    • JS实现栈与栈应用
    • JS实现常见排序
    • 哈夫曼编码
    • MD5算法
  • vue原理浅析

    • Vue虚拟dom与Diff算法
    • 前端打包文件的缓存机制
    • vue数组为什么不是响应式
    • v-for为什么不能用index做key
  • 前端工程化

    • 浏览器是如何渲染页面的
    • 前端打包需要gzip压缩吗
    • 前端打包文件的缓存机制
    • webpack loader和plugin
  • 轮子&&组件库

    • 实现水波浪进度球
  • 文字转语音mp3文件
  • 文件上传前后端实现
  • moment.js给定时间获取自然月、周的时间轴
  • 实现文件上传功能
  • 批量下载照片
  • leaflet改变坐标原点
  • 网络

    • 有了MAC地址 为什么还需要IP地址
    • 为什么IP地址老是变
    • 我们为什么需要IPV6
    • TCP与UDP
  • 计算机组成原理

    • ASCII、Unicode、UTF-8和UTF-16
  • VSCode

    • VSCode图片预览插件 Image preview
    • rsync:linux间的高效传输工具
  • 算法图解阅读笔记
  • MD5算法
  • JS实现常见排序
  • 邓俊辉算法与数据结构
  • JS实现队列
    • JS实现树的几种遍历方式
    • 二叉树相关
    • 哈希算法
    • 进制转换与js实现
    • JS实现链表
    • JS实现栈与栈应用
    • 算法与数据结构
    XingYun
    2022-03-30
    目录

    JS实现队列

    队列是一种先进先出(FIFO)的数据结构。通常用来描述算法或生活中的一些先进先出的场景,比如:

    • 在 JavaScript 事件循环(Event Loop)中有一个事件队列(Task Queue)处理各种异步事件。
    • 现实中排队相关场景。

    class Queue {
      // queue 用于记录数组,
      let queue = []
      // 入队
      this.enqueue = function (element) {
        queue.push(element)
      }
      // 出队
      this.dequeue = function () {
        return queue.shift()
      }
      // 查看队列的第一个元素
      this.front = function () {
        return queue[0]
      }
      // 查看队列是否为空
      this.isEmpty = function () {
        return queue.length == 0
      }
      // 查看队列的长度
      this.size = function () {
        return queue.length
      }
      // 将数组转为字符串并放回
      this.toString = function () {
        return queue.toString()
      }
    }
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29

    # 优先队列(权重与插队)

    普通的队列类就是调用原生 Array 对象的方法,比较简单,还有一种队列叫优先队列。现实生活中去医院排队,如果大家都死板的按照顺序排队,新来一个车祸重伤员,1 小时内不治疗就会死,很明显医院应该优先医治这个重伤患者。在优先队列里,使用优先级(priority)来描述严重程度。

    class PriorityQueue {
      let queue = []
    
      // 利用构造器函数创建队列元素
      let QueueElement = function(element, priority) {
        this.element = element
        this.priority = priority
      }
    
      this.enqueue = function(element, priority) {
        let queueElement = new QueueElement(element, priority)
    
        // 张三的情况
        if (this.isEmpty()) {
          queue.push(queueElement)
        } else {
          let added = false
          for (let i = 0; i < queue.length; i++) {
            if (queueElement.priority < queue[i].priority) {
              queue.splice(i, 0, queueElement)
              added = true
              break
            }
          }
    
          // 王五的情况
          if (!added) {
            queue.push(queueElement)
          }
        }
      }
    
      // ... 其它方法与普通队列相同
    
      // 打印这个队列成员时 加上优先级信息
      this.toString = function() {
        let string = ''
        for (let i = 0; i < queue.length; i++) {
          string +=
            queue[i].element +
            '-' +
            queue[i].priority +
            (queue.length - i > 1 ? ',' : '')
        }
        return string
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47

    # 应用:击鼓传花游戏

    规则与实现过程

    1. 利用队列类,创建一个队列。
    2. 把当前玩击鼓传花游戏的所有人都放进队列。
    3. 给定一个数字,迭代队列,从队列的开头移除一项,添加到队列的尾部(如游戏就是:你把花传给旁边的人,你就可以安全了)。
    4. 一旦迭代次数到达,那么这时拿着花的这个人就会被淘汰。
    5. 最后剩下一个人,这个人就是胜利者。
    // 循环队列(击鼓传花)
    function hotPotato(nameList, num) {
      let queue = new Queue() //{1} //
      for (let i = 0; i < nameList.length; i++) {
        queue.enqueue(nameList[i]) // {2}
      }
      let current = ''
      while (queue.size() > 1) {
        // 把队列num之前的项按照优先级添加到队列的后面
        for (let i = 0; i < num; i++) {
          queue.enqueue(queue.dequeue()) // {3}
        }
        current = queue.dequeue() // {4}
        console.log(current + '在击鼓传花游戏中被淘汰')
      }
      return queue.dequeue() // {5}
    }
    let names = ['John', 'Jack', 'rose', 'xiaoMing', 'Baobo']
    let winner = hotPotato(names, 7)
    console.log('获胜者是:' + winner)
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    上次更新: 2023/04/05, 09:41:10
    邓俊辉算法与数据结构
    JS实现树的几种遍历方式

    ← 邓俊辉算法与数据结构 JS实现树的几种遍历方式→

    最近更新
    01
    JavaScript-test
    07-20
    02
    二维码的原理
    07-20
    03
    利用ChatGPT优化代码
    07-20
    更多文章>
    Theme by Vdoing | Copyright © 2021-2023 XingYun | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式