前端学数据结构之队列
前面的话
队列和栈非常类似,但是使用了不同的原则,而非后进先出。本文将详细介绍队列的JS实现
数据结构
队列是遵循FIFO(First In First Out,先进先出,也称为先来先服务)原则的一组有序的项。 队列在尾部添加新元素,并从顶部移除元素。最新添加的元素必须排在队列的末尾
在现实中,最常见的队列的例子就是排队:
![queue1](https://pic.xiaohuochai.site/blog/dataStructureQueue1.png)
还有,在电影院、自助餐厅、杂货店收银台,我们也都会排队。排在第一位的人会先接受服务
在计算机科学中,一个常见的例子就是打印队列。比如说我们需要打印五份文档。我们会打开每个文档,然后点击打印按钮。每个文档都会被发送至打印队列。第一个发送到打印队列的文档会首先被打印,以此类推,直到打印完所有文档
创建队列
我们需要创建自己的类来表示一个队列。先从最基本的声明类开始:
function Queue() { //这里是属性和方法 }
首先需要一个用于存储队列中元素的数据结构。可以使用数组,就像在上一篇博文Stack类中那样使用(Queue类和Stack类非常类似,只是添加和移除元素的原则不同):
let items = [];
接下来需要声明一些队列可用的方法
enqueue(element(s)):向队列尾部添加一个(或多个)新的项。
dequeue():移除队列的第一(即排在队列最前面的)项,并返回被移除的元素。
front():返回队列中第一个元素——最先被添加,也将是最先被移除的元素。队列不 做任何变动(不移除元素,只返回元素信息——与Stack类的peek方法非常类似)。
isEmpty():如果队列中不包含任何元素,返回true,否则返回false。
size():返回队列包含的元素个数,与数组的length属性类似。
【enqueue】
首先要实现的是enqueue方法。这个方法负责向队列添加新元素。这里有一个非常重要的细节,新的项只能添加到队列末尾:
既然我们使用数组来存储队列的元素,就可以用JS的array类的push方法
this.enqueue = function(element){ items.push(element); };
【dequeue】
接下来要实现dequeue方法。这个方法负责从队列移除项。由于队列遵循先进先出原则,最先添加的项也是最先被移除的。可以用JavaScript的array类的shift方法。shift方法会从数组中移除存储在索引0(第一个位置)的元素
this.dequeue = function(){ return items.shift(); };
只有enqueue方法和dequeue方法可以添加和移除元素,这样就确保了Queue类遵循先进先出原则
【front】
现在来为我们的类实现一些额外的辅助方法。如果想知道队列最前面的项是什么,可以用front方法。这个方法会返回队列最前面的项(数组的索引为0):
this.front = function(){ return items[0]; };
【isEmpty】
如果队列为空,isEmpty方法返回true,否则返回false
对于isEmpty方法,可以简单地验证内部数组的length是否为0。
this.isEmpty = function(){ return items.length == 0; };
【size】
可以为Queue类实现类似于array类的length属性的方法。size方法也跟Stack类里的一样:
this.size = function(){ return items.length; };
【print】
增加一个print方法:
this.print = function(){ console.log(items.toString()); };
Queue类的完整代码如下
function Queue() { let items = []; this.enqueue = function(element){ items.push(element); }; this.dequeue = function(){ return items.shift(); }; this.front = function(){ return items[0]; }; this.isEmpty = function(){ return items.length == 0; }; this.clear = function(){ items = []; }; this.size = function(){ return items.length; }; this.print = function(){ console.log(items.toString()); }; }
使用Queue类
首先要做的是实例化我们刚刚创建的Queue类,然后就可以验证它为空(输出为true,因为我们还没有向队列添加任何元素):
let queue = new Queue(); console.log(queue.isEmpty()); //输出true
接下来,添加一些元素(可以向队列添加任何类型的元素):
queue.enqueue("John"); queue.enqueue("Jack");
添加另一个元素:
queue.enqueue("Camila");
再执行一些其他的命令:
queue.print(); console.log(queue.size()); //输出3 console.log(queue.isEmpty()); //输出false queue.dequeue(); queue.dequeue(); queue.print();
如果打印队列的内容,就会得到John、Jack和Camila这三个元素。因为我们向队列添加了三个元素,所以队列的大小为3(当然也就不为空了)
下图展示了目前为止执行的所有入列操作,以及队列当前的状态:
![queue2](https://pic.xiaohuochai.site/blog/dataStructureQueue2.png)
然后,出列两个元素(执行两次dequeue方法)。下图展示了dequeue方法的执行过程:
![queue3](https://pic.xiaohuochai.site/blog/dataStructureQueue3.png)
最后,再次打印队列内容时,就只剩Camila一个元素了。前两个入列的元素出列了,最后入列的元素也将是最后出列的。也就是说,我们遵循了先进先出原则
ES6
我们也可以用ECMAScript 6语法编写Queue类。在这种方法中,我们要用一个WeakMap来保存私有属性items,并用外层函数(闭包)来封装Queue类。
let Queue2 = (function () { const items = new WeakMap(); class Queue2 { constructor () { items.set(this, []); } enqueue(element) { let q = items.get(this); q.push(element); } dequeue() { let q = items.get(this); let r = q.shift(); return r; } front() { let q = items.get(this); return q[0]; } isEmpty(){ return items.get(this).length == 0; } size(){ let q = items.get(this); return q.length; } clear(){ items.set(this, []); } print(){ console.log(this.toString()); } toString(){ return items.get(this).toString(); } } return Queue2; })();
优先队列
队列大量应用在计算机科学以及我们的生活中,实现的默认队列也有一些修改版本。其中一个修改版就是优先队列。元素的添加和移除是基于优先级的。一个现实的例子就是机场登机的顺序。头等舱和商务舱乘客的优先级要高于经济舱乘客。在有些国家,老年人和孕妇(或带小孩的妇女)登机时也享有高于其他乘客的优先级
另一个现实中的例子是医院的(急诊科)候诊室。医生会优先处理病情比较严重的患者。通常,护士会鉴别分类,根据患者病情的严重程度放号。
实现一个优先队列,有两种选项:设置优先级,然后在正确的位置添加元素;或者用入列操作添加元素,然后按照优先级移除它们。在这个示例中,我们将会在正确的位置添加元素,因此可以对它们使用默认的出列操作:
function PriorityQueue() { let items = []; function QueueElement (element, priority){ // {1} this.element = element; this.priority = priority; } this.enqueue = function(element, priority){ let queueElement = new QueueElement(element, priority); let added = false; for (let i=0; i<items.length; i++){ if (queueElement.priority < items[i].priority){ // {2} items.splice(i,0,queueElement); // {3} added = true; break; // {4} } } if (!added){ items.push(queueElement); //{5} } }; this.print = function(){ for (let i=0; i<items.length; i++){ console.log(`${items[i].element} - ${items[i].priority}`); } }; //其他方法和默认的Queue实现相同 }
默认的Queue类和PriorityQueue类实现上的区别是,要向PriorityQueue添加元素,需要创建一个特殊的元素(行{1})。这个元素包含了要添加元素,需要创建一个特殊的元素(行{1})。这个元素包含了要添加到队列的元素(它可以是任意类型)及其在队列中的优先级
如果队列为空,可以直接将元素入列(行{2})。否则,就需要比较该元素与其他元素的优先级。当找到一个比要添加的元素的priority值更大(优先级更低)的项时,就把新元素插入到它之前(根据这个逻辑,对于其他优先级相同,但是先添加到队列的元素,我们同样遵循先进先出的原则)。要做到这一点,我们可以用JavaScript的array类的splice方法。 一旦找到priority值更大的元素,就插入新元素(行{3})并终止队列循环(行{4})。这样, 队列也就根据优先级排序了
如果要添加元素的priority值大于任何已有的元素,把它添加到队列的末尾就行了(行{5}):
var priorityQueue = new PriorityQueue(); priorityQueue.enqueue("John", 2); priorityQueue.enqueue("Jack", 1); priorityQueue.enqueue("Camila", 1);
priorityQueue.print();
以上代码是一个使用PriorityQueue类的示例。在下图中可以看到每条命令的结果(以上代码的结果)
第一个被添加的元素是优先级为2的John。因为此前队列为空,所以它是队列中唯一的元素。接下来,添加了优先级为1的Jack。由于Jack的优先级高于John,它就成了队列中的第一个元素。然后,添加了优先级也为1的Camila。Camila的优先级和Jack相同,所以它会被插入到Jack之后(因为Jack先被插入队列);Camila的优先级高于John,所以它会被插入到John之前
我们在这里实现的优先队列称为最小优先队列,因为优先级的值较小的元素被放置在队列最前面(1代表更高的优先级)。最大优先队列则与之相,把优先级的值较大的元素放置在队列最前面
循环队列
还有另一个修改版的队列实现,就是循环队列。循环队列的一个例子就是击鼓传花游戏(Hot Potato)。在这个游戏中,孩子们围成一个圆圈,把花尽快地传递给旁边的人。某一时刻传花停止, 这个时候花在谁手里,谁就退出圆圈结束游戏。重复这个过程,直到只剩一个孩子(胜者)
在下面这个示例中,我们要实现一个模拟的击鼓传花游戏:
function hotPotato (nameList, num){ var queue = new Queue(); // {1} for (var i=0; i<nameList.length; i++){ queue.enqueue(nameList[i]); // {2} } var eliminated = ''; while (queue.size() > 1){ for (var i=0; i<num; i++){ queue.enqueue(queue.dequeue()); // {3} } eliminated = queue.dequeue();// {4} console.log(eliminated + '在击鼓传花游戏中被淘汰。'); } return queue.dequeue();// {5} } var names = ['John','Jack','Camila','Ingrid','Carl']; var winner = hotPotato(names, 7); console.log('胜利者:' + winner);
实现一个模拟的击鼓传花游戏,要用到Queue类(行{1})。我们会得到一份名单,把里面的名字全都加入队列(行{2})。给定一个数字,然后迭代队列。从队列开头移除一项,再将其添加到队列末尾(行{3}),模拟击鼓传花(如果把花传给了旁边的人,被淘汰的威胁立刻就解除了)。一旦传递次数达到给定的数字,拿着花的那个人就被淘汰了(从队列中移除——行{4})。最后只剩下一个人的时候,这个人就是胜者(行{5})
以上算法的输出如下:
Camila在击鼓传花游戏中被淘汰。
Jack在击鼓传花游戏中被淘汰。
Carl在击鼓传花游戏中被淘汰。
Ingrid在击鼓传花游戏中被淘汰。
胜利者:John
下图模拟了这个输出过程:
![queue5](https://pic.xiaohuochai.site/blog/dataStructureQueue5.png)
可以改变传入hotPotato函数的数字,模拟不同的场景
最后
JavaScript内部控制所使用的也是队列如此基础的数据结构
当我们在浏览器中打开新标签时,就会创建一个任务队列。这是因为每个标签都是单线程处理所有的任务,它被称为事件循环。浏览器要负责多个任务,如渲染HTML,执行JavaScript代码,处理用户交互(用户输入、鼠标点击等),执行和处理异步请求
好的代码像粥一样,都是用时间熬出来的
![二维码](https://pic.xiaohuochai.site/blog/qrcode.jpg)