🐱个人主页：不叫猫先生
🙋♂️作者简介：专注于前端领域各种技术，热衷分享，关注我会给你带来一些不一样的认知和成长。
📝个人签名：不破不立
🍬本文目录
🥙一、前言
抽象语法树（Abstract Syntax Tree，AST），是源代码（不仅限于JavaScript，同时还应用于其他语言，例如: Python，Rust等）语法结构的⼀种抽象表示。它以树状的形式表现编程语⾔的语法结构，树上的每个节点都表示源代码中的⼀种结构。
AST 运⽤⼴泛，⽐如：
- ⾼级语⾔的编译、机器码的⽣成⼀些⾼级编辑器的错误提示、代码⾼亮、代码⾃动补全；
- 对于前端来说很多⼯具，例如 elint 、 pretiier 对代码错误或⻛格的检查，babel、typescript对代码的编译处理等等。
🥪二、节点介绍
本文示范数据：
window.a = 3; let a = 2, b = 3; let obj = { name: '张三', age: "18", interest: ["篮球", "羽毛球"], add: function (a, b) { setTimeout(() => { }) return a + b + 1000 }, multiplication: function (a, b) { if (a) { b = a } else { } return a * b + 1000 } }
- type：标识节点的类型。
- Identifier（标识符）：简单来说就是我们写 JS 时自定义的名称，如变量名，函数名，属性名，都归为标识符，值存放于字段name中。
- CallExpression（函数表达示）：比如：setTimeout(()=>{})。callee 属性是一个表达式节点，表示函数，arguments 是一个数组，元素是表达式节点，表示函数参数列表.
- MemberExpression（成员表达式节点）：即表示引用对象成员的语句，object是引用对象的表达式节点，property 是表示属性名称，computed 如果为 false，是表示 . 来引用成员，property 应该为一个 Identifier 节点，如果 computed 属性为 true，则是 [] 来进行引用，即 property 是一个Expression 节点，名称是表达式的结果值。window.a对应的AST如下：
- AssignmentExpression（赋值表达式节点）：operator 属性表示一个赋值运算符，left 和 right是赋值运算符左右的表达式
- ArrayExpression（数组表达式节点）： interest:[“篮球”,“羽毛球”]，elements 属性是一个数组，表示数组的多个元素，每一个元素都是一个表达式节点。
- VariableDeclaration（变量声明表达式）：kind 属性表示是什么类型的声明，值可能是var/const/let。declarations表示声明的多个描述，因为我们可以这样：
let a = 2,b=3。
- VariableDeclarator（变量声明的描述）：id 表示变量名称节点，init 表示初始值的表达式，可以为 null
- IfStatement（if表达式）：if(true)，test 属性表示 if (…) 括号中的表达式。
consequent 属性是表示条件为 true 时的执行语句，通常会是一个块语句。
alternate 属性则是用来表示 else 后跟随的语句节点，通常也会是块语句，但也可以又是一个 if 语句节点，即类似这样的结构：if (a) { //… } else if (b) { // … }。alternate 当然也可以为 null。
- Literals字面量
- StringLiteral 字符串字面量（“foo”）
- NumericLiteral 数值字面量（123）
- BooleanLiteral 布尔字面量 （true）
- TemplateLiteral 模板字面量 （${obj}）
