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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
简单的js表格操作
Sep 24 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
vue实现两个组件之间数据共享和修改操作
Nov 12 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
详解Python编程中time模块的使用
2015/11/20 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
优秀的茶餐厅创业计划书
2014/01/03 职场文书
党校培训自我鉴定
2014/02/01 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
银行求职自荐书
2014/06/25 职场文书
明星员工获奖感言
2014/08/14 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS