抽象语法树(AST)与acron

什么是抽象语法树(AST)

AST是源代码语法结构的一种抽象表示，它以树状的形式表现程序代码；

什么是acron

acron是一个javascript解析器(parser)，通过它的parse方法可以解析出javascript程序的AST；
git地址：https://github.com/acornjs/acorn
本文没有深入介绍acron，只是利用acron生成的AST结构来说明抽象语法树；

AST的结构

下面展示了一段源代码以及利用acron生成的AST树的结构；

let a = 1;
function func(b) {
  switch (b) {
    case 1: break;
    case 2: break;
  }
}

抽象语法树.png

可以看到AST有一个program根结点；
下面通过body关联了VariableDeclaration(变量声明)对应变量a的声明，以及FunctionDeclaration(函数声明)对应函数func的声明；
函数声明结点下通过id关联了一个Identifier(标识符)对应函数名是func，通过params关联了一个Identifier(标识符)对应变量名是b，通过body关联了一个BlockStatement(块状语句)对应函数体是一个块状语句；
...
整个树完整的说明了源代码；

AST主要结点类型

因为AST是用树表示JS程序的语法，所以AST的结点类型与JS语法息息相关

Declaration(声明)

该结点代码对应的代码块是一段声明，主要有函数声明(FunctionDeclaration)、变量声明(VariableDeclaration)；

Statement(语句)

该结点代码对应的代码块是一个语句，主要有BlockStatement、ExpressionStatement、IfStatement、BreakStatement、ContinueStatement、SwitchStatement、ReturnStatement、WhileStatement、ForStatement等；

Expression(表达式)

该结点代码对应的代码是一个表达式，主要有ThisExpression、ArrayExpression、ObjectExpression、FunctionExpression、ArrowExpression、UnaryExpression、BinaryExpression、LogicalExpression、ConditionalExpression、NewExpression、CallExpression等；

Identifier(标识符)

该结点代码对应的代码是一个标识符，比如varName、funcName等；

Literal(字面量)

该结点代码对应的代码是一个字面量，比如"hello world"、231等；

详细内容可参考
https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API#Node_objects
另外给一个在线转AST的网站
https://astexplorer.net/