JS算法探险之队列(Queue)

最新推荐文章于 2023-10-23 09:26:54 发布
最新推荐文章于 2023-10-23 09:26:54 发布
阅读量1.2k 收藏
点赞数
文章标签： 程序人生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52884694/article/details/125545308
版权
❝

乔布斯经常说到一句话：“Stay hungry, Stay foolish”

  • 「Stay hungry」:永不满足，
  • 「Stay foolish」: 是说埋头做自己的事，不要理会前行路上的各种嘲讽声音。
❞

大家好，我是「柒八九」。

今天，我们继续探索JS算法相关的知识点。我们来谈谈关于队列 Queue的相关知识点和具体的算法。

如果，想了解其他数据结构的算法介绍，可以参考我们已经发布的文章。如下是算法系列的往期文章。

文章list

好了，天不早了，干点正事哇。 alt

你能所学到的知识点

❝
  1. JS队列的各种实现
  2. 滑动窗口的概念和对应算法
  3. 利用队列解决和二叉树层树相关的算法
❞

文章概要

  1. 知识点简讲
  2. 滑动窗口
  3. 二叉树的广度优先搜索（BFS）

知识点简讲

队列是个啥

队列是一种遵从「先进先出」（FIFO）原则的「有序集合」。队列在尾部添加新元素，并从顶部移除元素。「最新添加的元素必须排在队列的末尾」。

alt

在现实中，最常见的队列的例子就是排队。

alt

JS版本的Queue

由于JS语言的特殊性，不存在真正意义上的Queue结构，一般使用数组特定的Api（push/shift）模拟最简单的queue使得能够满足「先进先出」的特性。

let queue = [];
queue.push(1);
queue.push(2);
==== 入队 1、2====

queue.shift() // 1出队
queue.shift() // 2出队

在一些简单的场景下，利用数组来模拟队列是可以满足条件的。但是作为一个功能完备的数据结构，还有一些其他的功能，使用上述的实现方式显的有点捉襟见肘。

「这里做一个简单的补充」：其实针对stack/queue的实现方式有两种，一种是利用数组实现一个存储地址连续的结构，另外一种实现方式是利用链表实现存储地址不连续的结构。

那么，我们就自己实现一个比较功能完备的queue。它有如下的功能点

  • enqueue(element(s))：向队列 「尾部」添加一个（或多个）新的项。
  • dequeue()：移除队列的第一项（即排在队列最前面的项）并返回被移除的元素。
  • peek()：返回队列中第一个元素——最先被添加，也将是最先被移除的元素。队列不做任何变动（不移除元素，只返回元素信息——与 Stack 类的 peek 方法非常类似）。
  • isEmpty()：如果队列中不包含任何元素，返回 true，否则返回 false。
  • size()：返回队列包含的元素个数，与数组的 length 属性类似。

数组版本

class Queue {
   constructor() {
     this.items = []; 
   }
   // 入队
   enqueue(element) {
     this.items.push(element);
  } 
  // 出队，并返回队首元素
  dequeue() {
    return this.items.shift();
  } 
  // 查看，队首元素
  peek() {
    return this.items[0]
  } 
  // 如果队列里没有任何元素就返回`true`,否则返回`false`
  isEmpty() {
   return this.items.length === 0;
  }
  // 返回队列的元素个数
  size() {
   return this.items.length;
  }
  // 移除队列里所有的元素
  clear() {
   this.items = [];
  }
} 

上面是使用数组来实现queue,能够实现基本的CRUD。但是，如果还记得我们在介绍stack的时候，也利用数组实现了一个Stack。

下面是用数组实现stack和queue的具体代码。可以发现，在利用数组实现这两个数据结构时候，除了针对「剔除/查看」数据有点不同，其他方法都一模一样。(除去方法名的差异) alt

在针对一些不强调消耗和性能的情况下，用数组实现queue是一个不错且简单的方式。但是，由于queue删除数据的位置是在队首。在利用数组实现的queue中，每次删除一个元素，数组剩余的元素的序号地址，都需要进行变更。这样会造成不必要的性能损耗。

所以，大部分情况下，queue是利用链表构建的。

链表版本

这里再做一个简单说明，在js中，对象类型数据,它本身就是一个以零散方式存储的。我们来简单做一个实验。

