JavaScript队列数据结构详解

 更新时间:2022年07月13日 14:41:42   作者:​ 一碗周​  
这篇文章主要介绍了JavaScript队列数据结构详解,队列是一种先进先出的数据结构,队列中允许两种基础操作,也就是插入和删除,也就是入队和出队

写在前面:

在上一篇文章中介绍了这个数据结构,这篇文章介绍一下队列。

什么是队列?

队列是一种先进先出的数据结构,队列中允许两种基础操作,也就是插入删除,也就是入队出队;我们将队列中允许插入的一端称为队尾、允许删除的一端称为队头

如下图展示了栈这个数据结构:

JavaScript中的队列

JavaScript并没有队列这个数据类型,但是可以通过数组进行模拟,而且数组中提供的push()shift()选项,正好实现先入后出的的操作,

示例代码如下:

const queue = []

// 入队
stack.push(1)
stack.push(2)
// 出队
const v1 = stack.shift() // 1
const v2 = stack.shift() // 2

JavaScript中的应用场景

队列和栈一样,是算法和程序中最常用的辅助结构,其的应用十分广泛,比如以下场景:

  • 现实生活中的排队,就比如说买饭排队,先去的先买,也就是先进先出
  • 银行、营业厅等号叫号,例如:到了营业厅先去排号机哪里排号,然后等待叫号,叫号会依次叫号;
  • JavaScript中的异步任务队列,异步任务队列是一个典型的应用队列的例子。

最近的请求次数

现在我们来做一个力扣的题来熟悉一下队列这个数据结构,这个题是【933. 最近的请求次数】,主要题目描述是写一个 **** 类来计算特定时间范围内最近的请求。

解题思路如下:

  • 在类中创建一个队列,用于保存最近请求;
  • ping时保存请求;
  • 判断队头请求时间是否比t-3000的时间少,如果是则出队,并继续判断,如果不是则返回队列长度。

实现代码如下:

var RecentCounter = function() {
    this.q = []
};

/** 
 * @param {number} t
 * @return {number}
 */
RecentCounter.prototype.ping = function(t) {
    this.q.push(t)
    while(this.q[0] < t - 3000) {
        this.q.shift()
    }
    return this.q.length
};

补充

概念和结构:

  • 队列是一种先进先出(FIFO)的数据结构。
  • 队列的第一个元素所在位置称为队头,最后一个元素所在位置称为队尾
  • 不包含任何元素的队列称为空队列

队列的操作:队列有五种常用操作,分别为:

  • 入队 enqueue(element)
  • 出队 dequeue()
  • 检查队头元素 front()
  • 检查队列是否为空 isEmpty()
  • 获取队列的长度 size()

JS实现:

JS里面的队列结构也是通过数组(Array)来实现的。

function Queue(){
    //私有变量不被外界获取
    let queue = [];
    //入队
    this.enqueue = function(element){
        queue.push(element);
    }
    //出队
    this.dequeue = function(){
        return queue.shift();
    }
    //检查队头元素
    this.front = function(){
        return queue[0];
    }
    //检查队列是否为空
    this.isEmpty = function(){
        return queue.length === 0;
    }
    //获取队列长度
    this.size = function(){
        return queue.length;
    }
}

总结

文本介绍了什么是队列以及JavaScript中可以使用数组模拟队列,在最后还讲解一个力扣中的算法题目。

到此这篇关于JavaScript队列数据结构详解的文章就介绍到这了,更多相关JS队列数据结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS封装的选项卡TAB切换效果示例

    JS封装的选项卡TAB切换效果示例

    这篇文章主要介绍了JS封装的选项卡TAB切换效果,结合实例形式分析了javascript响应鼠标事件动态操作页面元素属性实现tab切换的相关技巧,需要的朋友可以参考下
    2016-09-09
  • JS实现自动定时切换的简洁网页选项卡效果

    JS实现自动定时切换的简洁网页选项卡效果

    这篇文章主要介绍了JS实现自动定时切换的简洁网页选项卡效果,涉及JavaScript基于时间函数定时触发遍历函数实现定时切换功能,需要的朋友可以参考下
    2015-10-10
  • popdiv

    popdiv

    popdiv...
    2006-07-07
  • js实现YouKu的漂亮搜索框效果

    js实现YouKu的漂亮搜索框效果

    这篇文章主要介绍了js实现YouKu的漂亮搜索框效果的方法,通过javascript结合鼠标事件与页面样式实现漂亮的搜索框效果,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • 一文教会你提高Javascript代码效率的技巧

    一文教会你提高Javascript代码效率的技巧

    这篇文章主要给大家介绍了关于提高Javascript代码效率的技巧,通过这些技巧可以提高大家工作效率,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 微信小程序 slot踩坑的解决

    微信小程序 slot踩坑的解决

    这篇文章主要介绍了微信小程序 slot踩坑的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javaScript中的原型解析【推荐】

    javaScript中的原型解析【推荐】

    下面小编就为大家带来一篇javaScript中的原型解析【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 10行原生JS实现文字无缝滚动(超简单)

    10行原生JS实现文字无缝滚动(超简单)

    下面小编就为大家分享一篇10行原生JS实现文字无缝滚动的效果,特别简单,具有很好的参考价值,希望对大家有所帮助
    2018-01-01
  • javascript如何实现create方法

    javascript如何实现create方法

    这篇文章主要介绍了javascript如何实现create方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • js实现星星打分效果的方法

    js实现星星打分效果的方法

    这篇文章主要介绍了js实现星星打分效果的方法,涉及javascript操作页面元素与样式的技巧,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-04-04

最新评论