Home  >  Article  >  Web Front-end  >  Detailed introduction to queues in JavaScript (code examples)

Detailed introduction to queues in JavaScript (code examples)

不言
不言forward
2019-02-13 09:36:092098browse

This article brings you a detailed introduction (code example) about queues in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Definition of Queue

A queue is an ordered set of items that follows the first-in, first-out principle. The difference from a stack is that the stack does not matter whether it is pushed in or out. Stack operations are all performed on the top of the stack, while queues add elements to the end of the queue and remove elements from the top of the queue. A diagram is used to represent the process:

Detailed introduction to queues in JavaScript (code examples)

Use A more vivid example is: queuing service, the person who queues up first will always receive the service first, of course, regardless of the situation of queue jumping

Queue Creation

And Stack The creation is similar. First create a function representing the queue, and then define an array to save the elements in the queue:

function Queue() {
  let items = []
}

After creating the queue, you need to define some methods for it. Generally speaking, the queue contains the following methods:

  • enqueue(element): Add a new item to the end of the queue

  • dequeue(): Remove the first item of the queue and return Removed elements

  • front(): Returns the first item of the queue, and the queue does not make any changes

  • isEmpty(): If the queue There is no element in the return true, otherwise it returns false

  • size(): Returns the number of elements contained in the queue

Specific implementation:

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.size = function () {
    return items.length
  }
  // 打印队列,方便观察
  this.print = function () {
    console.log(items.toString())
  }
}

Use of queue

Next let’s look at the use of queue:

let queue = new Queue()
queue.enqueue('a')
queue.enqueue('b')
queue.enqueue('c')
queue.dequeue()
queue.print()

First add three elements to the queue: a, b, c, then remove an element from the queue, and finally print the existing queue. Let us illustrate this process together:

Detailed introduction to queues in JavaScript (code examples)

es6 implements Queue

Same as implementing the Stack class, you can also use the es6 class syntax to implement the Queue class, use WeakMap to save private attribute items, and use closures to return the Queue class. Let’s look at the specific implementation:

let Queue = (function () {
  let items = new WeakMap
  class Queue {
    constructor () {
      items.set(this, [])
    }
    enqueue (element) {
      let q = items.get(this)
      q.push(element)
    }
    dequeue () {
      let q = items.get(this)
      return q.shift()
    }
    front () {
      let q = items.get(this)
      return q[0]
    }
    isEmpty () {
      let q = items.get(this)
      return q.length === 0
    }
    size () {
      let q = items.get(this)
      return q.length
    }
    print () {
      let q = items.get(this)
      console.log(q.toString())
    }
  }
  return Queue
})()
let queue = new Queue()
queue.enqueue('a')
queue.enqueue('b')
queue.enqueue('c')
queue.dequeue()
queue.print()

Priority Queue

Priority queue, as its name implies: each element in the queue will have its own priority. When inserting, the insertion operation will be performed according to the order of priority, which is a bit different from the previous queue implementation. The difference is that there are more elements in the queue with priority attributes. Let’s look at the specific code:

function PriorityQueue() {
  let items = []
  // 队列元素,多定义一个优先级变量
  function QueueElement(element, priority) {
    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 <p> When joining the queue, if the queue is empty, add it directly to the queue. Otherwise, compare, and the smaller priority will be given priority. The higher the level, the higher the priority is placed at the front of the queue. Let’s use a diagram to see the calling process: <br></p><p><img src="https://img.php.cn/upload/image/471/355/539/1550021327400018.png" title="1550021327400018.png" alt="Detailed introduction to queues in JavaScript (code examples)"></p><p   style="max-width:90%"><strong>Circular Queue</strong></p><p> As the name suggests, the circular queue is: given a number, then iterates the queue, removes an item from the beginning of the queue, and then adds it to the end of the queue. When the loop reaches the given number, jump out of the loop and move from the head of the queue. Remove one item until there is one element left. Let’s look at the specific code: </p><pre class="brush:php;toolbar:false">unction 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.size = function () {
    return items.length
  }
  this.print = function () {
    console.log(items.toString())
  }
}
function loopQueue(list, num) {
  let queue = new Queue()
  for (let i = 0; i<list.length> 1) {
    for (let j = 0; j<num console.log></num></list.length>

The above is the detailed content of Detailed introduction to queues in JavaScript (code examples). For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete