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 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
浅析vue component 组件使用
Mar 06 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 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
PHPlet在Windows下的安装
2006/10/09 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
利用jQuery解析获取JSON数据
2017/04/08 jQuery
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
浅谈python标准库--functools.partial
2019/03/13 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
Python jieba库分词模式实例用法
2021/01/13 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
2015年转正工作总结范文
2015/04/02 职场文书