AST在线预览网站: https://astexplorer.net
Bable AST官网：https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md
Identifier
interface Identifier <: Expression, Pattern {
type: "Identifier";
name: string;
}
标识符，就是我们写 JS 时自定义的名称，如变量名，函数名，属性名，都归为标识符，值存放于字段
name中。
ImportDeclaration
interface ImportDeclaration <: ModuleDeclaration {
type: "ImportDeclaration";
importKind: null | "type" | "typeof" | "value";
specifiers: [ ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier ];
source: Literal;
attributes?: [ ImportAttribute ];
}
ES6的Module语法，表示使用import关键字进行导包的声明表达式：
import _ from 'lodash'。
注意：webpack的异步语法并不是ImportDeclaration，如import('xxxx').then(()=>{})
specifiers是一个数组，描述的导入的具体的成员变量，source字段标识引入的库信息，其中value值为引入的变量名。
image.png
ImportSpecifier
interface ImportSpecifier <: ModuleSpecifier {
type: "ImportSpecifier";
imported: Identifier;
}
单独导出的成员变量，描述的是例如
import { Message } from 'element-ui'中的Message。
主要关注的是local和imported字段，其都是identitifier类型，其name属性在没有进行别名处理时相同，如果使用了别名则local中的name则为别名，imported为原始成员变量名。
import { Message as MyMessage } form ''element-ui'中的
imported.name = Message ; local.name = MyMessage
image.png
ImportDefaultSpecifier
interface ImportDefaultSpecifier <: ModuleSpecifier {
type: "ImportDefaultSpecifier";
}
描述的是形如
import _ from "lodash"中的_
image.png
ImportNamespaceSpecifier
interface ImportNamespaceSpecifier <: ModuleSpecifier {
type: "ImportNamespaceSpecifier";
}
描述的是形如
import * as foo from "mod.js"中的 as foo
image.png
CallExpression
interface CallExpression <: Expression {
type: "CallExpression";
callee: Expression | Super | Import;
arguments: [ Expression | SpreadElement ];
}
函数调用表达式，比如：
setTimeout(()=>{})。
callee属性是一个表达式节点，表示函数，arguments是一个数组，元素是表达式节点，表示函数参数列表。
image.png
MemberExpression
interface MemberExpression <: Expression, Pattern {
type: "MemberExpression";
object: Expression | Super;
property: Expression;
computed: boolean;
}
成员表达式节点，即表示引用对象成员的语句，
object是引用对象的表达式节点，property是表示属性名称，computed 如果为 false，是表示 . 来引用成员，property 应该为一个 Identifier 节点，如果 computed 属性为 true，则是 [] 来进行引用，即 property 是一个 Expression 节点，名称是表达式的结果值
window.setTimeout对应的AST如下：
image.png
AssignmentExpression
interface AssignmentExpression <: Expression {
type: "AssignmentExpression";
operator: AssignmentOperator;
left: Pattern | Expression;
right: Expression;
}
赋值表达式节点,
operator属性表示一个赋值运算符，left和right是赋值运算符左右的表达式。
AssignmentOperator
赋值运算符，所有值如下：（常用的并不多）
enum AssignmentOperator {
"=" | "+=" | "-=" | "*=" | "/=" | "%="
| "<<=" | ">>=" | ">>>="
| "|=" | "^=" | "&="
}
代码let a ;a = 20的AST如下：
image.png
ArrayExpression
interface ArrayExpression <: Expression {
type: "ArrayExpression";
elements: [ Expression | SpreadElement | null ];
}
数组表达式节点，
const array = [d,2,3],elements` 属性是一个数组，表示数组的多个元素，每一个元素都是一个表达式节点。
image.png
VariableDeclaration
interface VariableDeclaration <: Declaration {
type: "VariableDeclaration";
declarations: [ VariableDeclarator ];
kind: "var" | "let" | "const";
}
变量声明表达式，
kind属性表示是什么类型的声明，值可能是var/const/let。declarations表示声明的多个描述，因为我们可以这样：let a = 1, b = 2
image.png
VariableDeclarator
interface VariableDeclarator <: Node {
type: "VariableDeclarator";
id: Pattern;
init: Expression | null;
}
变量声明的描述，
id表示变量名称节点，init表示初始值的表达式，可以为 null。
image.png
LogicalExpression
interface LogicalExpression <: Expression {
type: "LogicalExpression";
operator: LogicalOperator;
left: Expression;
right: Expression;
}
逻辑运算表达式， "||" 或者 "&&"
ConditionalExpression
interface ConditionalExpression <: Expression {
type: "ConditionalExpression";
test: Expression;
alternate: Expression;
consequent: Expression;
}
条件表达式即三元运算表达式： boolean ? true : false。
IfStatement
interface IfStatement <: Statement {
type: "IfStatement";
test: Expression;
consequent: Statement;
alternate: Statement | null;
}
if表达式，
if(true)，test属性表示 if (...) 括号中的表达式。
consequent属性是表示条件为 true 时的执行语句，通常会是一个块语句。
alternate属性则是用来表示 else 后跟随的语句节点，通常也会是块语句，但也可以又是一个 if 语句节点，即类似这样的结构：if (a) { //... } else if (b) { // ... }。alternate 当然也可以为 null。
部分描述借鉴转自http://www.goyth.com/2018/12/23/AST/#ArrayExpression
网友评论