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队列数据结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript时间与时间戳的转换操作实例分析

    JavaScript时间与时间戳的转换操作实例分析

    这篇文章主要介绍了JavaScript时间与时间戳的转换操作,结合实例形式分析了javascript日期与时间戳转换相关函数与操作技巧,需要的朋友可以参考下
    2018-12-12
  • JS中var let声明范围区别详解

    JS中var let声明范围区别详解

    这篇文章主要为大家介绍了JS中var let声明范围区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • js实现html table 行,列锁定的简单实例

    js实现html table 行,列锁定的简单实例

    下面小编就为大家带来一篇js实现html table 行,列锁定的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • js opener的使用详解

    js opener的使用详解

    在JS中,window.opener只是对弹出窗口的母窗口的一个引用。本篇文章主要是对js中opener的使用进行了详细介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • Web前端开发之水印、图片验证码

    Web前端开发之水印、图片验证码

    这篇文章主要介绍了Web前端开发之水印、图片验证码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • JS限制文本框只能输入数字和字母方法

    JS限制文本框只能输入数字和字母方法

    这篇文章主要介绍了JS限制文本框只能输入数字和字母方法,本文给出了限制只能输入数字、限制只能输入字母、限制只能输入数字和字母3种脚本,需要的朋友可以参考下
    2015-02-02
  • 8种现代JavaScript响应式模式小结

    8种现代JavaScript响应式模式小结

    响应式的本质是关于系统如何对数据变化做出反应,并且存在不同类型的响应式,本文就来介绍8种现代JavaScript响应式模式小结,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • 微信小程序用户授权环节实现过程

    微信小程序用户授权环节实现过程

    这篇文章主要介绍了微信小程序用户授权环节实现过程,在商城项目中,我们需要对部分的页面,进行一个授权的判别,例如购物车,及个人中心,需要完成用户信息的授权后,获取到相关信息
    2023-01-01
  • JavaScript对象拷贝与Object.assign用法实例分析

    JavaScript对象拷贝与Object.assign用法实例分析

    这篇文章主要介绍了JavaScript对象拷贝与Object.assign用法,结合实例形式分析了javascript深拷贝与浅拷贝以及Object.assign的功能与相关使用技巧,需要的朋友可以参考下
    2018-06-06
  • 浅谈webpack devtool里的7种SourceMap模式

    浅谈webpack devtool里的7种SourceMap模式

    这篇文章主要介绍了浅谈webpack devtool里的7种SourceMap模式,主要介绍了这7种模式的使用和打包编译后的结果的不同,非常具有实用价值,有兴趣的可以了解一下
    2019-01-01

最新评论