JavaScript实现队列结构过程


Posted in Javascript onDecember 06, 2021

一、认识队列

前面的博客已经讲了受限的数据结构—栈,现在,我们再来看看队列(Queue)。

  • 它是受限的线性表,先进先出(FIFO),即first in first out
  • 受限之处在于它只允许在表的前端(front)进行删除操作。
  • 而在表的后端(rear)进行插入操作。

其结构图可以表示为:

JavaScript实现队列结构过程

生活中类似于队列的:例如:当我们在排队买东西的时候,先到先买一样。

二、封装队列

这里也采用数组的方式实现队列结构,首先,创建一个类。

function Queue(){
            
        }

在其内部添加属性和方法,将数组通过属性的方法添加给该类。然后采用原型的方法添加常用的操作。

队列常用的操作有:

  • enqueue(element):向队列尾部添加一个(或多个)新的项
  • dequeue() :移除队列的第一(即排在队列最前面的)项,并且返回被移除的元素
  • front() :返回队列中第一个元素----最先被添加,也将是最先被移除的元素
  • isEmpty() :如果队列中不包含任何元素,返回true,否则,返回false
  • size() :返回队列包含的元素个数
  • toString() :将队列中的内容,转化成字符串形式

现在就来具体实现:

function Queue(){
     this.items = [];
     //向队列尾部添加一个(或多个)新的项 enqueue()
     Queue.prototype.enqueue = function(element){
         this.items.push(element);
     }
     //移除队列的第一(即排在队列最前面的)项dequeue()
     Queue.prototype.dequeue = function(){
          return this.items.shift();
      }
     //返回队列中第一个元素 front()
     Queue.prototype.front = function() {
          return this.items[0];
      }
     //判断栈是否空isEmpty()
     Queue.prototype.isEmpty = function(){
         return this.items.length == 0;
     }
     //返回队列包含的元素个数 size()
     Queue.prototype.size = function(){
         return this.items.length;
     }
     //将队列中的内容,转化成字符串形式 toString()
     Queue.prototype.toString  = function(){
         var str = '';
         for(var i =0;i<this.items.length;i++){
             str += this.items[i] + ' ';
         }
         return str;
     }
 }

以上就是队列的封装,现在进行验证:

var queue = new Queue();
 queue.enqueue(10);
 queue.enqueue(20);
 queue.enqueue(30);
 queue.enqueue(40);
 queue.enqueue(50);
 console.log(queue);
 console.log('移除的第一项是:'+queue.dequeue());
 console.log('队列中的第一个元素是:'+queue.front());
 console.log('栈是否为空:'+queue.isEmpty());
 console.log('栈结构的内容为:');
 console.log(queue.toString());

输出的结果为:

JavaScript实现队列结构过程

构建成功。

来看一个击鼓传花的案例吧!

三、击鼓传花案列

原游戏规则:

  • 班级中玩一个游戏,所有学生围成一圈,从某位同学手里开始像旁边的同学传一束花
  • 此时一个人在击鼓,当鼓声停下的时候,花落在谁手里,谁就被惩罚。

修改游戏规则:

  • 几个朋友一起玩游戏,围成一圈,开始数数,数到某个数字的人自动淘汰
  • 最后剩下的这个人获得胜利,判断最后剩下的是原来在哪一个位置上的人?

封装一个基于队列的函数:

  • 参数:所有参与人的姓名,基于的数字
  • 结果:最终剩下的人的姓名

代码如下:

// 封装队列
 function Queue(){
     this.items = [];
     //末尾添加元素
     Queue.prototype.enqueue = function(element){
         this.items.push(element);
     }
     //移除第一个元素
     Queue.prototype.dequeue = function(){
         return this.items.shift();
     }
     //返回第一个元素
     Queue.prototype.front = function(){
         return this.items[0];
     }
     //返回队列包含的元素个数
     Queue.prototype.size = function(){
         return this.items.length;
     }
 }
 
 function passGame(nameList,num){
     // 创建队列
     var queue = new Queue();
     //将所有的人添加到队列
     for(var i = 0;i<nameList.length;i++){
         queue.enqueue(nameList[i]);
     }
     //进行游戏
    while(queue.size() > 1){
         //num数字之前的人重新添加到队列末尾
         for(var i =1;i<num;i++){
             queue.enqueue(queue.dequeue());
         }
       //num数字的人直接移除
         queue.dequeue();
    }
    //获取获胜者信息
    var endName = queue.front();
    console.log('最终剩下的人是:'+endName);
    return nameList.indexOf(endName);
 }
 
 //进行测试
 var nameList = ['a','b','c','d','e'];
 var g = passGame(nameList,5);
 console.log('这个人的位置是:'+g);

输出结果为:

JavaScript实现队列结构过程

到此这篇关于JavaScript实现队列结构过程的文章就介绍到这了,更多相关JavaScript实现队列结构内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
javascript 贪吃蛇实现代码
Nov 22 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
JavaScript实现栈结构详细过程
Dec 06 #Javascript
JavaScript实现优先级队列
Dec 06 #Javascript
JavaScript阻止事件冒泡的方法
Dec 06 #Javascript
JavaScript执行机制详细介绍
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 #Vue.js
JavaScript 与 TypeScript之间的联系
JavaScript利用html5新方法操作元素类名详解
Nov 27 #Javascript
You might like
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
cmd下运行php脚本
2008/11/25 PHP
基于header的一些常用指令详解
2013/06/06 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Python 的 Socket 编程
2015/03/24 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python如何写try语句
2020/07/14 Python
类的返射机制中的包及核心类
2016/09/12 面试题
销售人员自我评价怎么写
2013/09/19 职场文书
自荐信如何“自荐”
2013/10/24 职场文书
消防宣传口号
2014/06/16 职场文书
党校学习心得体会范文
2014/09/09 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
政协常委会议主持词
2015/07/03 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB