javaScript AST 是源代码的语法结构化树形表示,忽略空格注释,仅反映语法逻辑,用于静态分析、自动修复、重构 和编译转换;以const sum = a + b; 为例,其 AST 含 VariableDeclaration、VariableDeclarator、Identifier 和 BinaryExpression 等嵌套节点。

javascript AST(抽象语法树)是源代码的结构化表示,把代码转换成树形 对象,每个节点代表一种语法结构,比如变量声明、函数调用或二元运算。它不关心空格、注释或缩进,只反映程序的语法逻辑。有了 AST,你就能用程序“读懂”代码,进而做静态分析、自动修复、重构甚至编译转换。
AST 长什么样?以简单代码为例
比如这段代码:
const sum = a + b;
它的 AST 会包含多个嵌套节点:一个 VariableDeclaration(声明语句),里面有一个 VariableDeclarator,再往下是 Identifier(sum)、BinaryExpression(a + b),而后者又包含两个 Identifier(a 和 b)节点。所有这些节点都有 type、start/end 位置、以及指向子节点的 body 或 left/right 等属性。
怎么生成和查看 AST?
最常用的是 Acorn(轻量、快)或 ESTree 兼容的解析器如 @babel/parser。你也可以直接用在线 工具:
立即学习“Java 免费学习笔记(深入)”;
- AST Explorer —— 粘贴代码,实时看树结构,还能切换不同解析器和插件
- 命令行下用 @babel/parser 解析并打印:
const parser = require(‘@babel/parser’);
const ast = parser.parse(‘const x = 1 + 2;’, { sourceType: ‘module’});
console.log(jsON.stringify(ast, NULL, 2));
如何用 AST 做代码分析?
核心是遍历 AST 节点,识别模式并提取信息:
- 找所有 CallExpression 节点,统计
console.log出现次数 - 检查 MemberExpression 是否访问了已知不安全的 API(如
window.eval) - 扫描 ImportDeclaration,列出项目依赖的第三方包
- 结合 作用域 分析(如 eslint-scope),判断变量是否被正确声明或是否存在未使用变量
如何用 AST 做代码转换?
转换 = 遍历 + 修改节点 + 生成代码。主流方案是 Babel 插件:
- 写一个 visitor 对象,定义对某类节点(如 ArrowFunctionExpression)的处理逻辑
- 在 visitor 方法中,可以替换节点(
path.replaceWith())、插入新节点、删除节点,或修改属性 - 最后用 @babel/generator 把修改后的 AST 转回可执行代码
- 例如:把所有箭头函数自动加上返回值日志(开发调试用)
真实项目中,ESLint 规则、Prettier 格式化、typescript 编译、react 的 JSX 转换,底层都重度依赖 AST 操作。
以上就是什么是