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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
详解JS数组方法
Nov 20 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
angularjs基础教程
2014/12/25 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
深入理解Node module模块
2018/03/26 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
js实现简易ATM功能
2020/10/27 Javascript
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
劳动工资科岗位职责范本
2014/03/02 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
工作失职检讨书
2015/01/26 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
Vue监视数据的原理详解
2022/02/24 Vue.js
Python Pandas 删除列操作
2022/03/16 Python
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python