前端开发必备数据结构：栈，用通俗易懂的方式讲清楚

2023-11-21 04:19:14

探索栈的数据结构：理解其概念、用途和实现

导言

在前端开发中，掌握数据结构和算法至关重要。其中，栈是一种非常重要的数据结构，在处理顺序数据方面有着广泛的应用。本文将以通俗易懂的方式，深入讲解栈的概念、用途和实现方式，并通过代码示例和算法题加以理解。

栈的概念

栈是一种遵循后进先出（LIFO）原则的数据结构。这意味着后放入栈中的元素，会最先被取出。可以将栈想象成一叠盘子，后放上的盘子会先取走，而最先放上的盘子会最后取走。栈通常使用数组或链表来实现。使用数组时，新元素会压入（push）到数组末尾，而从栈顶弹出的元素（pop）也是数组的最后一个元素。而使用链表时，新元素会压入到链表头结点，并从头结点弹出。

栈的用途

栈在前端开发中有着广泛的应用，包括：

浏览器历史记录管理： 浏览器使用栈来管理用户的浏览历史。当用户访问新页面时，新页面会被压入栈中，而当前页面会被弹出栈。
函数调用： 当函数被调用时，函数的参数和局部变量会被压入栈中。当函数返回时，这些数据会被从栈中弹出。
表达式求值： 栈可以用来求值中缀表达式。中缀表达式是一种数学表达式，其中运算符位于操作数之间。使用栈，我们可以将操作数压入栈中，然后依次弹出操作数进行运算。

JavaScript中的栈

在 JavaScript 中，可以通过数组实现栈。我们可以使用 push() 方法将元素压入栈中，使用 pop() 方法弹出栈顶元素。

// 使用数组实现栈
const stack = [];

// 将元素压入栈
stack.push(1);
stack.push(2);
stack.push(3);

// 弹出栈顶元素
const poppedElement = stack.pop(); // 3

// 查看栈顶元素
const topElement = stack[stack.length - 1]; // 2

LeetCode 算法题

LeetCode 是一个在线算法题库，其中包含了许多栈相关的算法题。以下是一道经典的栈算法题：

验证括号的有效性

给定一个字符串，其中包含圆括号、方括号和花括号。判断该字符串中的括号是否有效。有效括号必须满足以下条件：

每个括号都必须有其对应的闭合括号。
每个开括号都必须在对应的闭合括号之前。

示例：

输入："{[]}"
输出：true

解题思路：

我们可以使用栈来解决此问题。对于输入字符串中的每个字符，如果它是开括号，则将其压入栈中。如果它是闭合括号，则查看栈顶元素是否与其匹配。如果匹配，则弹出栈顶元素。否则，返回 false。

/**
 * @param {string} s
 * @return {boolean}
 */
const isValid = (s) => {
  const stack = [];
  const brackets = {
    ')': '(',
    '}': '{',
    ']': '['
  };

  for (const char of s) {
    if (char in brackets) {
      const top = stack[stack.length - 1];
      if (top === brackets[char]) {
        stack.pop();
      } else {
        return false;
      }
    } else {
      stack.push(char);
    }
  }

  return stack.length === 0;
};