初次接触AST——抽象语法树

已于 2022-09-14 10:22:08 修改
阅读量360 收藏
点赞数 1
分类专栏： 干货技术 粉丝专享 文章标签： javascript 前端 json
于 2022-08-29 14:43:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Rookie_lei/article/details/126520102
版权
本文介绍了抽象语法树（AST）的概念，通过esprima将JavaScript代码转换为AST，estraverse遍历并操作语法树，以及escodegen将变更后的AST转回代码。这个过程在代码变更和编译中起关键作用，如Babel插件的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

AST——抽象语法树


AST——抽象语法树，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

先看一段代码：

// An highlighted block
var foo = 'bar';

转换成语法树的JSON格式是什么：

// An highlighted block
{
   
  "type": "Program",
了解本专栏 订阅专栏 解锁全文
Retrieval-Augmented Generation for Large Language Models: A Survey——(1)Overview
qq_19300283的博客
01-31 1339
首篇全面RAG(检索增强生成)综述, 包括RAG的概念和分类, 与ICL(in-context learning), FT(微调)的对比, RAG优化检索(retrieval), 索引(indexing), 生成(generation), 增强(augmentation)的不同方法
Vue 3 中编译时和运行时的概念区别
最新发布
Bruce__taotao的博客
05-09 1272
Vue 3 中的编译时和运行时是两个关键阶段，分别负责模板的编译和组件的实际执行。编译时阶段将模板转换为渲染函数，并进行静态提升、指令转换等优化，以减少运行时的开销。运行时阶段则负责创建组件实例、初始化响应式系统，并执行渲染和更新流程。组件实例在运行时创建，因为此时组件的所有选项和数据来源（如父组件传入的 props）都已确定，Vue 才能实例化组件并运行初始化逻辑。编译时生成组件的“类”定义，而运行时按需创建多个实例。这种分离确保了 Vue 3 的高效性和灵活性。
UAST(统一抽象语法树)概念解释
TTKatrina的博客
07-02 2080
Lint系列学习笔记之 UAST 概念理解
Estraverse
gitblog_00018的博客
03-17 531
Estraverse estraverseECMAScript JS AST traversal functions项目地址:https://gitcode.com/gh_mirrors/es/estraverse Estraverse是一个JavaScript抽象语法树（AST）遍历库，由ESTree项目维护。它是ESLint、Babel等流行JavaScript工具链的重要组成部分。 什么是...
ast语法树初探
艾米栗的代码天地
10-25 1534
前端开发中，使用了很多工具，譬如webpack、eslint来提升研发效率，但我们并不知道这些工具的实现原理。基于这些工具的核心都是抽象语法树，那我们就从抽象语法树开始理解底层原理的新世界吧。
estraverse：ECMAScript JS AST遍历函数
02-26
雌雄同体 Estraverse（ ）是遍历函数。 文献资料 您可以在找到用法文档。 用法示例 以下代码将输出在文件根目录中声明的所有变量。 estraverse . traverse ( ast , { enter : function ( node , parent ) { if ( node . type == 'FunctionExpression' || node . type == 'FunctionDeclaration' ) return estraverse . VisitorOption . Skip ; } , leave : function ( node , parent ) { if ( node . type == 'VariableDeclarator' )
什么是 AST?
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
04-07 2005
我们先来通过工具【AST Explorer】看一段代码： const add = (a, b) => a + b; 代码对应的 json 数据：也可以自己画一棵树 { "type": "Program", "start": 0, "end": 28, "body": [ { "type": "VariableDeclaration", // 变量声明 "start": 0, "end": 28, "declarations":
源码阅读工具Understand-3.1-Linux-64bit，源码安装包，使用手册，注册号
03-23
2. **代码结构分析**：通过构建代码的抽象语法树（AST），Understand可以生成项目的层次结构图，帮助开发者快速定位代码结构。 3. **代码质量检查**：工具内置了多种代码质量检查规则，如死代码检测、循环复杂度计算...
compile
03-31
在此阶段，经过预处理后的代码被解析成抽象语法树 (AST)，并进一步转化为中间表示形式(IR)。随后会对IR执行各种优化措施以提高运行效率[^3]。 #### 汇编 汇编器把由上一阶段产生的中间代码翻译成为具体的机器码指令...
19道高频vue面试题解答（上）
bb_xiaxia1998的博客
10-10 692
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。
visualize_estraverse:可视化跨步
05-12
visualize_estraverse 可视化步骤。 =>演示： 进入 离开 贡献 叉吧！ 创建功能分支： git checkout -b my-new-feature 提交更改： git commit -am 'Add some feature' 推送到分支： git push origin my-new-feature 提交拉取请求：D 执照 麻省理工学院
探索Estraverse：JavaScript代码遍历的利器
gitblog_00015的博客
04-19 498
探索Estraverse：JavaScript代码遍历的利器 estraverse项目地址:https://gitcode.com/gh_mirrors/est/estraverse 是一个高效的、广泛使用的JavaScript AST（抽象语法树）遍历库，由@Constellation开发并维护。在本文中，我们将深入探讨这个项目的原理、用途和特点，以揭示它如何为开发者提供强大的代码处理能力。 ...
AST语法树和babel原理
越努力越幸运
12-10 972
AST（抽象语法树） 在计算机科学中，抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。 无论是LL(1)文法，还是LR(1)，或者还是其它的方法，都要求在语法分析时候，构造出相同的语法树，这样可以给编译器后端提供了清晰，统一的接口。即使是前端采用了不同的文法，都只需要改变前端代码，而不用连累到后端。即减少了工作量，也提高的编译器的可维护性。
抽象语法树
GuoZebin的博客
04-24 9026
AST 一、什么是AST抽象语法树 在传统的编译语言的流程中,程序的一段源代码在执行之前会经历三个步骤,统称为"编译": 分词/词法分析 这个过程会将由字符组成的字符串分解成有意义的代码块,这些代码块统称为词法单元(token). 举个例子: let a = 1, 这段程序通常会被分解成为下面这些词法单元: let 、a、=、1 ，空格是否被当成词法单元，取决于空格在这门语言中的意义。 解析/语法分析 这个过程是将词法单元流转换成一个由元素嵌套所组成的代表了程序语法结构的树,这个树被称为"抽象语法
estraverse 项目常见问题解决方案
gitblog_00018的博客
11-06 1037
estraverse 项目常见问题解决方案 estraverse ECMAScript JS AST traversal functions 项目地址: https://gitcode.com/gh_mirrors/es/estr...
estraverse: ECMAScript抽象语法树遍历工具
gitblog_00299的博客
08-25 1025
estraverse: ECMAScript抽象语法树遍历工具 estraverse项目地址:https://gitcode.com/gh_mirrors/est/estraverse 项目介绍 estraverse 是一个源于 esmangle 项目的强大库，专为 ECMAScript JavaScript 抽象语法树（AST）设计的遍历功能。它提供了灵活的方法来遍历和操作JavaScript...
探索JavaScript代码之门——Estraverse开源项目解析
gitblog_00313的博客
08-10 439
探索JavaScript代码之门——Estraverse开源项目解析 estraverseECMAScript JS AST traversal functions项目地址:https://gitcode.com/gh_mirrors/es/estraverse 在JavaScript的世界里，深入理解和操作AST（抽象语法树）是优化和分析代码的重要手段。Estraverse，这个由estool...
estraverse 项目使用教程
gitblog_00665的博客
08-26 657
estraverse 项目使用教程 estraverse项目地址:https://gitcode.com/gh_mirrors/est/estraverse 1. 项目的目录结构及介绍 estraverse 项目的目录结构相对简单，主要包含以下文件和目录： .babelrc：Babel 配置文件。 .gitignore：Git 忽略文件配置。 .jshintrc：JSHint 配置文件。 .n...
Estraverse：ECMAScript 的强大遍历工具
gitblog_00253的博客
08-28 445
Estraverse：ECMAScript 的强大遍历工具 estraverse项目地址:https://gitcode.com/gh_mirrors/est/estraverse 在现代软件开发中，对代码的分析和操作变得越来越重要。Estraverse 是一个开源项目，专门为 ECMAScript 提供高效的遍历功能，使得开发者能够轻松地对 JavaScript 代码进行分析和修改。本文将详细...
Eclipse JDT AST指南：构建与遍历Java抽象语法树
"Eclipse_AST(抽象语法树)使用指南" 在Eclipse开发环境中，Eclipse AST（Abstract Syntax Tree，抽象语法树）是解析Java源代码并进行语法分析的关键工具。它位于Eclipse JDT（Java Development Tools）的核心库org....
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值