前言
在一次讨论中，听人提到了AST，感觉既熟悉又模糊，后来朋友补充了一句：抽象语法树，我才恍然，来简单mark复习下这个知识点。AST到底是什么？它的作用是什么？
一、AST是啥？
AST全名abstract syntax tree（抽象语法树），抽象表示把js代码进行了结构化的转化，转化为一种类似树状数据结构的json对象。
js是一种解释性语言，js引擎将js代码交给解释器之前，要先进行格式化，也就是通过词法和语法分析后构建出抽象语法树(AST)，之后会交给解释器，最终解释称计算机可以识别的机器码。
如果javascript解析器无法构建出语法树时就会报出语法错误，从而结束此次编译过程（平时遇到语法错误提示时，就是此阶段报的错误）。
1、生成原理
在了解如何生成AST之前，有必要了解一下Parser，Parser其实是一个解析器，它是将js源码转化为抽象语法树（AST）的解析器。
Parser是解析器的统称，不是指定的解析器，通常用到的解析器有 uglify-js、esprima、acorn、babel的@babel/parser等
整个解析过程主要分为以下两个步骤：
- 分词：词法解析器将整个代码字符串分割成最小语法单元数组。
- 语法分析：对应语法的解释器在分词基础上建立分析语法单元之间的关系。
经过分词和语法解析后，代码转化为对应的抽象解释，也就是AST了
2、AST结构
AST是一个json结构，去描述这一段js代码的类型、内容等，类似于虚拟DOM树结构
这里推荐两个在线解析器Esprima和astexplorer；可以在线生成js代码的AST结构。
var test = '测试'
上边这段代码，转化成AST结构后如下：
{
"type": "Program",
"start": 0,
"end": 15,
"body": [
{
"type": "VariableDeclaration",
"start": 0,
"end": 15,
"declarations": [
{
"type": "VariableDeclarator",
"start": 4,
"end": 15,
"id": {
"type": "Identifier",
"start": 4,
"end": 8,
"name": "test"
},
"init": {
"type": "Literal",
"start": 11,
"end": 15,
"value": "测试",
"raw": "'测试'"
}
}
],
"kind": "var"
}
],
"sourceType": "module"
}
对该AST结构观察一番，便会明白，AST其实即是我们在已经ECMAScript标准对代码进行解析后，将标识符（identifier）、声明（declaration）、表达式（expression）、语句（statement）等按代码表述的逻辑整理成为树状结构。看到这个AST结构是不是让我们对js代码有更深的认识呐？
通过上边的树状结构，我们看到每个节点都有自己的类型，来表示当前节点是个声明变量的符号还是一个特定类型的数据，或者是一个运算符。
下边是AST的节点类型列表：
二、AST作用
前边简单讲了AST生成的原理和他的结构，知道它是js引擎去执行js代码的必经之路。但是AST不仅仅是用在JS引擎的对代码的编译上。我们的开发过程也会经常用到。
比如babel将 ES6转化成ES5 、开发WebPack插件、eslink语法检查等这些底层原理都是基于AST来实现的，AST能够帮助开发者理解JavaScript这门语言的精髓，还相当于你拥有对一门新的js语法的解释权。
我们可以直接试着用三方库来生成AST，这里推荐一个工具库recast，因为它用起来稍微简单一点。
其实recast是基于esprima开发的，我也是在看它的依赖配置时才发现
1、利用AST实现js格式转换
无论用什么工具去转换js代码，都是有三个步骤：
- Parse解析js代码成AST结构；
- 对AST树的节点进行添加、更新及移除等操作，完成格式转换；
- 解析工具再把完成转换的AST再译回js代码。
const recast = require("recast");
const code = [
"function add(a, b) {",
" return a + b ;",
"}"
].join("\n")
const ast = recast.parse(code);
console.log(ast);//这个ast就是被解析出来的AST结构
const add = ast.program.body[0];
const n = recast.types.namedTypes;
n.FunctionDeclaration.assert(add);
const b = recast.types.builders;
ast.program.body[0] = b.variableDeclaration("var", [
b.variableDeclarator(add.id, b.functionExpression(
null,
add.params,
add.body
))
]);
add.params.push(add.params.shift());
const output = recast.print(ast).code;//这个就是parse方法的逆向过程，将AST重新编译成js代码
console.log(output);
最后打印结果是：
var add = function(b, a) {
return a + b ;
};
通过这个个实验，说明了js转成AST后，可以利用工具可以对其进行任意修改，把它变成任何你想要的的js代码。
由于可以增、删、改源代码里边的内容，所以格式转换和压缩代码都不是问题，发挥我们的想象里，还有无限可能。
今天先到这里，回头补一个Babel的AST操作小案例。
