js中的栈怎么表示

在JavaScript中，栈可以使用数组来表示，因为数组本身提供了许多与栈操作类似的方法，如push、pop、peek等。 其中，push用于添加元素到栈顶，pop用于移除栈顶元素，peek用于查看栈顶元素而不移除。接下来，我们将详细探讨如何在JavaScript中实现栈结构，并介绍一些常见的操作和应用。

一、栈的基本概念与实现

栈的定义

栈是一种遵循后进先出（LIFO，Last In First Out）原则的线性数据结构。栈的操作主要包括两个基本操作：入栈（push）和出栈（pop）。入栈操作将一个元素添加到栈顶，出栈操作则移除栈顶元素。

使用数组实现栈

在JavaScript中，我们可以使用数组来实现栈，因为数组自带的push和pop方法完全符合栈的操作需求。以下是一个简单的栈实现示例：

class Stack {
  constructor() {
    this.items = [];
  }
  // 入栈
  push(element) {
    this.items.push(element);
  }
  // 出栈
  pop() {
    if (this.isEmpty()) {
      return "Underflow";
    }
    return this.items.pop();
  }
  // 查看栈顶元素
  peek() {
    if (this.isEmpty()) {
      return "No elements in Stack";
    }
    return this.items[this.items.length - 1];
  }
  // 判断栈是否为空
  isEmpty() {
    return this.items.length === 0;
  }
  // 返回栈的大小
  size() {
    return this.items.length;
  }
  // 清空栈
  clear() {
    this.items = [];
  }
}

二、栈的基本操作

入栈操作

入栈操作是指将一个元素添加到栈顶。在上述实现中，push方法实现了这一功能。通过调用this.items.push(element)，我们可以将元素element添加到栈顶。

let stack = new Stack();
stack.push(10);
stack.push(20);
console.log(stack.size()); // 输出: 2

出栈操作

出栈操作是指移除并返回栈顶元素。在上述实现中，pop方法实现了这一功能。通过调用this.items.pop()，我们可以移除并返回栈顶元素。

console.log(stack.pop()); // 输出: 20
console.log(stack.size()); // 输出: 1

查看栈顶元素

查看栈顶元素的操作不移除元素，只是返回栈顶元素。在上述实现中，peek方法实现了这一功能。通过访问this.items[this.items.length - 1]，我们可以获取栈顶元素。

console.log(stack.peek()); // 输出: 10

三、栈的高级应用

栈在表达式求值中的应用

栈在表达式求值中有广泛的应用，如中缀表达式转后缀表达式（逆波兰表达式）和后缀表达式求值。在这些应用中，栈用于存储操作符和操作数，以便按照正确的顺序进行计算。

中缀表达式转后缀表达式

在中缀表达式转后缀表达式的过程中，我们使用两个栈：一个存储操作符，一个存储操作数。通过遍历中缀表达式的每个字符，我们将操作符按优先级存储到操作符栈中，将操作数存储到操作数栈中。最后，将操作符栈中的操作符依次弹出并添加到操作数栈中，得到后缀表达式。

function infixToPostfix(expression) {
  let stack = new Stack();
  let output = [];
  let precedence = {
    '+': 1,
    '-': 1,
    '*': 2,
    '/': 2
  };
  for (let i = 0; i < expression.length; i++) {
    let char = expression[i];
    // 如果是操作数，直接添加到输出列表
    if (!isNaN(char)) {
      output.push(char);
    } else if (char === '(') {
      stack.push(char);
    } else if (char === ')') {
      while (!stack.isEmpty() && stack.peek() !== '(') {
        output.push(stack.pop());
      }
      stack.pop(); // 弹出左括号
    } else {
      while (!stack.isEmpty() && precedence[char] <= precedence[stack.peek()]) {
        output.push(stack.pop());
      }
      stack.push(char);
    }
  }
  // 弹出所有操作符
  while (!stack.isEmpty()) {
    output.push(stack.pop());
  }
  return output.join(' ');
}
console.log(infixToPostfix("3+(2*4)-5")); // 输出: 3 2 4 * + 5 -

后缀表达式求值

在后缀表达式求值的过程中，我们使用一个栈存储操作数。通过遍历后缀表达式的每个字符，我们将操作数依次压入栈中。当遇到操作符时，从栈中弹出两个操作数，进行相应的运算，并将结果压入栈中。最后，栈中的唯一元素即为表达式的值。

function evaluatePostfix(expression) {
  let stack = new Stack();
  for (let i = 0; i < expression.length; i++) {
    let char = expression[i];
    // 如果是操作数，压入栈
    if (!isNaN(char)) {
      stack.push(parseInt(char));
    } else {
      let b = stack.pop();
      let a = stack.pop();
      switch (char) {
        case '+':
          stack.push(a + b);
          break;
        case '-':
          stack.push(a - b);
          break;
        case '*':
          stack.push(a * b);
          break;
        case '/':
          stack.push(a / b);
          break;
      }
    }
  }
  return stack.pop();
}
console.log(evaluatePostfix("324*+5-")); // 输出: 6

