首页 > 其他分享 >js实现队列

js实现队列

时间:2024-08-30 23:21:59浏览次数:11  
标签:count return 队列 items js 实现 isEmpty lowestCount

目录

一、什么是JavaScript队列数据结构

在上一篇文章中,我们了解并学习了JavaScript栈数据结构,本章开始JavaScript的队列数据结,第一章先认识队列与怎么去封装一个队列。

前面的文章里我们已经学习了栈。队列和栈非常类似,但是使用了与后进先出不同的原则。本章学习这些内容。
在这里插入图片描述

队列是遵循先进先出(FIFO,也称为先来先服务)原则的一组有序的项。队列在尾部添加新元素,并从顶部移除元素。最新添加的元素必须排在队列的末尾

在现实中,最常见的队列的例子就是排队,例如在火车站的售票处、超时里的收银台等,我们都会排队,排在第一位的人会先接受服务。

在计算机科学中,一个常见的例子就是打印队列。比如说我们需要打印五份文档。我们会打开每个文档,然后点击打印按钮,每个文档都会被发送至打印队列。第一个发送到打印队列的文档会首先被打印,以此类推,直到打印完所有文档。

二、创建一个JavaScript队列数据结构

我们需要创建自己的类来表示一个队列。先从最基本的声明类开始。

class Queue {
	constructor(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
}

首先需要一个用于存储队列中元素的数据结构。我们可以使用数组,就像上一章的Stack类那样。

但是,为了写出一个在获取元素时更高效的数据结构,我们将使用一个对象来存储我们的元素(行{3})。

你会发现Queue类和Stack类非常类似,只是添加和移除元素的原则不同。

也可以声明一个count属性来帮助我们控制队列的大小(行{1})。

此外,由于我们将要从队列前端移除元素,同样需要一个变量来帮助我们追踪第一个元素。因此,声明一个lowestCount变量(行{2})。

接下来需要声明一些队列可用的方法:

