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 相关文章推荐
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
js点击选择文本的方法
Feb 09 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
js仿淘宝放大镜效果
Dec 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
layui复选框的全选与取消实现方法
2019/09/02 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python把转列表为集合的方法
2019/06/28 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
详解python对象之间的交互
2020/09/29 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
销售自我评价
2013/10/22 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
单位租房协议范本
2014/12/03 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
创业计划书之校园超市
2019/09/12 职场文书