下面给出一个不会因连续 shift() 退化的队列。入队和出队的均摊时间都是 O(1)；当已消费空间超过一半时才批量压缩一次，避免底层数组无限增长。

class Queue {
  #items = []
  #head = 0

  enqueue(value) {
    this.#items.push(value)
  }

  dequeue() {
    if (this.size === 0) return undefined
    const value = this.#items[this.#head]
    this.#head += 1
    if (this.#head > 1024 && this.#head * 2 > this.#items.length) {
      this.#items = this.#items.slice(this.#head)
      this.#head = 0
    }
    return value
  }

  get size() {
    return this.#items.length - this.#head
  }
}

队列的不变量是有效区间始终为 [head, items.length)；dequeue() 只移动 head，不移动剩余元素。批量 slice() 单次是 O(n)，但不会每次出队都发生，所以连续操作的均摊成本仍是常数级。若队列必须限制内存，应额外设置容量，并让 enqueue() 在满时拒绝、等待或丢弃，三种策略必须由业务决定。

在 JavaScript 中，栈和队列的实现一般都要依赖于数组，大家完全可以把栈和队列都看作是“特别的数组”。

（注：实际上，栈和队列作为两种运算受限的线性表，用链表来实现也是没问题的。只是从前端面试做题的角度来说，基于链表来实现栈和队列约等于脱裤子放屁（链表实现起来会比数组麻烦得多，做不到开箱即用），基本没人会这么干。这里大家按照数组的思路往下走就行了）

两者的区别在于，它们各自对数组的增删操作有着不一样的限制。因此，在学习栈与队列之前，我们需要先来明确一下数组中的增删操作具有什么样的特性、对应的方法有哪些：

数组的增删操作可以说是没有任何限制的，允许我们在任何位置执行想要的操作。

数组中增加元素的三种方法

// unshift 方法-添加元素到数组的头部
const arr = [1,2]
arr.unshift(0) // [0,1,2]

// push 方法-添加元素到数组的尾部
const arr = [1,2]
arr.push(3) // [1,2,3]

// splice 方法-添加元素到数组的任何位置
const arr = [1,2]
arr.splice(1,0,3) // [1,3,2]

这里重点讲一下这个 splice 方法。很多同学对传入两个以上的参数这种用法可能比较陌生。大家相对熟悉的应该还是 splice 用于删除的操作：

arr.splice(1,1)

第一个入参是起始的索引值，第二个入参表示从起始索引开始需要删除的元素个数。这里我们指明从索引为1的元素开始，删掉1个元素，也就相当于把 arr[1] 给删掉了。这就是数组中删除任意位置元素的方法。

至于传入两个以上参数这种用法，是用于在删除的同时完成数组元素的新增。而从第三个位置开始的入参，都代表着需要添加到数组里的元素的值：

arr.splice(1,0,3) // [1,3,2]

在这个例子里，我们就指明了从 arr[1] 开始，删掉 0 个元素，并且在索引为1的地方新增了值为3的元素。

因为删掉的元素是0个，所以说 arr[1] 中原有的元素值“2”仍然会被保留下来；同时因为我们后面又指定了 arr[1] 处需要新增一个元素3，那么这个3就会把原来arr[1]这个地方的元素给“挤到后面去”。这样我们就做到了在数组中任意位置进行元素的新增。这个过程如下图：

数组中删除元素的三种方法

// shift 方法-删除数组头部的元素
const arr = [1,2,3]
arr.shift() // [2,3]

// pop 方法-删除数组尾部的元素
const arr = [1,2,3]
arr.pop() // [1,2]

• splice 方法-删除数组任意位置的元素
• splice 方法我们上文已经详细讲过，此处不再赘述。