什么是AST
在了解AST之前首先需要知道javascript的工作原理，javascript是一种解释型语言，通过词法分析语法分析之后构建出抽象语法树。如果javascript解析器无法构建出语法树时就会报出语法错误，从而结束此次编译过程（平时遇到语法错误提示时，就是此阶段报的错误）。整个javascript引擎工作流程可以，看以下的流程图。
从图片中就可以看到，第二个阶段就是形成AST(abstract syntax code)的过程，存在传统语言变成可执行代码之前都会经历以下三个阶段：
1.词法分析词法分析是将字符流(char stream)转换为记号流(token stream)，就像英文句子一个个单词独立翻译，举例：
代码：var result = testNum1 - testNum2;
词法分析后 ：
NAME "result"
EQUALS
NAME "testNum1"
MINUS
NAME "testNum2"
SEMICOLON
这个过程会将由字符组成的字符串分解成有意义的代码块,这些代码块统称为token.举个例子: let a = 1, 这段程序通常会被分解成为下面这些词法单元: let 、a、=、1、 ；空格是否被当成此法单元，取决于空格在这门语言中的意义。
2.语法分析，将token stream转换成一个由元素嵌套所组成的代表了程序语法结
构的树，这个树就是抽象语法树(AST)
3.将抽象语法树(AST) 转化成可执行代码
AST的结构
这里用到一个很好用的在线JavaScript解析器Esprima
例如
// Life, Universe, and Everythingfu
function add(a,b){
return a+b;
}
转化成AST的结构如下
{
"type": "Program",
"body": [
{
"type": "FunctionDeclaration",
"id": {
"type": "Identifier",
"name": "add"
},
"params": [
{
"type": "Identifier",
"name": "a"
},
{
"type": "Identifier",
"name": "b"
}
],
"body": {
"type": "BlockStatement",
"body": [
{
"type": "ReturnStatement",
"argument": {
"type": "BinaryExpression",
"operator": "+",
"left": {
"type": "Identifier",
"name": "a"
},
"right": {
"type": "Identifier",
"name": "b"
}
}
}
]
},
"generator": false,
"expression": false,
"async": false
}
],
"sourceType": "script"
}
如果想要了解更多的AST对象的api，可以参考这里
AST的作用
AST的作用不仅仅是用来在JavaScript引擎的编译上，我们在实际的开发过程中也是经常使用的，比如我们常用的babel插件将 ES6转化成ES5、使用 UglifyJS来压缩代码 、css预处理器、开发WebPack插件、Vue-cli前端自动化工具等等，这些底层原理都是基于AST来实现的，AST能力十分强大， 能够帮助开发者理解JavaScript这门语言的精髓。
我们可以直接使用三方库来生成AST，这里推荐两个库，一个是recast，一个是babel用到的Babylon。这里推荐babel插件手册去实际体验转换js代码的过程
recast的使用
这里我们来实际使用第三方的parser库recast，来深入了解一下生成js代码的过程，我们完成一个需求,将代码
function add(a,b){
return a+b;
}
转换成es6的形式
const add = function(b,a){
return a+b;
}
下面是实现的代码：
import * as recast from "recast"
const code = [
"function add(a, b) {",
" return a + b ;",
"}"
].join("\n")
const ast = recast.parse(code)
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
console.log(output)
输出内容如下：
[oh-my-zsh]
[ttq]% node parse.mjs
var add = function(b, a) {
return a + b ;
};
以上AST也就介绍到这里了，如果想更深入了解，这里去babel插件手册上去开发一两个插件试一下。
参考连接
AST详解与应用
recast的官方手册
编程语言的实现，从AST（抽象语法树）开始
Parser API
babel插件手册
理解JavaScript的编译过程与运行机制
jsflowchart