  • enqueue(element(s)):向队列尾部添加一个(或多个)新的项。
  • isEmpty():如果队列中不包含任何元素,返回true,否则返回false。
  • size():返回队列包含的元素个数,与数组的length属性类似。
  • dequeue():移除队列的第一项(即排在队列最前面的项)并返回被移除的元素。
  • peek():返回队列中第一个元素——最先被添加,也将是最先被移除的元素。队列不做任何变动(不移除元素,只返回元素信息——与Stack类的peek方法非常类似)。该方法在其他语言中也可以叫作front 方法。
  • clear():清空整个队列。
  • toString():将队列转为字符串返回。
    下一小节来封装并实现这些方法。

三、封装队列方法

①向队列添加元素

首先要实现的是enqueue方法。该方法负责向队列添加新元素。此处一个非常重要的细节是新的项只能添加到队列末尾。

class Queue {
	constructor(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
	
	enqueue(element){
		this.items[this.count] = element;
		this.count++;
	}
}

enqueue 方法和Stack 类中 push 方法的实现方式相同。由于items 属性是一个JavaScript对象,它是一个键值对的集合。要向队列中加人一个元素的话,我们要把count变量作为items对象中的键,对应的元素作为它的值。将元素加入队列后,我们将count变量加1。

②检查队列是否为空

刚刚实现了向队列添加元素的方法,这个要实现是isEmpty方法。如果队列为空,它会返回true,否则返回false(注意该方法和Stack类里的一样)。

class Queue {
	constructor(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
	
	enqueue(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	isEmpty(){
		return this.count - this.lowestCount === 0;
	}
}

③获取队列的长度

要计算队列中有多少元素,我们只需要计算count和lowestCount之间的差值即可。

假设count属性的值为2,lowestCount的值为0。这表示在队列中有两个元素。然后,从队列中移除一个元素,lowestCount的值会变为1,count的值仍然是2。现在队列中只有一个元素了,以此类推。

所以要实现size方法的话,我们只需要返回这个差值即可。

class Queue {
	constructor(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
	
	enqueue(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	isEmpty(){
		return this.count - this.lowestCount === 0;
	}
	
	size(){
		return this.count - this.lowestCount;
	}
	
	/* 也可以像这样实现 isEmpty 方法*/
	// isEmpty(){
	// 	return this.size() === 0;
	// }
}

④从队列移除元素

接下来要实现dequeue方法,该方法负责从队列移除项。由于队列遵循先进先出原则,最先添加的项也是最先被移除的。

class Queue {
	constructor(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
	
	enqueue(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	isEmpty(){
		return this.count - this.lowestCount === 0;
	}
	
	size(){
		return this.count - this.lowestCount;
	}
	
	/* 也可以像这样实现 isEmpty 方法*/
	// isEmpty(){
	// 	return this.size() === 0;
	// }

	dequeue(){
		if(this.isEmpty()){
			return undefined;
		}
		const result = this,items[this.lowestCount]; //{1}
		delete this.items[this.lowestCount]; //{2}
		this.lowestCount++; //{3}
		return result; //{4}
	}
}

首先,我们需要检验队列是否为空。如果为空,我们返回 undefined值。如果队列不为空,我们将暂存队列头部的值(行{1}),以便该元素被移除后(行{2})将它返回(行{4})。我们也需要将lowestCount属性加1(行{3})。

用下面的内部值来模拟dequeue动作。

items = {
	0: 5,
	1: 9
}
count = 2;
lowestCount = 0;

我们需要将键设为0来获取队列头部的元素(第一个被添加的元素是5),删除它,再返回它的值。

在这种场景下,删除第一个元素后,items属性将只会包含一个元素(1:9)。

再次执行dequeue方法的话,它将被移除,因此我们将lowestCount变量从0修改为1。

只有enqueue 方法和 dequeue 方法可以添加和移除元素,这样就确保了Queue类遵循先进先出原则

⑤查看队列头元素

现在来为我们的Queue类实现一些额外的辅助方法。如果想知道队列最前面的项是什么,可以用peek方法。该方法会返回队列最前面的项(把lowestCount作为键名来获取元素值)。

class Queue {
	constructor(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
	
	enqueue(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	isEmpty(){
		return this.count - this.lowestCount === 0;
	}
	
	size(){
		return this.count - this.lowestCount;
	}
	
	/* 也可以像这样实现 isEmpty 方法*/
	// isEmpty(){
	// 	return this.size() === 0;
	// }

	dequeue(){
		if(this.isEmpty()){
			return undefined;
		}
		const result = this,items[this.lowestCount]; //{1}
		delete this.items[this.lowestCount]; //{2}
		this.lowestCount++; //{3}
		return result; //{4}
	}
	
	peek(){
		if(this.isEmpty()){
			return undefined;
		}
		return this.items[this.lowestCount];
	}
}

⑥清空队列

若要清空队列中的所有元素,我们可以调用dequeue方法直到它返回 undefined,也可以简单地将队列中的属性值重设为和构造函数中的一样。

class Queue {
	constructor(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
	
	enqueue(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	isEmpty(){
		return this.count - this.lowestCount === 0;
	}
	
	size(){
		return this.count - this.lowestCount;
	}
	
	/* 也可以像这样实现 isEmpty 方法*/
	// isEmpty(){
	// 	return this.size() === 0;
	// }

	dequeue(){
		if(this.isEmpty()){
			return undefined;
		}
		const result = this,items[this.lowestCount]; //{1}
		delete this.items[this.lowestCount]; //{2}
		this.lowestCount++; //{3}
		return result; //{4}
	}
	
	peek(){
		if(this.isEmpty()){
			return undefined;
		}
		return this.items[this.lowestCount];
	}
	
	clear(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
}

⑦创建toString方法

其实呢到这里,一个简单的Queue类就已经完成了!我们也可以像Stack类一样增加一个toString方法。

class Queue {
	constructor(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
	
	enqueue(element){
		this.items[this.count] = element;
		this.count++;
	}
	
	isEmpty(){
		return this.count - this.lowestCount === 0;
	}
	
	size(){
		return this.count - this.lowestCount;
	}
	
	/* 也可以像这样实现 isEmpty 方法*/
	// isEmpty(){
	// 	return this.size() === 0;
	// }

	dequeue(){
		if(this.isEmpty()){
			return undefined;
		}
		const result = this,items[this.lowestCount]; //{1}
		delete this.items[this.lowestCount]; //{2}
		this.lowestCount++; //{3}
		return result; //{4}
	}
	
	peek(){
		if(this.isEmpty()){
			return undefined;
		}
		return this.items[this.lowestCount];
	}
	
	clear(){
		this.count = 0;	//{1}
		this.lowestCount = 0;	//{2}
		this.items = {};	//{3}
	}
	
	toString(){
		if(this.isEmpty()){
			return '';
		}
		let objString = `${this.items[this.lowestCount]}`;
		for(let i = this.lowestCount + 1; i < this.count; i++){
			objString += `${objString},${this.items[i]}`;
		}
		return objString;
	}
}

在Stack类中,我们从索引值为0开始选代items中的值。由于Queue类中的第一个索引值不一定是0,我们需要从索引值为lowestCount的位置开始迭代队列。

到现在为止呢,我们真的完成了!

Queue 类和Stack类非常类似。主要的区别在于dequeue方法和peek方法,这是由于先进先出和后进先出原则的不同所造成的。

四、使用Queue类

首先要做的是实例化我们刚刚创建的Queue类,然后就可以验证它为空(输出为true,因为我们还没有向队列添加任何元素)。

const queue = new Queue();
console.log(queue.isEmpty());	//输出true

接下来,添加一些元素,添加张三和李四两个元素——现在可以向队列添加任何类型的元素。

queue.enqueue('张三');
queue.enqueue('李四');

console.log(queue.toString());	//输出 张三,李四

再添加另一个元素。

queue.enqueue('王五');
console.log(queue.toString());	//输出 张三,李四,王五
console.log(queue.size());	//输出 3
console.log(queue.isEmpty());	//输出false

queue.dequeue(); // 移除张三

4如果打印队列的内容,就会得到张三、李四、王五这三个元素。因为我们向队列添加了三个元素,所以队列的大小为3(当然也就不为空了)。

下图展示了目前为止执行的所有入列操作,以及队列当前的状态。
在这里插入图片描述

也就是说,我们遵循了先进先出原则。

标签:count,return,队列,items,js,实现,isEmpty,lowestCount
From: https://blog.csdn.net/qq_65665724/article/details/141679224

相关文章

  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......
  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......
  • 模板方法模式:如何实现同一模板框架下的算法扩展?
    模板方法模式的原理和代码实现都比较简单,在软件开发中也被广泛应用,但是因为使用继承机制,副作用往往盖过了主要作用,所以在使用时尤其要小心谨慎。一、模式原理分析模板方法模式原始定义是:在操作中定义算法的框架,将一些步骤推迟到子类中。模板方法让子类在不改变算法结构的情况下重......
  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......
  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......
  • [js] 页面可见性API 监测用户切屏
    PageVisibilityAPI在做考试系统或者网课系统的时候,通常需要监测用户是否隐藏了当前标签页在看其它页面。PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性,可以用它来判断用户是否切屏。visibilitychange这个事件会在页面可见性变化时触发。(隐藏时、打开时)//......
  • python的py文件 如何在window和linux系统中 使用命令的方式执行 接收json参数 两者的
    1.在Python中,可以使用内置的sys模块来在Windows和Linux系统中接收命令行参数。使用sys.argv,它是一个列表,包含命令行参数。sys.argv[0]是脚本名,其余元素是命令行参数。示例代码:importsys#检查参数个数iflen(sys.argv)<2:print("请提供至少一个参数。")sys.......
  • 基于大数据+爬虫+非遗推荐系统设计和实现(源码+LW+部署讲解)
     博主介绍:✌全网粉丝50W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌技术范围:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs......
  • 基于大数据+爬虫+数据可视化的的亚健康人群数据可视化设计和实现(源码+LW+部署讲解)
     博主介绍:✌全网粉丝50W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌技术范围:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs......
  • JS如何实现深拷贝
    目录js实现深拷贝js中的浅拷贝方法object.assign()拓展运算符js中深拷贝的原理和实现手写实现深拷贝手写实现深拷贝改进版js实现深拷贝自己创建一个新的对象,来接收你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果......