用 JavaScript 实现栈与队列：超乎想像的应用和优势

2023-09-26 17:25:33

无论是作为一名程序员还是 web 开发人员，栈和队列都是我们熟悉却经常被忽略的两种数据结构。栈和队列在我们的编程生涯中扮演着重要的角色，但很少有人意识到它们背后的原理。本文将向您阐述这两个结构的奥秘，探讨它们在各种应用中的妙用，并提供用 JavaScript 实现它们的技巧，帮助您将编程能力提升到一个新的高度。

1. 栈与队列：它们是什么以及为什么重要？

栈和队列是抽象数据类型（ADT），这意味着它们仅提供了一种操作数据的方式，而无需关注它们的内部实现方式。栈和队列的重要之处在于，它们以结构化的方式组织数据，在多种应用场景中提供了一种高效的数据访问机制。

1.1 栈：先进后出

栈是一种遵循后进先出（LIFO）原则的数据结构。也就是说，最后一个放入栈中的元素将首先被移除。栈的典型应用场景包括：

撤销/重做操作：文本编辑器或绘图软件使用栈来存储用户最近的编辑操作，以便随时撤销或重做。
函数调用：当一个函数调用另一个函数时，栈中会存储当前函数的状态，以便在子函数完成后恢复到原有状态。
浏览历史记录：Web 浏览器使用栈来存储用户浏览过的网页，以便用户可以轻松返回上一页或下一页。

1.2 队列：先进先出

队列是一种遵循先进先出（FIFO）原则的数据结构。也就是说，最早放入队列中的元素将首先被移除。队列的典型应用场景包括：

任务队列：操作系统使用队列来管理需要执行的任务，以便按照一定的顺序依次执行。
事件循环：Web 浏览器使用队列来处理事件（例如，单击、鼠标移动等），以便浏览器能够对用户交互做出及时的响应。
打印队列：打印机使用队列来存储需要打印的文件，以便按照一定的顺序依次打印。

2. 用 JavaScript 实现栈与队列

现在，我们已经对栈和队列有了一定的了解，让我们学习如何用 JavaScript 实现它们。

2.1 栈的 JavaScript 实现

我们可以使用数组来轻松实现栈。数组的 push() 和 pop() 方法可以分别在栈的顶部添加和移除元素。

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

  push(item) {
    this.items.push(item);
  }

  pop() {
    return this.items.pop();
  }

  peek() {
    return this.items[this.items.length - 1];
  }

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

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

2.2 队列的 JavaScript 实现

我们也可以使用数组来实现队列。数组的 shift() 和 push() 方法可以分别从队列的头部移除元素并在队列的尾部添加元素。

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

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

  dequeue() {
    return this.items.shift();
  }

  peek() {
    return this.items[0];
  }

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

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