p5.js |队列中的出队操作

什么是队列？
队列是一种线性结构，它遵循执行操作的特定顺序。顺序是先进先出 (FIFO)。队列的一个很好的例子是资源的任何消费者队列，其中首先服务的消费者。在队列中添加或删除元素需要恒定的时间。

当我们需要处理FIFO形式的数据时，应该在数组上使用队列。

队列中的出队操作：在队列中，在将内容从队列前端移除的同时访问内容，称为出队操作。

方法：一个出列操作可能涉及以下步骤：

• 检查队列是否为空。如果队列为空，则会产生错误并退出。
• 如果队列不为空，则访问前端指向的数据元素。
• 删除元素，对缓冲区使用 array.pop() 操作。
• 返回成功。

例1：本例实现入队操作来创建队列。

  

    Dequeue Operation in Queue
      
    
  
    
  
     
        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);
    

  
                              

输出：

通过调用queue1.dequeue()函数执行两次 Dequeue 操作后，前面的值变为 3。

示例 2：

  

    Dequeue Operation in Queue
      
    
  
    
  
     
        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);
        }
          
        // Dequeue function
        Queue.prototype.dequeue = function() {
            return this.array.shift();
        }
          
        // 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);
          
        // Call to Dequeue Function
        queue1.dequeue();
        queue1.dequeue();
    

  
                        

输出：