每天一个数据结构 - Queue (队列) 与 Deque (双端队列)

[TOC]

一、Queue 队列

1. Queue 的特点

与栈(Stack) 一样, 队列也是一种操作受限的线性表【什么是线性表? 什么是操作受限? 什么是栈? 在笔者上一篇文章有详细论述】。
进行删除操作的端称为: 队头、进行添加操作的端称为 队尾。
当一个元素被添加进队列当中的这个过程叫 入队, 反之则叫 出队。
队列关于操作受限的这个层面来说是因为队列本身是遵循 FIFO(先进先出/后进后出) 的原则, 这也就限制了队列在添加或删除元素的时候只能首尾两端分别进行。图解 :

2. 形象的理解 Queue

流着水的水管: 水流从一端流入, 从另一端留出。这个过程一定是先进入水管里面的那一撮水最先在另一端留出, 这实际上就是队列了。
为了买卧铺票少遭点罪: 熬夜排队买车票: 一定是井然有序先到排队的人先买到票, 一定不是后到排队的人先买到票, 这个排队买票的队伍加上整体的行为也是队列。

3. 手写一个 Queue

手写 Queue 之前首先要明确的点 :

涉及实现的方法 :
- clear(): 清空队列
- size(): 获取当前队列长度
- isEmpty(): 判空
- peek(): 返回队头元素
- enqueue(val): 队尾 -> 添加元素
- dequeue(): 队头 => 移除元素
具体实现需要有首、尾两个 "指针", 来跟踪队头与队尾的变化情况，以保证对队列的操作都是正确的。
Queue 的代码实现如下 :

void (() => {
    /**
     * @author FruitJ
     * @version 1.0
     * @see https://github.com/FruitJ
     * @description Queue 类(基于对象)
     * @constructor 初始化 Queue 类的实例
     */
    class Queue {

        #queue; // 队列
        #endIndex; // 尾部 "指针" (追踪队尾的状态)
        #startendIndex; // 首部 "指针" (追踪队头的状态)
        constructor() {
            this.#queue = {};
            this.#endIndex = 0;
            this.#startendIndex = 0;
        }

        /**
         * @description 向 queue 的尾部追加一个元素
         * @param {any} arg - 接收一个任意类型参数 
         * @returns {number} this.#endIndex++ - 返回追加完后, 队列的长度 
         */
        enqueue(arg) {
            this.#queue[this.#endIndex] = arg;
            this.#endIndex++;
            return this.#endIndex;
        }

        /**
         * @description 从 queue 首部移除一个元素
         * @returns { any } res - 返回一个从 queue 首部移除的元素
         */
        dequeue() {
            if (this.isEmpty()) return;
            let res = this.#queue[this.#startendIndex];
            delete this.#queue[this.#startendIndex];
            this.#startendIndex++;
            return res;
        }

        /**
         * @description 判断 queue 结构是否为空
         * @returns {boolean} this.size() - 返回一个布尔值, false 代表不为空 
         */
        isEmpty() {
            return this.size() === 0;
        }

        /**
         * @returns {any} this.#queue[this.#endIndex] - 返回一个 queue 首部的元素
         */
        peek() {
            return this.#queue[this.#startendIndex];
        }

        /**
         * @description 获取当前 queue 长度
         * @returns {number} this.#endIndex - this.#startendIndex - 返回一个表示当前队列的长度的 number 类型值
         */
        size() {
            return this.#endIndex - this.#startendIndex; 
        }

        /**
         * @description 清空当前队列结构
         */
        clear() {
            this.#queue = {};
            this.#endIndex = 0;
            this.#startendIndex = 0;
        }        
    }

    // 创建队列实例
    let queue = new Queue();

    // 测试部分
    queue.enqueue(1);
    queue.enqueue(2);
    console.log(queue.enqueue(3)); // 3
    console.log(queue.size()); // 3
    console.log(queue.isEmpty()); // false
    console.log(queue.dequeue()); // 1
    console.log(queue.peek()); // 2
    queue.clear();
    console.log(queue.isEmpty()); // true
    console.log(queue.peek()); // undefined
})();

