首页 > 文章 > 前端

JavaScript队列实现教程

时间：2025-08-03 13:31:49 275浏览收藏

推广推荐

支持 PC / 移动端，安全直达

大家好，我们又见面了啊~本文《JavaScript实现队列的简单方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

JavaScript中实现队列有多种方式，最常见的是使用数组，1. 基于数组的队列通过push和shift方法实现，优点是简单易懂，push为O(1)，但shift为O(n)，性能随队列增大而下降；2. 链表实现通过节点连接，enqueue和dequeue均为O(1)，性能优越，但实现复杂且占用更多内存；3. 环形数组使用固定大小数组和head、tail指针，操作均为O(1)，空间利用率高，但大小固定不可扩展；选择方式应根据队列大小是否确定及性能需求决定，若对性能要求不高可选数组实现，若要求高性能且大小不确定应选链表，若大小固定则选环形数组，每种方式均有适用场景，需结合实际需求权衡选择。

javascript如何实现队列功能

JavaScript实现队列，本质上就是利用数组的特性，模拟队列“先进先出”的行为。数组的push和shift方法，或者unshift和pop方法，都能实现队列的基本操作。选择哪一组，取决于你对性能和代码可读性的偏好。

解决方案：

JavaScript中实现队列有多种方式，最常见的是使用数组。以下是一些实现队列的示例，以及对它们的优缺点的讨论。

基于数组的队列实现

这是最直接的实现方式。

class Queue {
  constructor() {
    this.items = [];
  }

  enqueue(element) {
    this.items.push(element);
  }

  dequeue() {
    if (this.isEmpty()) {
      return "Underflow"; // 或者抛出异常
    }
    return this.items.shift();
  }

  front() {
    if (this.isEmpty()) {
      return "No elements in Queue";
    }
    return this.items[0];
  }

  isEmpty() {
    return this.items.length == 0;
  }

  printQueue() {
    let str = "";
    for (let i = 0; i < this.items.length; i++) {
      str += this.items[i] + " ";
    }
    return str;
  }
}

// 示例
let queue = new Queue();
queue.enqueue(10);
queue.enqueue(20);
queue.enqueue(30);
console.log(queue.printQueue()); // 输出：10 20 30
console.log(queue.dequeue());   // 输出：10
console.log(queue.front());     // 输出：20

优点：

实现简单，易于理解。
push操作是O(1)的复杂度。

缺点：

shift操作是O(n)的复杂度，因为需要移动数组中的所有元素。当队列很大时，这会影响性能。

使用链表实现队列

为了避免shift操作的性能问题，可以使用链表来实现队列。

class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

class Queue {
  constructor() {
    this.front = null;
    this.rear = null;
  }

  enqueue(data) {
    let newNode = new Node(data);

    if (this.rear == null) {
      this.front = newNode;
      this.rear = newNode;
    } else {
      this.rear.next = newNode;
      this.rear = newNode;
    }
  }

  dequeue() {
    if (this.isEmpty()) {
      return "Underflow";
    }

    let temp = this.front;
    this.front = this.front.next;

    if (this.front == null) {
      this.rear = null; // 队列为空时，rear也要置为null
    }

    return temp.data;
  }

  frontElement() {
    if (this.isEmpty()) {
      return "No elements in Queue";
    }
    return this.front.data;
  }

  isEmpty() {
    return this.front == null;
  }
}

// 示例
let queue = new Queue();
queue.enqueue(10);
queue.enqueue(20);
queue.enqueue(30);
console.log(queue.dequeue());   // 输出：10
console.log(queue.frontElement()); // 输出：20

优点：

enqueue和dequeue操作都是O(1)的复杂度。

缺点：

实现相对复杂，需要定义节点类。
需要额外的内存来存储节点之间的指针。

环形数组实现队列

环形数组是一种更高级的队列实现方式，它利用固定大小的数组和两个指针（head和tail）来模拟队列。

class CircularQueue {
  constructor(capacity) {
    this.capacity = capacity;
    this.items = new Array(capacity);
    this.head = 0;
    this.tail = 0;
    this.size = 0;
  }

  enqueue(element) {
    if (this.isFull()) {
      return "Overflow";
    }
    this.items[this.tail] = element;
    this.tail = (this.tail + 1) % this.capacity;
    this.size++;
  }

  dequeue() {
    if (this.isEmpty()) {
      return "Underflow";
    }
    const item = this.items[this.head];
    this.head = (this.head + 1) % this.capacity;
    this.size--;
    return item;
  }

  front() {
    if (this.isEmpty()) {
      return "No elements in Queue";
    }
    return this.items[this.head];
  }

  isEmpty() {
    return this.size == 0;
  }

  isFull() {
    return this.size == this.capacity;
  }

  printQueue() {
    let str = "";
    let i = this.head;
    for (let j = 0; j < this.size; j++) {
      str += this.items[i] + " ";
      i = (i + 1) % this.capacity;
    }
    return str;
  }
}

// 示例
let queue = new CircularQueue(3);
queue.enqueue(10);
queue.enqueue(20);
queue.enqueue(30);
console.log(queue.printQueue()); // 输出：10 20 30
console.log(queue.dequeue());   // 输出：10
console.log(queue.front());     // 输出：20

优点：