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下判断IE与FF的比较简单的方式
Oct 17 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python中for循环详解
2014/01/17 Python
Python打印斐波拉契数列实例
2015/07/07 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
幼儿园消防安全制度
2014/01/26 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
网络教育自我鉴定
2014/02/04 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
学校火灾防控方案
2014/06/09 职场文书
英语辞职信范文
2015/02/28 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers