17370845950

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

JavaScript AST（抽象语法树）是源代码的结构化表示，把代码转换成树形对象，每个节点代表一种语法结构，比如变量声明、函数调用或二元运算。它不关心空格、注释或缩进，只反映程序的语法逻辑。有了 AST，你就能用程序“读懂”代码，进而做静态分析、自动修复、重构甚至编译转换。

AST 长什么样？以简单代码为例

比如这段代码：

它的 AST 会包含多个嵌套节点：一个 VariableDeclaration（声明语句），里面有一个 VariableDeclarator，再往下是 Identifier（sum）、BinaryExpression（a + b），而后者又包含两个 Identifier（a 和 b）节点。所有这些节点都有 type、start/end 位置、以及指向子节点的 body 或 left/right 等属性。

怎么生成和查看 AST？

最常用的是 Acorn（轻量、快）或 ESTree 兼容的解析器如 @babel/parser。你也可以直接用在线工具：

• 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 操作。