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 相关文章推荐
javascript 隔行换色函数代码
Oct 24 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
小程序实现筛子抽奖
May 26 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python中的Cookie模块如何使用
2020/06/04 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
装修五一活动策划案
2014/01/23 职场文书
代办委托书怎样写
2014/04/08 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
长江三峡导游词
2015/01/31 职场文书
大学生年度个人总结
2015/02/15 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
Python基础学习之奇异的GUI对话框
2021/05/27 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript