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 THICKBOX弹出层插件
Aug 30 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 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
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
python一键去抖音视频水印工具
2018/09/14 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python基于requests库爬取网站信息
2020/03/02 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python与pycharm有何区别
2020/07/01 Python
python实现双人五子棋(终端版)
2020/12/30 Python
什么是唯一索引
2015/07/05 面试题
sort命令的作用和用法
2013/08/25 面试题
公司晚宴祝酒词
2015/08/11 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
javascript对象3个属性特征
2021/11/17 Javascript
JavaScript实现队列结构过程
2021/12/06 Javascript
APP界面设计技巧和注意事项
2022/04/29 杂记