JS 数据结构：队列

最新推荐文章于 2023-06-05 17:19:43 发布
最新推荐文章于 2023-06-05 17:19:43 发布
阅读量2.3k 收藏 5
点赞数 1
分类专栏： 数据结构 文章标签： 数据结构 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46015333/article/details/127995994
版权

队列

定义： 队列(Queue) 是一种只在表的一端进行插入，而在另一端进行删除的数据结构。

  • 队头(front) 允许删除的一端，永远指向第一个元素前一个位置。
  • 队尾(rear) 允许插入的一端，永远是指向队列最后一个元素
  • 先进先出(First In First Out)的线性表，简称FIFO表
  • 空队列 当队列中没有元素

在这里插入图片描述

上溢和下溢

当队列满时再入队会产生空间溢出，简称“上溢”;当队列空时再出队也会产生溢出，简称“下溢”。上溢是一种出错状态，应该避免；下溢则是正常现象。
假上溢：

  • 因为在入队和出队的操作中，头尾指针只增加不减小，致使被删除元素的空间永远无法重新利用。因此，尽管队列中实际的元素个数远远小于向量空间的规模，但也可能由于尾指针巳超出向量空间的上界而不能做入队操作。该现象称为假上溢。
    在这里插入图片描述
    队尾指针为5，队头指针为1，此时尾指针已经指向了顺序队列最后一个元素，但可以看到0，1两个
    并没有被使用，此时就为假上溢。

顺序队列

定义： 队列的顺序存储结构简称顺序队列。

完整代码

基于 JS 数组实现，由于 JS 数组能够自动扩容，所以没有上溢问题。并且原生实现了队列方法。

class ArrayQueue {
  constructor() {
    this.queue = [];
  }
  // 入队
  enqueue(value) {
    return this.queue.push(value);
  }
  // 出队
  dequeue() {
    return this.queue.shift();
  }
  // 取队头元素
  peek() {
    return this.queue[0];
  }
  // 判断队列是否为空
  isEmpty() {
    return this.queue.length === 0;
  }
  // 取队列有多少个元素
  size() {
    return this.queue.length;
  }
  // 清空队列
  clear() {
    this.queue = [];
  }
}

基于 JS 对象实现。不存在上溢和假上溢问题。

class ObjectQueue {
  constructor() {
    this.queue = {};
    this.end = -1;
    this.front = -1;
  }
   // 入队
  enqueue(value) {
    if (this.front === -1) {
      this.front++;
    }
    this.queue[++this.end] = value;
  }
  // 出队
  dequeue() {
    if (!this.isEmpty()) {
      const res = this.queue[this.front];
      delete this.queue[this.front++];
      return res;
    }
    return null;
  }
  // 取队头元素
  peek() {
    if (!this.isEmpty()) {
      return this.queue[this.front];
    }
    return null;
  }
  // 判断队列是否为空
  isEmpty() {
    return this.front > this.end;
  }
  // 取队列有多少个元素
  size() {
    return this.end - this.front + 1;
  }
  // 清空队列
  clear() {
    this.queue = {};
    this.front = -1;
    this.end = -1;
  }
}

循环队列

为了解决假上溢问题，引入循环队列，即把向量空间想象为一个首尾相接的圆环，在循环队列中进行出队、入队操作时，头尾指针仍要加1，朝前移动。只不过当头尾指针指向向量上界（MAXNUM-1）时，其加1操作的结果是指向向量的下界0。

但是引进的循环队列又出现了新的问题，看图：在这里插入图片描述

判空和判满两种方法

即队空和队满的时都满足q->front==q->rear，我们无法利用这个条件判断队空还是队满！！！该怎么解决这个问题呢？有两种方法：

  1. 少用一个数据元素空间，以队尾指示器加 l等于队头指示器判断队满，即队满条件为:
    (q-> rear+l)％MAXNUM==q->front
  2. 使用一个计数器记录队列中元素的总数（实际上是队列长度）。

第一种方法实现

