一、定义
在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。比如，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现；而类似于 if-condition-then 这样的条件跳转语句，可以使用带有两个分支的节点来表示。
例：const a = 2 其AST 结构树如下：
或者可以在线查看 AST 结构 https://astexplorer.net/
二、应用场景
- 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
- 如JSLint、JSHint对代码错误或风格的检查，发现一些潜在的错误
- IDE的错误提示、格式化、高亮、自动补全等等
- 优化变更代码，改变代码结构使达到想要的结构
- 代码打包工具webpack等等
- TypeScript、JSX等转化为原生Javascript
- CommonJS、AMD、CMD、UMD等代码规范之间的转化
三、AST生成过程
javascript的抽象语法树的生成主要依靠的是Javascript Parser(js解析器)，整个解析过程分为两个阶段:
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 的用处还是非常的多，可以做的事情也很多。