四、栈在浏览器历史记录中的应用

浏览器历史记录是栈应用的一个典型例子。在浏览网页时，浏览器会将用户访问的每一个页面压入历史记录栈。当用户点击“后退”按钮时，浏览器会从栈中弹出当前页面，并显示前一个页面。

历史记录栈的实现

我们可以使用两个栈来模拟浏览器的历史记录：一个栈用于存储前进历史记录，另一个栈用于存储后退历史记录。每次访问新页面时，将当前页面压入前进历史记录栈，并清空后退历史记录栈。每次点击“后退”按钮时，将前进历史记录栈顶元素弹出，并压入后退历史记录栈。每次点击“前进”按钮时，将后退历史记录栈顶元素弹出，并压入前进历史记录栈。

class BrowserHistory {
  constructor() {
    this.forwardStack = new Stack();
    this.backwardStack = new Stack();
  }
  visit(page) {
    this.forwardStack.push(page);
    this.backwardStack.clear();
  }
  back() {
    if (this.forwardStack.size() > 1) {
      this.backwardStack.push(this.forwardStack.pop());
      return this.forwardStack.peek();
    }
    return null;
  }
  forward() {
    if (!this.backwardStack.isEmpty()) {
      this.forwardStack.push(this.backwardStack.pop());
      return this.forwardStack.peek();
    }
    return null;
  }
}
let history = new BrowserHistory();
history.visit("Page1");
history.visit("Page2");
history.visit("Page3");
console.log(history.back()); // 输出: Page2
console.log(history.back()); // 输出: Page1
console.log(history.forward()); // 输出: Page2

五、栈在递归中的应用

递归是一种常见的编程技术，通常用于解决分治问题。在实现递归算法时，系统会使用一个隐式栈来存储递归调用的状态。当递归调用返回时，系统会从栈中弹出先前的状态，并继续执行。

使用显式栈实现递归

在某些情况下，我们可以使用显式栈来替代递归调用，从而避免系统栈溢出。以下是一个使用显式栈实现的二叉树前序遍历示例：

class TreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}
function preOrderTraversal(root) {
  if (root === null) return [];
  let stack = new Stack();
  let output = [];
  stack.push(root);
  while (!stack.isEmpty()) {
    let node = stack.pop();
    output.push(node.value);
    if (node.right !== null) {
      stack.push(node.right);
    }
    if (node.left !== null) {
      stack.push(node.left);
    }
  }
  return output;
}
let root = new TreeNode(1);
root.left = new TreeNode(2);
root.right = new TreeNode(3);
root.left.left = new TreeNode(4);
root.left.right = new TreeNode(5);
console.log(preOrderTraversal(root)); // 输出: [1, 2, 4, 5, 3]

六、栈在算法设计中的应用

栈在算法设计中有广泛的应用，如深度优先搜索（DFS）、括号匹配、汉诺塔问题等。在这些应用中，栈用于存储临时状态和中间结果，从而简化算法的实现。

深度优先搜索（DFS）

深度优先搜索是一种遍历图的算法。在实现DFS时，我们可以使用栈来存储未访问的节点。每次从栈中弹出一个节点，并将其所有未访问的邻居节点压入栈中，直到栈为空。

function depthFirstSearch(graph, start) {
  let stack = new Stack();
  let visited = new Set();
  let result = [];
  stack.push(start);
  while (!stack.isEmpty()) {
    let node = stack.pop();
    if (!visited.has(node)) {
      visited.add(node);
      result.push(node);
      for (let neighbor of graph[node]) {
        if (!visited.has(neighbor)) {
          stack.push(neighbor);
        }
      }
    }
  }
  return result;
}
let graph = {
  1: [2, 3],
  2: [4, 5],
  3: [6, 7],
  4: [],
  5: [],
  6: [],
  7: []
};
console.log(depthFirstSearch(graph, 1)); // 输出: [1, 3, 7, 6, 2, 5, 4]

括号匹配

括号匹配是一个经典的问题，通常用于验证表达式中的括号是否成对出现并正确嵌套。在实现括号匹配时，我们可以使用栈来存储未匹配的左括号。当遇到右括号时，从栈中弹出一个左括号，并检查是否匹配。如果栈为空或不匹配，则表达式中的括号不正确。

