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 相关文章推荐
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
javaScript把其它类型转换为Number类型
Oct 13 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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缓存技术介绍
2006/11/25 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
php工具型代码之印章抠图
2018/07/18 PHP
Gird事件机制初级读本
2007/03/10 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Django框架 Pagination分页实现代码实例
2019/09/04 Python
python 动态调用函数实例解析
2019/10/21 Python
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
污水厂厂长岗位职责
2014/01/04 职场文书
入党申请自荐书范文
2014/02/11 职场文书
2014年端午节活动方案
2014/03/11 职场文书
幼儿评语大全
2014/04/30 职场文书
利用python做表格数据处理
2021/04/13 Python