AST 简述

一、定义

在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。比如，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现；而类似于 if-condition-then 这样的条件跳转语句，可以使用带有两个分支的节点来表示。

例：const a = 2 其AST 结构树如下：

AST 结构树

或者可以在线查看 AST 结构 https://astexplorer.net/

二、应用场景

• 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
  1. 如JSLint、JSHint对代码错误或风格的检查，发现一些潜在的错误
  2. IDE的错误提示、格式化、高亮、自动补全等等
• 优化变更代码，改变代码结构使达到想要的结构
  1. 代码打包工具webpack等等
  2. TypeScript、JSX等转化为原生Javascript
  3. CommonJS、AMD、CMD、UMD等代码规范之间的转化

三、AST生成过程

javascript的抽象语法树的生成主要依靠的是Javascript Parser(js解析器)，整个解析过程分为两个阶段:

AST生成过程

1. 词法分析(Lexical Analysis)

词法分析是计算机科学中将字符序列转换为词法单元（Token）序列的过程，进行词法分析的程序叫做词法分析器（Lexical analyzer，简称Lexer），也叫扫描器（Scanner）。

要做词法分析,首先我们需要明白在 JavaScript 中哪些属于语法单元

• 数字：JavaScript 中的科学记数法以及普通数组都属于语法单元.
• 括号：『(』『)』只要出现,不管任何意义都算是语法单元
• 标识符：连续字符,常见的有变量,常量(例如: null true),关键字(if break)等等
• 运算符：+、-、*、/等等
• 当然还有注释,中括号等

2. 语法分析（Parse Analysis）

语法分析是编译过程的一个逻辑阶段。语法分析的任务是在词法分析的基础上将词法单元（Token）序列组合成语法树，如“程序”，“语句”，“表达式”等等.语法分析程序判断源程序在结构上是否正确。

词法解析过程：一边扫描源代码一边进行分类,构成一个个token流。
语法分析过程：将token流转化为一个有元素层级嵌套所组成的代表程序语法结构的树，这个树被叫做抽象语法树AST。

例：

const a = 1;
const b = a + 1;

其编译过程如下：

编译过程

四、实践

1. AST 应用于Babel

Babel 本质上只是一个代码的搬运工，如果不给 Babel 装上插件，它将会把输入的代码原封不动地输出。正是因为有插件的存在， Babel 才能将输入的代码进行转变，从而生成新的代码。

Babel 的三个主要处理步骤分别是：

• 解析（parse）: 将代码(其实就是字符串)转换成 AST
• 转换（transform）: 访问 AST 的节点进行变换操作生成新的 AST
• 生成（generate）: 以新的 AST 为基础生成代码

整个过程中，parsing和generation是固定不变的，最关键的是transforming步骤，通过babel插件来支持（Babel解析成AST，然后插件更改AST，最后由Babel输出代码），这是其扩展性的关键。当我们开发babel-plugin的时候，我们只需要描述转化你AST的节点“visitors”就可以了。

例：demo

2. AST 应用于Eslint

ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

ESlint在分析代码前，会通过解析器对代码进行词法分析和语法分析，并将代码解析为AST，将不同类型的代码语句分成不同类型的节点，则一份代码文件便形成了一个树状的结构，之后ESlint会依次遍历语法树上的节点。每条规则都会对匹配的过程进行监听，每当匹配到一个类型，相应的规则就会进行检查。

例：demo2

五、小结

JS的许多语法是为了给开发者更好的编程体验，但并不适合程序的理解，把源码转化为AST更适合程序分析，浏览器的编译器一般会把源码转化为AST来分析，从而进一步进行其他操作。通过了解AST这个概念，对深入了解前端的一些框架和工具也是很有帮助的。
总之，AST 的用处还是非常的多，可以做的事情也很多。