class TestObject {
    constructor() {
        this.elements = {
            o1:{},
            o2:{},
        };
        
  }
}
let to = new TestObject()

我们利用Memory获取了，此时内存信息。我们特意查看了TestObject中elements发现，针对他两个属性o1/o2所存的数据都放在不同的内存地址上。

alt

我们可以使用对象来存储元素信息。这样，就不需要「额外」的构建链表节点。

class Queue {
  constructor() {
    this.elements = {};
    this.head = 0;
    this.tail = 0;
  }
  enqueue(element) {
    this.elements[this.tail] = element;
    this.tail++;
  }
  dequeue() {
    const item = this.elements[this.head];
    delete this.elements[this.head];
    this.head++;
    return item;
  }
  peek() {
    return this.elements[this.head];
  }
  size() {
    return this.tail - this.head;
  }
  isEmpty() {
    return this.tail - this.head === 0; 
  }
}

滑动窗口

在数组中某一个长度的「子数组」可以看成数组的一个「窗口」。若给定数组[1,2,3,4,5,6],那么子数组[2,3,4]就是其中一个大小为3的窗口。窗口向右滑动一个数字，那么窗口就包含数字[3,4,5]。

也就是向右滑动窗口，每向右滑动一个数字，都在窗口的「最右边」插入一个数字，同时把「最左边」的数字删除。即满足队列 「先进先出」的特性。

滑动窗口的平均值

题目描述：

❝

给定一个「整数数据流」和一个「窗口大小」，根据该滑动窗口的大小，计算滑动窗口里所有数字的平均值。

  • 该类型的构造函数的参数确定滑动窗口的大小
  • 每次调用 next函数，会在滑动窗口中添加一个整数，并返回滑动窗口的所有数字的平均值
❞

分析

  1. 在窗口中添加数字，当窗口中的数字的数目超过限制时，还可以从窗口中删除数字。
  • 例如，当窗口的大小为3,在添加第四个数字时，就需要从窗口中删除 「最早添加」进来的数字。
  • 这是一种 「先进先出」的顺序，对应的数据容器为 「队列」
  1. 每次在窗口中添加数字之后，需要判断是否超出窗口的大小限制。如果超出限制，从队列中删除一个数字
  2. 利用 sum实时记录，窗口中 「现存数据」的和

代码实现

class MovingAverage {
    constructor(size) {
      this.nums = new Queue();
      this.capacity = size;
      this.sum = 0;
    }

    next(val) {
      this.nums.enqueue(val);
      this.sum+=val;
      if(this.nums.size()>this.capacity){
        this.sum -=this.nums.dequeue();
      }
      return this.sum / this.nums.size()
    }
}

二叉树的广度优先搜索（BFS）

二叉树的广度优先搜索是从上到下「按层」遍历二叉树，从二叉树的根节点开始，先遍历二叉树的第一层，再遍历第二层，以此类推。

alt

通常「基于队列来实现二叉树的广度优先搜索」。

  • 从二叉树的根节点开始，先把根节点放入到一个队列中，然后 每次从队列中取出一个节点遍历。
  • 如果该节点有左右子节点，则分别将它们添加到队列中。（先左后右）
  • 以此类推，直到所有节点都被遍历

「二叉树节点」

  class TreeNode {
      val: number
      left: TreeNode | null
      right: TreeNode | null
      constructor(val?: number, left?: TreeNode | null, right?: TreeNode | null) {
          this.val = (val===undefined ? 0 : val)
          this.left = (left===undefined ? null : left)
          this.right = (right===undefined ? null : right)
      }
  }

利用queue实现「二叉树广度优先遍历」

function bfs(root){
  let queue = new Queue();
  if(root!=null) {
    queue.enqueue(root);
  }
  
  let result = [];
  while(!queue.isEmpty()){
    let node = queue.dequeue();
    result.push(node.val)
    
    if(node.left!=null){
      queue.enqueue(node.left);
    }
    
    if(node.right!=null){
      queue.enqueue(node.right);
    }
  }
  return result;
}

由于queue的「先进先出」特性，二叉树的「某一层节点按照从左到右的顺序」插入队列中。因此，这些节点一定会按照从左到右的顺序遍历到。用广度优先(BFS)的顺序遍历二叉树，很容易知道

  • 「每层」最左边或者最右边的节点
  • 「每层」的最大值或者最小值

