当前位置:首页 > JavaScript

js 实现队列

2026-02-02 09:24:04JavaScript

队列的基本概念

队列是一种先进先出(FIFO)的数据结构,支持从尾部插入元素(入队)和从头部移除元素(出队)。以下是 JavaScript 中实现队列的几种方法。

使用数组实现队列

数组的 pushshift 方法可以分别实现入队和出队操作:

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

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

  dequeue() {
    if (this.isEmpty()) return "Queue is empty";
    return this.items.shift();
  }

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

  peek() {
    if (this.isEmpty()) return "Queue is empty";
    return this.items[0];
  }

  size() {
    return this.items.length;
  }
}

// 使用示例
const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
console.log(queue.dequeue()); // 输出 1
console.log(queue.peek());    // 输出 2

使用链表实现队列

链表实现可以避免数组 shift 操作的高时间复杂度(O(n)),提升性能:

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

class LinkedListQueue {
  constructor() {
    this.head = null;
    this.tail = null;
    this.length = 0;
  }

  enqueue(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      this.tail = newNode;
    }
    this.length++;
  }

  dequeue() {
    if (!this.head) return null;
    const removedNode = this.head;
    this.head = this.head.next;
    this.length--;
    if (!this.head) this.tail = null;
    return removedNode.value;
  }

  peek() {
    return this.head?.value;
  }

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

// 使用示例
const llQueue = new LinkedListQueue();
llQueue.enqueue(10);
llQueue.enqueue(20);
console.log(llQueue.dequeue()); // 输出 10

使用两个栈实现队列

通过两个栈模拟队列的 FIFO 特性,入队和出队的平均时间复杂度为 O(1):

js 实现队列

class StackQueue {
  constructor() {
    this.stack1 = []; // 用于入队
    this.stack2 = []; // 用于出队
  }

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

  dequeue() {
    if (this.stack2.length === 0) {
      while (this.stack1.length > 0) {
        this.stack2.push(this.stack1.pop());
      }
    }
    return this.stack2.pop() || "Queue is empty";
  }

  peek() {
    if (this.stack2.length > 0) {
      return this.stack2[this.stack2.length - 1];
    }
    return this.stack1[0] || "Queue is empty";
  }

  isEmpty() {
    return this.stack1.length === 0 && this.stack2.length === 0;
  }
}

// 使用示例
const sq = new StackQueue();
sq.enqueue(100);
sq.enqueue(200);
console.log(sq.dequeue()); // 输出 100

性能对比

  • 数组实现:简单但 shift 操作时间复杂度为 O(n),适合数据量小的场景。
  • 链表实现:入队和出队均为 O(1),适合频繁操作的场景。
  • 双栈实现:均摊时间复杂度为 O(1),但需要额外空间。

根据实际需求选择适合的实现方式。

标签: 队列js
分享给朋友:

相关文章

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…

js实现的游戏

js实现的游戏

JavaScript 游戏开发基础 JavaScript 是开发网页游戏的流行选择,因其无需插件即可在浏览器中运行。以下是一些关键技术和资源: HTML5 Canvas Canvas 提供了绘制图形…