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 相关文章推荐
jQuery1.6 使用方法一
Nov 23 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 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获取数组长度或某个值出现次数的方法
2015/02/11 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python导入oracle数据的方法
2015/07/10 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python安装及变量名介绍详解
2020/12/12 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
乱世佳人观后感
2015/06/08 职场文书
运动员代表致辞
2015/07/29 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
《失物招领》教学反思
2016/02/20 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Python基础详解之邮件处理
2021/04/28 Python