5分钟入门JavaScript队列(Queue)数据结构JavaScript数据结构与算法系列

Posted 狼丶宇先生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了5分钟入门JavaScript队列(Queue)数据结构JavaScript数据结构与算法系列相关的知识,希望对你有一定的参考价值。

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

在上一篇文章中,我们了解并学习了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(当然也就不为空了)。

下图展示了目前为止执行的所有入列操作,以及队列当前的状态。

手绘当前队列的状态也就是说,我们遵循了先进先出原则。

五、本章小结

本系列文章主要讲述JavaScript队列数据结构(Queue),队列系列文章共三篇,本文也是第一篇。

本章需要记住的是队列的特性、与之前的栈的不同点,以及队列遵循的原则。

工欲善其事,必先利其器。

六、写在后面

这作为一个JavaScript队列数据结构的第一篇文章,主要目的是入门队列结构,以及理解它遵循的原则,本系列也会持续进行更新的。

剧透:下一章讲述继续讲述队列,不过呢是双端队列。

有问题请留言或者@博主,谢谢支持o( ̄︶ ̄)o~

感谢您的阅读,如果此文章或项目对您有帮助,若可以的话请给个一键三连吧!

GitHub有开源项目,需要的小伙伴可以顺手star一下!

GitHub: https://github.com/langyuxiansheng

以上是关于5分钟入门JavaScript队列(Queue)数据结构JavaScript数据结构与算法系列的主要内容,如果未能解决你的问题,请参考以下文章

5分钟入门JavaScript队列(Queue)数据结构JavaScript数据结构与算法系列

queue 优先队列

RabbitMQ入门:工作队列(Work Queue)

JavaScript实现队列结构(Queue)

UVa 12100 Printer Queue (习题 5-7)

CI框架集成php-queue消息队列