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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
Vue.js基础知识小结
Jan 13 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
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学习之PHP运算符
2006/10/09 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
优化PHP程序的方法小结
2012/02/23 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
python中__call__方法示例分析
2014/10/11 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
python实现3D地图可视化
2020/03/25 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
人力资源总监工作说明
2014/03/03 职场文书
yy婚礼主持词
2014/03/14 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
大学生党员个人总结
2015/02/13 职场文书
花田少年史观后感
2015/06/16 职场文书
酒店温馨提示语
2015/07/14 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
《法国号》教学反思
2016/02/22 职场文书