class LoopArrayQueue{
  constructor() {
    this.MAXNUM = 5;
    this.queue = new Array(this.MAXNUM);
    this.front = 0;
    this.rear = 0;
  }
  // 入队
  enqueue(value) {
    if ((this.rear + 1) % this.MAXNUM === this.front) {
      console.log('队列已满，入队失败');
      return;
    }
    this.rear++;
    this.queue[this.rear % this.MAXNUM] = value;
  }
  // 出队
  dequeue() {
  	if(!this.isEmpty()) {
    	this.front++;
    	const res = this.queue[this.front % this.MAXNUM];
    	this.queue[this.front % this.MAXNUM] = undefined;
    	return res;
    }
    return undefined;
  }
  // 取队头元素
  peek() {
    return this.queue[(this.front + 1) % this.MAXNUM];
  }
  // 判断队列是否为空
  isEmpty() {
    return this.front === this.rear;
  }
  // 取队列有多少个元素
  size() {
    return this.rear - this.front;
  }
  // 清空队列
  clear() {
    this.queue = new Array(this.MAXNUM);
    this.front = 0;
    this.rear = 0;
  }
}

第二种方法实现

class LoopArrayQueue{
  constructor() {
    this.MAXNUM = 5;
    this.queue = new Array(this.MAXNUM);
    this.front = -1;
    this.rear = -1;
    this.count = 0;
  }
  // 入队
  enqueue(value) {
    if (this.count === this.MAXNUM) {
      console.log('队列已满，入队失败');
      return;
    }
    this.count++;
    this.rear++;
    this.queue[this.rear % this.MAXNUM] = value;
  }
  // 出队
  dequeue() {
    if (this.count > 0){
      this.front++;
      this.count--;
      const res = this.queue[this.front % this.MAXNUM];
      this.queue[this.front % this.MAXNUM] = undefined;
      return res;
    }
    return undefined;
  }
  // 取队头元素
  peek() {
    return this.queue[(this.front + 1) % this.MAXNUM];
  }
  // 判断队列是否为空
  isEmpty() {
    return this.count === 0;
  }
  // 取队列有多少个元素
  size() {
    return this.count;
  }
  // 清空队列
  clear() {
    this.count = 0;
    this.front = -1;
    this.rear = -1;
    this.queue = new Array(this.MAXNUM);
  }
}

链队列

定义： 队列的链式存储结构简称为链队列，它是限制仅在表头删除和表尾插入的单链表。 显然仅有单链表的头指针不便于在表尾做插入操作，为此再增加一个尾指针，指向链表的最后一个结点。于是，一个链队列由头指针和尾指针唯一确定。
在这里插入图片描述

注意：虽然 JS 并没有指针的概念，但是对于对象这样的类型，对象的名字本质上就相当于指针。

虽然 JS 中数组实现了在队列的方法，但是它本质上还是数组操作，所以若从数组头部删除一个元素，那么在 JS 引擎内部还是需要移动后边的数组元素，很耗费性能。但是链式存储结构删除和添加元素复杂度为 O1。

节点存储结构：

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

判断队空
注意：有 JS 本身并无指针概念，所以再实现“链队”时必须要定义一个变量 count 记录队列中元素个数，由 count == 0 作为判空条件。

而其他语言（例如 c 语言）链队队空条件是pointer->front->next == NULL && pointer->rear->next == NULL而不是pointer->front == pointer->rear这是因为当队空的时候pointer->front和pointer->rear的值不一样。

原因： 如上图所示，当创建空链队时，队列头指针、尾指针都指向上图中黑色节点（这个黑色节点相当于顺序队列的-1，是一个初始节点），当链队列添加元素后尾指针会改变它指向的节点，此时pointer->rear的值是它指向的尾结点的地址。而当队列删除元素时，改变的是黑色节点的 next 指针（这样做是为了使头指针满足它的特点，具体看上边队列特点），这样pointer->front的值永远是黑色节点的地址。所以pointer->front和pointer->rear的值不一样，不能作为判断队空的条件。

出队列：

当使用其它语言（例如 c 语言）时此功能需要注意的就是当队列只剩一个元素时，即pointer->front->next == pointer->rear，而你要删除此元素，就需要先改变尾指针指向的节点，再删除，释放最后一个元素节点的内存。因为如果你不改变的话，则尾指针是指向最后一个元素节点的，而你删除释放最后一个元素节点的内存后，此时pointer->rear->next是一个野指针（野指针的危害就不用我说了吧！！！）。

完整代码

