使用 P5.js 实现并可视化队列的出队操作

什么是队列？

队列是一种线性数据结构，它遵循特定的操作执行顺序。这个顺序就是先进先出 (FIFO)。队列的一个典型例子是消费者排队获取资源，先来的消费者先接受服务。在队列中添加或删除一个元素只需要常数时间。

!queue

当我们需要以 FIFO 的形式处理数据时，应该使用队列而不是数组。

队列中的出队操作：

在队列中，访问内容并从队列的前端移除该元素的操作被称为 出队 (Dequeue) 操作。

!image

操作思路：

一个出队操作通常包含以下步骤：

• 检查队列是否为空。如果队列为空，则报错并退出。
• 如果队列不为空，则访问前端指针所指向的数据元素。
• 使用数组的 pop() 操作（或相应的逻辑）删除该元素。
• 返回成功状态。

示例 1：

这个例子首先实现了入队操作来创建一个队列。

    
    
    

    

     
        body {
            padding: 0;
            margin: 0;
        } 
        canvas {
            vertical-align: top;
        }
    


    
    
    
        // Define Queue function 
        function Queue(array) {
            this.array = [];
            if (array) this.array = array;
        }
        
        // Add Get Buffer property to object constructor
        // which slices the array
        Queue.prototype.getBuffer = function() {
            return this.array.slice();
        }
        
        // Add isEmpty properties to object constructor which
        // returns the length of the array
        Queue.prototype.isEmpty = function() {
            return this.array.length == 0;
        }
        
        // Instance of the Queue class
        var queue1 = new Queue(); // Queue { array: [] }
        
        console.log(queue1);
        
        // Add Push property to object constructor 
        // which push elements to the array
        Queue.prototype.enqueue = function(value) {
            this.array.push(value);
        }
        
        function setup() {
            
            // Create Canvas of size display width * 300
            createCanvas(displayWidth, 300);
        }
        
        function draw() {
        
            // Set background color
            background("grey");
            
            // Set stroke weight
            strokeWeight(3);
            textAlign(CENTER);
            textSize(24);
            text("Queue Implementation Using P5.js",
                        windowWidth/2, 20);
            textAlign(LEFT);
            textSize(14);
            
            // Set stroke color
            stroke(‘green‘);
            line(10, 45, 90, 45);
            rect(10, 30, 60, 30);
            noStroke();
            text("FRONT", 20, 50);
            
            // Display queue
            for(var i = 0; i <= queue1['array'].length-1; i++) {
                var p = 10;
                translate(70, 0);
                strokeWeight(3);
                stroke('green');
                line(10+p, 45, p+80, 45);
            
                rect(10+p, 30, 40+p, 30);
                noStroke();
                text(queue1['array'][i], 40, 50);
                p += 10;
            }
            
            // Set stroke color
            stroke('green');
            translate(70, 0);
            rect(10, 30, 60, 30);
            noStroke();
            text("REAR", 20, 50);
        }
        
        // Peek Function
        Queue.prototype.peek = function() {
            return this.array[this.array.length-1];
        }
        
        // Driver Code
        // Call to Enqueue operation
        queue1.enqueue(1);
        queue1.enqueue(2);
        queue1.enqueue(3);
        queue1.enqueue(19);
        queue1.enqueue(11);
        queue1.enqueue(15);
        queue1.enqueue(14);
        queue1.enqueue(18);
        queue1.enqueue(25);
    

输出：

!image

在通过调用 queue1.dequeue() 函数执行了两次出队操作后，前端的值变为了 3。

示例 2：

接下来，让我们看看如何实现具体的出队逻辑。

    
    
    

    

     
        body {
            padding: 0;
            margin: 0;
        } 
        canvas {
            vertical-align: top;
        }
    



    
        // 定义 Queue 构造函数
        function Queue(array) {
            this.array = [];
            if (array) this.array = array;
        }

        // 创建队列实例
        var queue1 = new Queue();

        // 向数组添加元素
        Queue.prototype.enqueue = function(value) {
            this.array.push(value);
        }

        // 执行出队操作：移除并返回第一个元素
        Queue.prototype.dequeue = function() {
            return this.array.shift();
        }

        function setup() {
            createCanvas(displayWidth, 300);
        }

        function draw() {
            background("grey");
            strokeWeight(3);
            textAlign(CENTER);
            textSize(24);
            text("Queue Dequeue Operation",
                        windowWidth/2, 20);
            textAlign(LEFT);
            textSize(14);

            stroke(‘green‘);
            // 绘制 FRONT 指示器
            text("FRONT", 20, 50);

            // 循环显示队列中的元素
            for(var i = 0; i < queue1['array'].length; i++) {
                var p = 10;
                translate(70, 0);
                stroke('green');
                line(10+p, 45, p+80, 45);
                rect(10+p, 30, 40+p, 30);
                noStroke();
                text(queue1['array'][i], 40, 50);
                p += 10;
            }

            stroke('green');
            translate(70, 0);
            // 绘制 REAR 指示器
            text("REAR", 20, 50);
        }

        // 初始化队列
        queue1.enqueue(10);
        queue1.enqueue(20);
        queue1.enqueue(30);
        queue1.enqueue(40);
        queue1.enqueue(50);

        // 测试代码：执行一次出队
        // 此时 queue1 将变为 [20, 30, 40, 50]
        console.log("Dequeued element: " + queue1.dequeue());
    

通过上述代码，我们可以直观地看到数据是如何按照先进先出的原则从队列中移除的。