代码比较简单就不做赘述了(😁需要赘述一下 : 明确 startIndex、endIndex, 因为存在删除元素的情况所以 size 方法计算队列长度是 endIndex - startIndex)。

4. 使用 Queue 解决实际问题

解决一个经典的游戏问题 - (击鼓传花)【实际上就是小时候咱们玩的: 老师在前面敲击数数, 数到几就停, 在同学们之间传递的物品被传递到了谁那谁就表演节目那个游戏是一样的, 只不过在这里是被传递到的那位同学出局而已, 因为最终要计算出一个胜利者】
代码实现思路就是:
- 将人员信息录入进队列中
- 不断迭代走游戏规则但队列长度保证最终为 1.
- 迭代条件的设定就是最终留下一人
- 在迭代的过程中通过循环队列的机制来进行人员的移动并最终移除队头的人员(被淘汰的人员), 这样队列长度在每轮循环后都会减 1, 从而得出最终结果。
具体代码实现如下 :

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>击鼓传花</title>
</head>

<body>

    <script src="../utils/utils.js"></script>
    <script>
        // 击鼓传花
        function fn(items, num) {

            // 创建队列实例
            let queue = new dSModule.Queue();
            // 存储被淘汰的人员
            let dieOutArr = [];
            // 将人员信息录入至队列中
            items.forEach(item => {
                queue.enqueue(item);
            });
            // 击鼓传花
            while (queue.size() > 1) {
                for (let i = 0; i < num; i++) {
                    queue.enqueue(queue.dequeue()); // 从队尾添加同时从队首移除(循环队列), 移动 num - 1次【为了下面移除队首元素, 所以这里只移动重排了 num - 1 次】
                }
                dieOutArr.push(queue.dequeue()); // 移除队首元素
            }

            return {
                victory: queue.peek(), // 返回游戏胜利者
                defeat: dieOutArr, // 返回游戏设失败者集合
            };
        }
        console.log(fn(["John", "Jack", "Alice", "Blank", "Tom"], 7)); // {victory: "John", defeat: Array(4)}
    </script>
</body>

</html>

实际上还是和上一回 Stack 的案例一样, 在 js 中我们完全可以使用数组的一些方法来而不借助于队列完成这个游戏, 譬如说这个击鼓传花, 循环队列部分就可以换成数组的 shift 与 push 方法同样可以。
所以说此处只是借用 击鼓传花 这个游戏来体验以下队列的 FIFO 原则, 以及亲手验证咱们自己实现的 Queue。

二、Deque 双端队列

1. Deque 的特点

双端队列是一种具有队列和栈的性质的数据结构, 可以同时在双端队列的两边进行删除 / 添加操作【白话概述: 当你拿到一个双端队列的时候你就可以为所欲为了, 拿他到栈用、当队列用都可以, 但是就双端队列而言如果仅仅是拿他做栈做队列那就有显得些麻烦😂】。
双端队列是限定插入和删除操作在表的两端进行的线性表。

2. 形象的理解 Deque

首先前面举得关于 Stack 的与 Queue 的生活中常见的实例在双端队列这都适用。
还有一个场景比较适合解释双端队列: 你和你爱人去电影院买票, 如果赶上十一一定会看到这些场景:
- 前面刚排队买完票的老哥突然走了没多远又回到队伍首部去询问售票员一些信息。
- 队伍后面有对儿情侣刚在队伍尾部排上队发现前面队伍太长于是放弃观看直接离开了。
- 好不容易排到你和你爱人前面仅剩一个人了就要轮到你俩了, 突然前面那位老哥他远方表哥来插队 ...
- 这在电影院中发生的一切的一切, 都说明这体现了一个双端队列的工作流程(桥段太多, 哈哈哈哈嗝 ...)。图解 :

3. 手写一个 Deque