语法树是什么
写代码的时候，你有没有想过，计算机是怎么“看懂”你写的那一行行 if、for 或函数调用的？其实背后有个关键角色——语法树。它就像是一张结构图，把代码拆解成有层次的节点，让编译器或解释器能一步步处理。
语法树，全名叫“抽象语法树”（Abstract Syntax Tree，简称 AST），是源代码结构的一种树状表示。它不关心具体怎么写，比如空格或括号，而是关注代码的逻辑构成。比如你写了一个加法表达式 a + b，语法树会把它变成一个“加法节点”，下面连着两个“变量节点”：a 和 b。
举个生活中的例子
想象你在组装 IKEA 家具。说明书不会直接给你一堆零件照片，而是分步骤、有层级地告诉你先装哪根腿，再拧哪个板。语法树就干这个事——把一整段代码“说明书化”，拆成一个个可执行的小步骤。
语法树长什么样
还是拿简单的 JavaScript 代码举例：
const sum = a + b;这段代码生成的语法树大致是这样的结构：
- 变量声明（VariableDeclaration）
- 标识符：sum
- 赋值操作（AssignmentExpression）
- 操作符：=
- 右侧是一个加法表达式（BinaryExpression）
- 左操作数：变量 a
- 操作符：+
- 右操作数：变量 b
每个节点都代表一种语法结构，从上到下形成父子关系，像家谱一样。
语法树有什么用
前端开发中，Babel 转译 ES6+ 代码就是靠语法树。它先把你的箭头函数、解构赋值解析成 AST，然后改写节点，最后再把新树“打印”回低版本的 JavaScript 代码。类似地，ESLint 检查代码风格，也是先建语法树，再遍历节点找问题。
再比如，你写了个模板字符串：
`Hello, ${name}!`语法树会把它拆成“模板字面量”节点，里面包含静态部分和动态插值部分。工具就能知道哪里要动态替换，哪里是固定文本。
甚至像 Prettier 这种格式化工具，也得先读懂结构，才能正确缩进、换行。没有语法树，这些自动化工具根本玩不转。
小结一下关键点
语法树不是图形，而是一种数据结构。它把线性书写的代码转换成树形嵌套结构，方便程序分析和变换。每个节点对应一个语法单元，比如循环、条件、函数、表达式等。它是编译原理的基础，也是现代开发工具链的核心支撑。
理解语法树，就像是学会了看电路图。虽然平时不用自己画，但一旦出问题，你能更快定位是哪个“元件”接错了。”,"seo_title":"语法树基本概念详解 - 易用百科","seo_description":"了解语法树（AST）的基本概念及其在代码解析、Babel、ESLint 等工具中的实际应用，帮助开发者深入理解代码结构背后的原理。","keywords":"语法树,抽象语法树,AST,代码解析,编译原理,Babel,ESLint,JavaScript"}