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判断IE6等浏览器的代码
Apr 05 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP无限分类(树形类)
2013/09/28 PHP
php发送post请求的三种方法
2014/02/11 PHP
splice slice区别
2006/10/09 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
Javascript调用C#代码
2011/01/17 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
vuex入门最详细整理
2020/03/04 Javascript
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python画环形图的方法
2020/03/25 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Python实现京东抢秒杀功能
2021/01/25 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
德国拖鞋网站:German Slippers
2019/11/08 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Javascript中的解构赋值语法详解
2021/04/02 Javascript