class LinkQueue {
  constructor() {
    const node = new Node();
    this.count = 0;
    this.head = node;
    this.rear = node;
  }
  // 入队
  enqueue(value) {
    const node = new Node(value);
    this.rear.next = node;
    this.rear = node;
    this.count++;
  }
  // 出队
  dequeue() {
    if (!this.isEmpty()) {
      const res = this.head.next.value;
      this.head.next = this.head.next.next;
      this.count--;
      if (this.isEmpty()) {
        this.rear = this.head;
      }
      return res;
    }
    return null;
  }
  // 取队头元素
  peek() {
    if (!this.isEmpty()) {
      return this.head.value;
    }
    return null;
  }
  // 判断是否为空
  isEmpty() {
    return this.count === 0;
  }
  // 返回队列元素个数
  size() {
    return this.count;
  }
  // 清空队列
  clear() {
    const node = new Node();
    this.count = 0;
    this.head = node;
    this.rear = node;
  }
}

双端队列

在这里插入图片描述

双端队列（deque）是一种允许我们同时从队列前端和后端添加和移除元素的特殊队列。即可以在队头入队、出队，也可在队尾入队、出队。

class ArrayDequeue {
  constructor() {
    this.queue = [];
  }
  // 从队头入队
  adFront(value) {
    this.queue.unshift(value);
  }
  // 从队尾入队
  addBack(value) {
    this.queue.push(value);
  }
  // 从队头出队
  removeFront() {
    return this.queue.shif();
  }
  // 从队尾出队
  removeBack() {
    return this.queue.pop();
  }
  // 返回队头元素
  removeFront() {
    return this.queue[0];
  }
  // 返回队尾元素
  removeBack() {
    return this.queue[this.queue.length - 1];
  }
  // 判断队列是否为空
  isEmpty() {
    return this.queue.length === 0;
  }
  // 取队列有多少个元素
  size() {
    return this.queue.length;
  }
  // 清空队列
  clear() {
    this.queue = [];
  }
}

相信经过栈和队列的学习，你已经感受到了 JS 数组的强大，其本身还具有很多方法，能够让我们更加方便的操控数组元素，可以看看这篇博客哦！总结 JS 数组及其方法

队列讲到这里就结束了。概念很好理解，重要的还是实现时候的细节需要仔细把控。我是孤城浪人，一名正在前端路上摸爬滚打的菜鸟，欢迎你的关注。

