一文让你快速了解JavaScript栈

2025-11-03 17:45:17

前言

前面两篇文章介绍了数据结构和算法的一些前置内容，这篇文章开始正式学习常见的数据结构，首先学习的就是栈（Stack）。

什么是栈？

栈全称为堆栈，是一种先进后出的的数据结构，栈中只有两种基本操作，也就是插入和删除，也就是入栈和出栈操作，栈只有一端可以进行入栈和出栈操作，我们将其称为栈顶，另一端称其为栈底；如下图展示了栈这个数据结构：

JavaScript中的栈

JavaScript并没有栈这个数据类型，但是可以通过数组进行模拟，而且数组中提供的push()和pop()选项，正好实现先入后出的的操作，

示例代码如下：

const stack = []

// 入栈
stack.push(1)
stack.push(2)
// 出栈
const v1 = stack.pop() // 2
const v2 = stack.pop() // 1

栈的应用场景

栈是算法和程序中最常用的辅助结构，其的应用十分广泛，凡是需要先进后出场景都有栈的身影，比如：

函数调用堆栈
判断字符串括号是否有效

接下来我们依次来看：

函数调用堆栈

JavaScript中的函数调用堆栈就是一个应用栈的一个典型例子，比如下面这段代码：

function f1() {}
function f2() {
  f1()
}
function f3() {
  f2()
}
f3()

如下图：

执行过程如下：

调用函数f3()，将f3压入堆栈；
在f3()中调用了f2()，将f2压入堆栈；
在f2()中又调用了f1()，将f1压入堆栈；
只有f1()运行完成才能继续往下执行，所以f1()先出栈，以此类推。

有效的括号

有效的括号是力扣中的一个关于栈的算法题目，题目大意就是判断给定字符串中的括号是否匹配，匹配返回true，否则返回false。

解题思路如下：

判断字符串的长度是否为偶数，不为偶数直接返回false，因为括号都是成对出现的；
新建一个栈；
遍历字符串，遍历到每一项时如果时左括号，将其压入栈；如果是右括号，与栈顶对比，如果相匹配则出栈，不匹配则返回false。

实现代码如下：

/**
 * @param {string} s
 * @return {boolean}
 */
var isValid = function(s) {
    if (s.length % 2 !== 0) return false
    const stack = []
    for(let i = 0; i<s.length; i++) {
        const c = s[i] // 记录当前项
        if (c === '(' || c === '[' || c==='{') {
            stack.push(c)
        } else {
            const t = stack[stack.length - 1] // 获取栈顶元素
            if (
                (t === '(' && c === ')') ||
                (t === '[' && c === ']') ||
                (t === '{' && c === '}')
            ) {
                stack.pop()
            } else {
                return false
            }
        }
    }
    // 如果为0表示全部匹配，有剩余则表示不匹配
    return stack.length === 0
};

肯有还有更优的写法，这里直接使用的暴力解法。

总结

到此这篇关于一文让你快速了解JavaScript栈的文章就介绍到这了,更多相关JS 栈内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS堆栈内存的运行机制详解