也就是说，关于二叉树的题目如果出现「层」的概念，尝试用广度优先来解决问题。

二叉树中每层的最大值

题目描述：

❝

输入一课二叉树，请找出二叉树中「每层」的最大值。

示例：输入: root = [1,3,2,5,3,null,9] 输出: [1,3,9] alt

❞

用一个队列实现二叉树的广度优先搜索

分析

  1. 找出二叉树中 「每层」的最大值，在遍历的时需要知道每层什么时候开始，什么时候结束。
    • 因为，在某个时刻，队列中可能存在位于不同层的节点，如果不做区分的话，是无法获取到某层数据的最大值
  2. 解决上述问题的一个办法就是 「计数」
    • 用两个变量分别记录两层节点的数目
    • 变量 current记录当前遍历这一层中位于队列之中节点的数量
    • 变量 next记录下一层中位于队列之中节点的数量
  3. 最开始把根节点插入队列中，把变量 current初始化为1.
    • 逐个从队列中取出节点遍历
    • 每当从队列中 「取出一个节点」时， 「当前层的剩余节点数」就少一个，即 current - 1
    • 当前遍历的节点有子节点，将子节点插入队列中，此时变量 next的数目增加1即 next + 1
  4. 当 current的数值变成0时，表示当前层的所有节点都已经遍历完。、
    • 此时，可以通过比较当前层的所有节点的值，找出最大值
  5. 在开始遍历下一层节点之前
    • 需要把 current的值设为 next的值
    • 变量 next重新初始化为0

代码实现

function largestValues(root) {
  let current = 0;
  let next = 0;
  let queue = new Queue();
  let result = [];
  if(root!=null){
    queue.enqueue(root);
    current++;
  }
  let max = Number.MIN_SAFE_INTEGER;
  while(!queue.isEmpty()){
    let node = queue.dequeue();
    current--;
    max = Math.max(max,node.val);
    
    if(node.left!=null){
      queue.enqueue(node.left);
      next++;
    }
    
    if(node.right !=null){
      queue.enqueue(node.right);
      next++;
    }
    
    if(current==0){
      result.push(max);
      max = Number.MIN_SAFE_INTEGER;
      current = next;
      next = 0;
    }
  }
  return result;
}

用两个队列实现二叉树的广度优先搜索

分析

  1. 利用一个队列区分不同的层，需要用到两个变量 current/next，我们可以换一个思路。将不同层树的节点，存入不同的队列中。
    • queue1只放当前遍历层的节点
    • queue2只放下一层的节点
  2. 最开始时，把二叉树的根节点放入队列 queue1中。
    • 接下来，每次从队列中取出一个节点遍历
    • 队列 queue1用来存放当前遍历层的节点，总是从队列 queue1中取出节点来遍历
    • 如果当前遍历的节点有子节点，并且子节点位于下一层，则把子节点放入队列 queue2
  3. 当队列 queue1被清空时，此时能够获取到当前层的最大值
  4. 在开始遍历下一层之前，
    • 把队列 queue1指向 queue2
    • 将队列 queue2重新初始化为空队列

代码实现

function largestValues(root) {
  
  let q1 = new Queue();
  let q2 = new Queue();
  let result = [];
  if(root!=null){
    q1.enqueue(root);
  }
  let max = Number.MIN_SAFE_INTEGER;
  while(!q1.isEmpty()){
    let node = q1.dequeue();
    max = Math.max(max,node.val);
    
    if(node.left!=null){
      q2.enqueue(node.left);
    }
    
    if(node.right !=null){
      q2.enqueue(node.right);
    }
    
    if(q1.isEmpty()){
      result.push(max);
      max = Number.MIN_SAFE_INTEGER;
      q1 = q2;
      q2 = new Queue();
    }
  }
  return result;
}

二叉树最底层最左边的值

题目描述：

❝

输入一课二叉树，找出它「最底层最左边」节点的值。

示例：输入: root = [1,2,3,4,null,5,6,null,null,7] 输出: 7 alt

❞

