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消息队列