目录栈内存 ECStack 堆内存数据类型创建步骤在js引擎中对变量的存储主要有两个位置,堆内存和栈内存.栈内存主要用于存储各种基本类型的变量,包括Boolean.Number.String.Undefined.Null,以及对象变量的指针(地址值).栈内存中的变量一般都是已知大小或者有范围上限的,算作一种简单存储.而堆内存主要负责像对象Object这种变量类型的存储,对于大小这方面,一般都是未知的. 栈内存 ECStack 栈内存ECStack(Execution Context Sta
深入内存原理谈JS中变量存储在堆中还是栈中

目录一.装不进冰箱的大象二.影分身的字符串三.如朕亲临的 '奇球' 四.扑朔迷离的数字五.小结:基本类型到底存在哪里? JavaScript中基本类型存储在堆中还是栈中? ---- 不基本类型的基本类型看到这个问题,相信大家都觉得这个题目实在基础的不能再基础了.随手百度一下,就能看到很多人说:基本类型存在栈中,引用类型存在堆中. 真的这么简单么? 一.装不进冰箱的大象让我们看一下这段代码: 在这里,我们声明了一个67MiB大小的字符串,如果字符串真的存在栈中,这就不好解释了.毕竟,v
JavaScript中栈和队列应用详情

目录什么是栈和队列什么时候用到栈目录的计算什么是栈和队列栈如果用数组模拟的话是类似于一个U形桶状堆栈空间,地下是封口的,只能从顶部一个地方进出,它的进出都是有顺序的,看下图:如果是进入,则是最下是最先进入的,如果要出,则是从最顶部先出和队列来对比,只是数据结构相同,队列是一侧进一侧出,做任务队列调度的时候都是先入先出什么时候用到栈从编辑器开发写代码的时候,如果代码的中的括号写错了,则很容易判定出那个地方少了括号,在JavaScript语法中有可以设定大括号{}.中括号:[].小括
JavaScript实现栈结构详细过程

目录一.认识栈结构二.栈结构封装三.十进制转化为二进制一.认识栈结构我们知道数组是一种常见的数据结构,并且可以在数组的任意位置插入和删除数据,但是有时候,我们为了实现某些功能,必须对这种任意性加以限制,而栈和队列就是比较常见的受限的数据结构,我们先来看看栈. 栈(stack),它是一种受限的线性表,后进先出(LIFO) 其限制性是允许在表的一端进行插入和删除运算.这一端被称为栈顶,相对的,把另一端,称为栈底. LIFO(last in first out)表示就是后进入的元素,第一个弹
使用java生成json时产生栈溢出错误问题及解决方案

目录 java生成json时产生栈溢出错误环境这里会出现栈溢出错误 json转换时出现栈内存溢出 java生成json时产生栈溢出错误环境 java + hibernate +html 本来,java中使用json事件很正常的事,但小心有的地方有点“坎儿”. 比如,在java中建立了json对象想传到前台去: List<Comment> commentsList = commentMng.findByArticleId(articleid); JSONArray jsonMembers
jstack+jdb命令查看线程及死锁堆栈信息的实例

如果程序挂死,有时使用jstack查看进程中线程信息时,需要添加上-F参数,此时如果有死锁信息,则可能不会打印出死锁堆栈信息,使用jdb则可以查看当前死锁线程的运行堆栈. 如下模拟一个简单的死锁程序 package com.demo.bootdemo; import java.util.HashMap; import java.util.Map; import org.springframework.context.ApplicationListener; import org.springfr
一文让你快速了解JavaScript栈

目录前言什么是栈? JavaScript中的栈栈的应用场景函数调用堆栈有效的括号总结前言前面两篇文章介绍了数据结构和算法的一些前置内容,这篇文章开始正式学习常见的数据结构,首先学习的就是栈(Stack). 什么是栈? 栈全称为堆栈,是一种先进后出的的数据结构,栈中只有两种基本操作,也就是插入和删除,也就是入栈和出栈操作,栈只有一端可以进行入栈和出栈操作,我们将其称为栈顶,另一端称其为栈底:如下图展示了栈这个数据结构: JavaScript中的栈 JavaScript并没有栈这个数
vue3 文档梳理快速入门

目录一.setup 1. setup 函数中的第一个参数 -- props 2. contextcontext 二.setup 函数的返回值 1.setup 函数的返回值 -- 对象三.响应式系统 API 1. reactive 2. ref 3. computed 4. readonly 5. watchEffect 5.1 停止侦听 5.2 清除副作用 5.3 副作用刷新时机 5.4 侦听器调试 6. watch 6.1 侦听多个数据源 6.2 与 watchEffect 共享的行为
JavaScript 栈的详解及实例代码

JavaScript 栈栈是一种遵从先进后出(LIFO)原则的有序集合. 新添加或待删除的元素都保存在栈的末尾,称作栈顶,另一端就叫栈底. 在栈里,新元素都靠近栈顶,旧元素都接近栈底昨天因为有点事没有更新,今天打算给大家讲讲JavaScript实现的数据结构数据结构与算法是程序语言的灵魂,是解决一切编程问题的基础以前学C/C++的时候,感觉算法还是非常重要的,但是前端涉及的并不多不管怎样,作为技术人员,理解一些基本数据结构和算法应该是必须的而且我们的JavaScript实现数据结构和
详解JavaScript栈内存与堆内存

内存分配在编译阶段,除了声明变量和函数,查找环境中的标识符这两项工作之外,还会进行内存分配.不同类型的数据会分配到不同的内存空间: 栈内存:引擎执行代码时工作的内存空间,除了引擎,也用来保存基本值和引用类型值的地址. 堆内存:用来保存一组无序且唯一的引用类型值,可以使用栈中的键名来取得. 示意图: 赋值与赋址引擎不能直接操作堆内存中的数据,这就造成了对同一个变量赋不同类型的值,会出现完全不同的效果:为一个变量赋基本值时,实际上是创建一个新值,然后把该值赋给新变量,可以说这是一种真正意义上的"
JavaScript栈和队列相关操作与实现方法详解

本文实例讲述了JavaScript栈和队列相关操作与实现方法.分享给大家供大家参考,具体如下: 一.栈的介绍栈就是和列表类似的一种数据结构,数据只能在栈顶添加或者删除.栈是一种特殊的列表,栈内的元素只能通过列表的一端访问,成为栈顶.栈具有后进先出的特点,所以任何不在栈顶的元素都无法访问. 后进先出(LIFO,last-in-first-out)的数据结构. 对栈的操作 1.对栈的两种主要操作为将一个元素压入栈和将一个元素弹出栈. 入栈:push(); 出栈:pop(); 2.预览栈顶的元素pe
一文搞懂如何避免JavaScript内存泄漏

目录一.什么是内存泄漏二.常见的内存泄漏 1.意外的全局变量 2. 计时器 3. 闭包 4. 事件监听器 5.缓存 6.分离的DOM元素三.识别内存泄漏 1.使用性能分析器可视化内存消耗 2. 识别分离的 DOM 节点大家好,我是CUGGZ.SPA(单页应用程序)的兴起,促使我们更加关注与内存相关的 JavaScript 编码实践.如果应用使用的内存越来越多,就会严重影响性能,甚至导致浏览器的崩溃.下面就来看看JavaScript中常见的内存泄漏以及如何避免内存泄漏. 一.什么是内存泄漏
一文带你玩转JavaScript的箭头函数

目录箭头函数语法规则简写规则常见应用 map filter reduce 箭头函数中的this使用 concat this的查找规则箭头函数在ES6中新增了函数的简写方式----箭头函数,箭头函数的出现不仅简化了大量代码,也让代码看起来更加优雅,同时也解决了this指向问题,下面我们就来详细讲解如何玩转箭头函数. 语法规则 1.之前的方法 function foo1(){} var foo2 = function(name,age){ console.log("函数体代码"
一文带你搞懂JavaScript中的进制与进制转换

目录进制介绍进制转换 parseInt(str, radix) Number() +(一元运算符) Number.prototype.toString(radix) 自定义转换十进制与十六进制转换十进制和二进制转换进制介绍 JavaScript 中提供的进制表示方法有四种:十进制.二进制.十六进制.八进制. 对于数值字面量,主要使用不同的前缀来区分: 十进制(Decimal):取值数字 0-9:不用前缀. 二进制(Binary):取值数字 0 和 1 :前缀 0b 或 0B. 十六进制
快速学习JavaScript的6个思维技巧

我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候. 找不到时间(有时是动力)学习. 很容易忘记已经理解了的东西. 工具多又在不断变化,所以不知道从哪里开始. 幸运的是,这些拦路虎是可以被识别,并消灭的.在这篇文章中,我将介绍六个思维技巧来帮助你更快地学习JavaScript,并成为一个更快乐.更富有成效的程序员. 1.不要让未来的决策阻止你现在前进的方向很多人学习JavaScript,问的第一个
一文带你快速学会JDBC及获取连接的五种方式

目录 1. JDBC基本介绍 2. JDBC快速入门 2.1 JDBC程序编写步骤 2.2 案例演示 2.2.1 前置工作,在数据库中建立对应表 2.2.2 前置工作,导入MySQL数据库的对应jar包 3. 相关类的介绍 3.1 Statement 3.2 ResultSet[结果集] 3.3 PreparedStatement 4. 关闭资源 5. 获取数据库连接的五种方式方式一方式二方式三方式四方式五总结快速学会JDBC及获取连接的五种方式 1. JDBC基本介绍 JDBC为