分析

  1. 题目越短，越需要咬文嚼字。
    • 二叉树
    • 最底层
  2. 根据①所得，我们可以使用二叉树的广度优先遍历(BFS)来进行层级的处理。
  3. 最底层最左边的节点就是最后一层的第一个节点
  4. 可以使用一个 bottomLeft来保存每层最左边的节点的值。没当新的层级出现时候，将 bottomLeft的值变更为第一个节点的值。
  5. 需要区分不同的层，我们采用两个队列的方式来实现

代码实现

function findBottomLeftValue(root){
  let q1 = new Queue();
  let q2 = new Queue();
  
  q1.enqueue(root);
  let bottomLeft = root.val;
  
  while(!q1.isEmpty()){
    let node = q1.dequeue();
    if(node.left !=null){
      q2.enqueue(node.left)
    }
    
    if(node.right !=null){
      q2.enqueue(node.right)
    }
    
    if(q1.isEmpty()){
      q1 = q2;
      q2 = new Queue();
      // 当q1为空时，开始遍历下一层，如果下一层还有节点，则更新bottomLeft
      if(!q1.isEmpty()){
        bottomLeft = q1.peek().val;
      }
    }
  }
  return bottomLeft
}

二叉树的右侧视图

题目描述：

❝

输入一课二叉树，站在该二叉树的右侧，从上到下看到的节点构成二叉树的右侧视图。

示例：输入: root = [1,2,3,null,5,null,4] 输出: [1,3,4] alt

❞

分析

  1. 题目越怪，越需要向已知套路靠
  2. 根据右侧视图的概念和示例的结果分析，其实它就是想要 「每层最右边」的一个节点，因此二叉树的右侧视图其实就是从上到下每层最右边的节点
  3. 有几个关键节点
    • 二叉树
    • 区分不同的层
    • 最右边的节点
  4. 直接二叉树bfs安排上

代码实现

function rightSideView(root){
  let result = [];
  if(root==null) return result;
  
  let q1 = new Queue();
  let q2 = new Queue();
  q1.enqueue(root);
  while(!q1.isEmpty()){
    let node = q1.dequeue();
    if(node.left!=null){
      q2.enqueue(node.left)
    }
    
    if(node.right !=null){
      q2.enqueue(node.right)
    }
    
    if(q1.isEmpty()){
      result.push(node.val); //此时node是当前层的最后一个节点
      q1= q2;
      q2 = new Queue();
    }
  }
  return result;
}

后记

「分享是一种态度」。

参考资料：剑指offer/leetcode官网/学习JavaScript数据结构与算法第3版

「全文完，既然看到这里了，如果觉得不错，随手点个赞和“在看”吧。」

alt

本文由 mdnice 多平台发布