孤城浪人
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js实现队列
ssjjrr的博客
02-02 985
js实现队列
JS 实现队列
qq_38427709的博客
05-19 6165
通过JS实现队列的数据结构，首先是最普通的队列，先入先出 // 队列 function createQueue() { // 队列 let queue = [] // 入队 const enQueue = (data) => { if(data == null) return queue.push(data) } // 出队 const deQueue = () => { if(queue.length === 0) return
JavaScript实现队列结构（Queue）
qwe02315的博客
04-10 767
队列是是一种受限的线性表，特点为先进先出FIFO受限之处在于它只允许在表的前端（front）进行删除操作；在表的后端（rear）进行插入操作；相当于排队买票，先来的先买票，后来的后买票。打印队列：计算机打印多个文件的时候，需要排队打印；线程队列：当开启多线程时，当新开启的线程所需的资源不足时就先放入线程队列，等待CPU处理；队列的实现和栈一样，有两种方案：基于数组实现；基于链表实现；enqueue（element）：向队列尾部添加一个（或多个）新的项；
Javascript实现队列
weixin_63896561的博客
09-04 1303
JS实现数据结构-队列
js实现队列结构
weixin_52797317的博客
11-13 452
类似与生活中的排队，先进入队伍的就会优先获得服务，然后先离开队伍，后来的就排在队尾。1.通过数组实现队列。2.通过对象实现队列。
【数据结构】JavaScript队列实现
流星雨的博客
02-09 1910
队列是一种常见的数据结构，常用于线程并发处理、消息处理(包括android的Handle)等，本文参考java jdk源码，在JavaScript中实现这种数据结构。
JavaScript中数据结构与算法(二)：队列
10-24
主要介绍了JavaScript中数据结构与算法(二)：队列,队列是只允许在一端进行插入操作,另一个进行删除操作的线性表,队列是一种先进先出（First-In-First-Out，FIFO）的数据结构,需要的朋友可以参考下
数据结构-使用javascript讲解数据结构之队列.zip
最新发布
02-12
数据结构 数据结构_使用javascript讲解数据结构之队列
JavaScript数据结构之优先队列与循环队列实例详解
10-19
优先队列和循环队列是两种重要的数据结构，在JavaScript中有着广泛的应用。它们分别用于处理具有不同优先级的元素和实现高效循环访问的序列。下面将详细介绍这两种数据结构的原理、定义以及如何在JavaScript中实现。...
基于JavaScript的数据结构队列动画实现示例解析
10-14
主要介绍了基于JavaScript的数据结构队列动画实现示例解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JS实现队列的先进先出功能示例
10-19
主要介绍了JS实现队列的先进先出功能,结合实例形式分析了基于JS的队列初始化、赋值等相关操作技巧,需要的朋友可以参考下
04-什么是队列结构----JavaScript数据结构与算法学习
H.千面的博客
11-27 283
该系列博客索引目录：数据结构与算法—前端JavaScript学习 一. 认识队列 我们也先来认识一下队列, 看看它的特点和应用场景等. 队列结构 队列(Queue)，它是一种运算受限的线性表,先进先出(FIFO First In First Out) 队列是一种受限的线性结构 受限之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（rear）进行插入操作 生活中类似的队列结构 生活中类似队列的场景就是非常多了, 比如在电影院, 商场, 甚至是厕所排队. 优先排队的人, 优先
JavaScript 数据结构（2）：队列 Queue
wlx1991的专栏
11-18 589
/** * 队列(Queue) * 先进先出 */ // Array 实现 /*function Queue () { var arr = []; return { insert: function(item){ // 入列 arr.push(item); }, remove: functio
javascript 数组的常用方法、dom操作、js数据结构处理
AKindofo的博客
06-05 899
ES6(ES2015)是 ECMAScript 的第六个版本，带来了许多新的语言特性和改进。在 JavaScript 中，可以使用原生的 DOM API 操作 HTML 文档中的元素。JavaScript 中常用的数据结构包括数组、对象、栈、队列、链表、二叉树等。
JavaScript数据结构——队列（Queue）
瓜冬瓜的博客
06-21 901
概念和结构 队列是一种先进先出（FIFO）的数据结构。 队列的第一个元素所在位置称为队头，最后一个元素所在位置称为队尾。 不包含任何元素的队列称为空队列。 队列的操作 队列有五种常用操作，分别为 入队 enqueue（element） 出队 dequeue（） 检查队头元素 front（） 检查队列是否为空 isEmpty（） 获取队列的长度 size（） JS实现 JS里面的队列结构也...
用JavaScript来实现队列
maomaolaoshi的博客
08-07 6675
队列的定义 队列（Queue）是一种遵从先进先出（First in, first out。简称FIFO）原则的有序集合。 优先队列是队列的修改版。元素的添加与移除是基于优先级别进行的。
疑难杂症：解决假上溢问题和队空队满问题
weixin_52634719的博客
10-02 410
base是数组，数组是队列的元素类型 入队，放在数组下标为尾指针rear的，如果我们定义了队列Q的话，我们在rear这里加上Q，变成Q.rear.即插入的元素放在尾指针所指的位置，然后尾指针指向下一块空间，rear++ 出队时为删除元素，只能从头开始，然后头指针再往后移。 如何操作？ 将我们当前头指针所指的数组元素base[front]存放在某个变量x当中，这是我们要出队的元素，然后头指针++：front++; j3出队后，t头指针和尾指针相等，队空 下标为0到MAXSIZE-.
JS(ES5,ES6)实现队列数据结构
q1312882392的博客
07-28 1546
队列遵循先进先出原则。队列在尾部添加新元素，并从顶部移出元素，最新添加的元素必须排在队列的末尾。 ES5: function Queue(){ let items = []; // 向队列添加元素 this.enqueue = function(ele){ items.push(ele); } //从队列移出元素 this.deque...
js执行队列、顺序
weixin_34185320的博客
01-18 262
问题：setTimeout的延迟事件，是从什么时候开始算起的？ 答： 首先你要明白Javascript是单线程，单线程就意味着所有任务需要排队。然后会将所有任务分成两类：同步任务和异步任务！同步任务：在主线程上执行的任务，只有前一个任务执行完成，才会执行后一个！异步任务：不进入主线程、而进入“任务队列”的任务，当主线程上的任务执行完，主线程才会去执行“任务队列”。 对于setTimeout(...
用于实现队列的数据结构
09-03
- *3* [基于JavaScript的数据结构队列动画实现示例解析](https://download.csdn.net/download/weixin_38651812/14901203)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值