function isValidParentheses(expression) {
  let stack = new Stack();
  let pairs = {
    ')': '(',
    '}': '{',
    ']': '['
  };
  for (let char of expression) {
    if (['(', '{', '['].includes(char)) {
      stack.push(char);
    } else if ([')', '}', ']'].includes(char)) {
      if (stack.isEmpty() || stack.pop() !== pairs[char]) {
        return false;
      }
    }
  }
  return stack.isEmpty();
}
console.log(isValidParentheses("(){}[]")); // 输出: true
console.log(isValidParentheses("([{}])")); // 输出: true
console.log(isValidParentheses("([)]")); // 输出: false

汉诺塔问题

汉诺塔问题是一个经典的递归问题。虽然通常使用递归来解决汉诺塔问题，但我们也可以使用栈来实现非递归解法。在实现非递归解法时，我们使用三个栈分别表示三个柱子，并模拟递归调用的过程。

function hanoi(n, from, to, aux) {
  let stack = new Stack();
  let moves = [];
  stack.push([n, from, to, aux]);
  while (!stack.isEmpty()) {
    let [n, from, to, aux] = stack.pop();
    if (n === 1) {
      moves.push(`Move disk 1 from ${from} to ${to}`);
    } else {
      stack.push([n - 1, aux, to, from]);
      stack.push([1, from, to, aux]);
      stack.push([n - 1, from, aux, to]);
    }
  }
  return moves;
}
console.log(hanoi(3, 'A', 'C', 'B'));
/*
输出:
[
  'Move disk 1 from A to C',
  'Move disk 2 from A to B',
  'Move disk 1 from C to B',
  'Move disk 3 from A to C',
  'Move disk 1 from B to A',
  'Move disk 2 from B to C',
  'Move disk 1 from A to C'
]

七、栈在项目管理系统中的应用

在项目管理系统中，栈可以用于实现任务管理和撤销操作。例如，在研发项目管理系统PingCode和通用项目协作软件Worktile中，栈可以用于存储任务的历史状态，以便用户可以撤销和恢复操作。

任务管理

在任务管理中，我们可以使用栈来存储任务的历史状态。当用户对任务进行修改时，将当前状态压入栈中。当用户点击“撤销”按钮时，从栈中弹出前一个状态，并恢复任务的状态。

class TaskManager {
  constructor() {
    this.task = null;
    this.history = new Stack();
  }
  setTask(task) {
    if (this.task !== null) {
      this.history.push(this.task);
    }
    this.task = task;
  }
  undo() {
    if (!this.history.isEmpty()) {
      this.task = this.history.pop();
    }
  }
  getTask() {
    return this.task;
  }
}
let manager = new TaskManager();
manager.setTask({ name: "Task 1", status: "InProgress" });
manager.setTask({ name: "Task 1", status: "Completed" });
console.log(manager.getTask()); // 输出: { name: 'Task 1', status: 'Completed' }
manager.undo();
console.log(manager.getTask()); // 输出: { name: 'Task 1', status: 'InProgress' }

撤销操作

在撤销操作中，我们可以使用两个栈分别存储撤销和重做的操作。每次执行操作时，将当前状态压入撤销栈，并清空重做栈。每次点击“撤销”按钮时，从撤销栈中弹出前一个状态，并将当前状态压入重做栈。每次点击“重做”按钮时，从重做栈中弹出前一个状态，并将当前状态压入撤销栈。

class UndoManager {
  constructor() {
    this.undoStack = new Stack();
    this.redoStack = new Stack();
    this.currentState = null;
  }
  execute(state) {
    if (this.currentState !== null) {
      this.undoStack.push(this.currentState);
    }
    this.currentState = state;
    this.redoStack.clear();
  }
  undo() {
    if (!this.undoStack.isEmpty()) {
      this.redoStack.push(this.currentState);
      this.currentState = this.undoStack.pop();
    }
  }
  redo() {
    if (!this.redoStack.isEmpty()) {
      this.undoStack.push(this.currentState);
      this.currentState = this.redoStack.pop();
    }
  }
  getState() {
    return this.currentState;
  }
}
let undoManager = new UndoManager();
undoManager.execute({ name: "Task 1", status: "InProgress" });
undoManager.execute({ name: "Task 1", status: "Completed" });
console.log(undoManager.getState()); // 输出: { name: 'Task 1', status: 'Completed' }
undoManager.undo();
console.log(undoManager.getState()); // 输出: { name: 'Task 1', status: 'InProgress' }
undoManager.redo();
console.log(undoManager.getState()); // 输出: { name: 'Task 1', status: 'Completed' }

八、总结

通过以上内容，我们详细探讨了栈在JavaScript中的表示方法及其在不同场景中的应用。栈作为一种基本的数据结构，具有广泛的应用场景，包括表达式求值、浏览器历史记录、递归实现、算法设计以及项目管理系统等。在实际应用中，合理地使用栈可以简化问题的解决过程，提高代码的可读性和维护性。