前端小魔女
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中正则表达式的理解
qq_44242084的博客
10-20 345
// 正则表达式在js中的使用 // 1. 利用 RegExp对象来创建 正则表达式 var regexp = new RegExp(/123/); console.log(regexp); // 2. 利用字面量创建 正则表达式 var rg = /123/; // 3.test 方法用来检测字符串是否符合正则表达式要求的规范 con...
JS中的算法与数据结构之队列(Queue)实例详解
10-16
主要介绍了JS中的算法与数据结构之队列(Queue),结合实例形式详细分析了javascript中队列的概念、原理、定义及常见操作技巧,需要的朋友可以参考下
js-queue:JavaScript队列库
05-02
JS队列 JS中的简单队列模式 用法 标准队列： const queue = new Queue ( ) ; queue . enqueue ( 1 ) ; queue . enqueue ( 10 ) ; queue . enqueue ( 55 ) ; queue . printQueue ( ) ; 优先队列： const queue = new PriorityQueue ( ) ; queue . enqueue ( 1 , 50 ) ; queue . enqueue ( 10 , 1 ) ; queue . enqueue ( 55 , 100 ) ; console . log ( 'Front: ' , queue . front ( ) )
JavaScript实现队列结构（Queue）
qwe02315的博客
04-10 755
队列是是一种受限的线性表，特点为先进先出FIFO受限之处在于它只允许在表的前端（front）进行删除操作；在表的后端（rear）进行插入操作；相当于排队买票，先来的先买票，后来的后买票。打印队列：计算机打印多个文件的时候，需要排队打印；线程队列：当开启多线程时，当新开启的线程所需的资源不足时就先放入线程队列，等待CPU处理；队列的实现和栈一样，有两种方案：基于数组实现；基于链表实现；enqueue（element）：向队列尾部添加一个（或多个）新的项；
js 创建队列Queue
youzi______的博客
08-17 113
【代码】js 创建队列Queue。
消息队列 Queue与Topic区别.docx
02-23
消息队列 Queue与Topic区别
java队列之queue用法实例分析
08-18
主要介绍了java队列之queue用法实例分析，Queue 队列就是一个先入先出（FIFO）的数据结构，Queue接口继承Collection接口。感兴趣的可以了解一下
python队列queue模块详解
09-20
主要为大家详细介绍了python队列queue模块的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Js中队列
weixin_46224014的博客
11-02 4009
1.什么是队列？ 队列是一种先进先出的数据结构 Js中没有队列，但是可以用Array来实现队列的所有功能 # 2.常用方法 push：新元素入队 shift：队头元素出队，并给返回值 length：返回队的长度 3.使用示例 //初始化一个队 const queue = []; //入队 queue.push(1); //queue = [1] queue.push(2); //queue = [2] const item1 = queue.shift(); //q
js数据结构之队列结构
uperficialyu的博客
07-06 966
队列结构 先进先出 FIFO （First In First Out） 允许在前端（front）删除，允许在后端（rear）插入 特殊：优先级队列 自己封装一个队列结构 // es5 function Queue() { // 创建一个队列容器 this.containter = []; } Queue.prototype = { construtor: Queue, // 进入队列 element进入队列的元素 enter: function enter(element) {
jsoup的使用
yuer629
03-20 1371
jsoup 是一款基于 Java 的HTML解析器，它提供了一套非常省力的API，不但能直接解析某个URL地址、HTML文本内容，而且还能通过类似于DOM、CSS或者jQuery的方法来操作数据，所以 jsoup 也可以被当做爬虫工具使用。Document：文档对象。每份HTML页面都是一个文档对象，Document 是 jsoup 体系中最顶层的结构。Element：元素对象。
【数据结构与算法】JavaScript实现队列结构（Queue）
最新发布
一个前端开发者
10-23 755
队列是是一种受限的线性表，特点为先进先出FIFO受限之处在于它只允许在表的前端（front）进行删除操作；在表的后端（rear）进行插入操作；相当于排队买票，先来的先买票，后来的后买票。打印队列：计算机打印多个文件的时候，需要排队打印；线程队列：当开启多线程时，当新开启的线程所需的资源不足时就先放入线程队列，等待CPU处理；基于数组实现；基于链表实现；enqueue（element）：向队列尾部添加一个（或多个）新的项；
JavaScript中 queue（队列）的应用与实现
MyBlog
01-13 2570
文章目录前言一、queue（队列）是什么？1.生活中的队列2.程序中的队列二、各种类型的队列1.基础队列1.1 队列里的方法1.2 队列类创建1.3 构造函数的方式来创建队列2.最小优先队列3.最大优先队列4.循环队列5.并发队列6.阻塞队列总结
【前端】js实现队列功能 先进后出 先进先出 等
我是Superman丶的博客
10-07 393
定义一个定时任务 不断的去取队列 执行。
【JS】前端base64转图片File对象
热门推荐
此人太懒，没有任何简介
06-12 1万+
【JS】前端base64转图片File对象
js数据结构与算法：优先队列
Big_YiFeng的博客
08-12 581
一般来说，队列讲究先进先出，后进后出就像排队一样。但现实中往往有人有特权，比如机场vip，医院急症室，这些都属于需要优先处理的，即使他是后来的，但人家优先级比较高。
JavaScript总结：关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解
鄙人kunzhi96，感恩遇见！
02-18 1万+
今天在学习js中发现push()、pop()、shift()、unshift()四种方法在栈和队列中的使用，发现结果和自己想像的不太一样，下面我们看代码和运行结果： var stack = []; stack.push("栈1"); //push(ele):元素入栈，返回入栈后数组的长度 stack.push("栈2"); stack.push("栈3&
Javascript实现队列
weixin_63896561的博客
09-04 1280
JS实现数据结构-队列
python消息队列Queue
07-27
Queue模块提供了多种队列实现，包括先进先出（FIFO）队列、后进先出（LIFO）队列和优先级队列。 要使用Queue模块，首先需要导入它： ```python from queue import Queue ``` 然后，可以创建一个队列对象： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值