超级详细AST抽象语法树Javascript
生活随笔
收集整理的這篇文章主要介紹了
超级详细AST抽象语法树Javascript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
AST 抽象語法樹
Program 程序（開始）
interface Program <: Node {type: "Program";body: [ Statement ]; }1. statement ——語句
1）Statement —— 表示任意語句
interface Statement <: Node { }2）EmptyStatement ——表示空語句，即分號；
interface EmptyStatement <: Statement {type: "EmptyStatement"; }3）BlockStatement ——表示塊語句，由{}包圍的語句
interface BlockStatement <: Statement {type: "BlockStatement";body: [ Statement ]; }4）ExpressionStatement —— 表示表達式語句，由單個表達式組成的語句
interface ExpressionStatement <: Statement {type: "ExpressionStatement";expression: Expression; }例如：
alert(1) // 轉成AST {"type": "Program","start": 0,"end": 8,"body": [{"type": "ExpressionStatement","start": 0,"end": 8,"expression": {"type": "CallExpression","start": 0,"end": 8,"callee": {"type": "Identifier","start": 0,"end": 5,"name": "alert"},"arguments": [{"type": "Literal","start": 6,"end": 7,"value": 1,"raw": "1"}],"optional": false}}],"sourceType": "module" }5）IfStatement —— 表示If語句
interface IfStatement <: Statement {type: "IfStatement";test: Expression;consequent: Statement;alternate: Statement | null; }例如：
if (a || b) {alert(1); } else {alert(2); } /** * if IfStatement * a || b test LogicalExpression * {} consequent BlockStatement * else alternate BlockStatement */ // 轉成AST如下 {"type": "Program","start": 0,"end": 48,"body": [{"type": "IfStatement","start": 1,"end": 47,"test": {"type": "LogicalExpression","start": 5,"end": 11,"left": {"type": "Identifier","start": 5,"end": 6,"name": "a"},"operator": "||","right": {"type": "Identifier","start": 10,"end": 11,"name": "b"}},"consequent": {"type": "BlockStatement","start": 13,"end": 27,"body": [{"type": "ExpressionStatement","start": 16,"end": 25,"expression": {"type": "CallExpression","start": 16,"end": 24,"callee": {"type": "Identifier","start": 16,"end": 21,"name": "alert"},"arguments": [{"type": "Literal","start": 22,"end": 23,"value": 1,"raw": "1"}],"optional": false}}]},"alternate": {"type": "BlockStatement","start": 33,"end": 47,"body": [{"type": "ExpressionStatement","start": 36,"end": 45,"expression": {"type": "CallExpression","start": 36,"end": 44,"callee": {"type": "Identifier","start": 36,"end": 41,"name": "alert"},"arguments": [{"type": "Literal","start": 42,"end": 43,"value": 2,"raw": "2"}],"optional": false}}]}}],"sourceType": "module" }6）LabeledStatement —— 表示標簽語句，以break/continue開頭的標簽語句
interface LabeledStatement <: Statement {type: "LabeledStatement";label: Identifier;body: Statement; }7）BreakStatement —— 表示一個break語句
interface BreakStatement <: Statement {type: "BreakStatement";label: Identifier | null; }8）ContinueStatement —— 表示一個continue語句
interface ContinueStatement <: Statement {type: "ContinueStatement";label: Identifier | null; }9）WithStatement —— 表示一個 with語句
interface WithStatement <: Statement {type: "WithStatement";object: Expression;body: Statement; }10）SwitchStatement —— 表示一個switch語句
interface SwitchStatement <: Statement {type: "SwitchStatement";discriminant: Expression;cases: [ SwitchCase ];lexical: boolean; }11）ReturnStatement —— 表示一個return語句
interface ReturnStatement <: Statement {type: "ReturnStatement";argument: Expression | null; }12）ThrowStatement —— 表示一個throw語句
interface ThrowStatement <: Statement {type: "ThrowStatement";argument: Expression; }13）TryStatement —— 表示一個try語句
interface TryStatement <: Statement {type: "TryStatement";block: BlockStatement;handler: CatchClause | null;guardedHandlers: [ CatchClause ];finalizer: BlockStatement | null; }14）WhileStatement —— 表示一個while語句
interface WhileStatement <: Statement {type: "WhileStatement";test: Expression;body: Statement; }15）DoWhileStatement —— 表示一個do/while語句
interface DoWhileStatement <: Statement {type: "DoWhileStatement";body: Statement;test: Expression; }16）ForStatement —— 表示一個for語句
interface ForStatement <: Statement {type: "ForStatement";init: VariableDeclaration | Expression | null;test: Expression | null;update: Expression | null;body: Statement; }例如：
for (var i = 0; i < 10; i++) {console.log(i); } // 轉成AST {"type": "Program","start": 0,"end": 49,"body": [{"type": "ForStatement","start": 0,"end": 49,"init": {"type": "VariableDeclaration","start": 5,"end": 14,"declarations": [{"type": "VariableDeclarator","start": 9,"end": 14,"id": {"type": "Identifier","start": 9,"end": 10,"name": "i"},"init": {"type": "Literal","start": 13,"end": 14,"value": 0,"raw": "0"}}],"kind": "var"},"test": {"type": "BinaryExpression","start": 16,"end": 22,"left": {"type": "Identifier","start": 16,"end": 17,"name": "i"},"operator": "<","right": {"type": "Literal","start": 20,"end": 22,"value": 10,"raw": "10"}},"update": {"type": "UpdateExpression","start": 24,"end": 27,"operator": "++","prefix": false,"argument": {"type": "Identifier","start": 24,"end": 25,"name": "i"}},"body": {"type": "BlockStatement","start": 29,"end": 49,"body": [{"type": "ExpressionStatement","start": 32,"end": 47,"expression": {"type": "CallExpression","start": 32,"end": 46,"callee": {"type": "MemberExpression","start": 32,"end": 43,"object": {"type": "Identifier","start": 32,"end": 39,"name": "console"},"property": {"type": "Identifier","start": 40,"end": 43,"name": "log"},"computed": false,"optional": false},"arguments": [{"type": "Identifier","start": 44,"end": 45,"name": "i"}],"optional": false}}]}}],"sourceType": "module" }17）ForInStatement —— 表示一個for/in語句
interface ForInStatement <: Statement {type: "ForInStatement";left: VariableDeclaration | Expression;right: Expression;body: Statement;each: boolean; }18）ForOfStatement —— 表示一個for/of語句
interface ForOfStatement <: Statement {type: "ForOfStatement";left: VariableDeclaration | Expression;right: Expression;body: Statement; }例如：
const iterable = ['mini', 'mani', 'mo']; for (const value of iterable) {console.log(value); }// 轉成AST {"type": "Program","start": 0,"end": 98,"body": [{"type": "VariableDeclaration","start": 0,"end": 40,"declarations": [{"type": "VariableDeclarator","start": 6,"end": 39,"id": {"type": "Identifier","start": 6,"end": 14,"name": "iterable"},"init": {"type": "ArrayExpression","start": 17,"end": 39,"elements": [{"type": "Literal","start": 18,"end": 24,"value": "mini","raw": "'mini'"},{"type": "Literal","start": 26,"end": 32,"value": "mani","raw": "'mani'"},{"type": "Literal","start": 34,"end": 38,"value": "mo","raw": "'mo'"}]}}],"kind": "const"},{"type": "ForOfStatement","start": 43,"end": 98,"await": false,"left": {"type": "VariableDeclaration","start": 48,"end": 59,"declarations": [{"type": "VariableDeclarator","start": 54,"end": 59,"id": {"type": "Identifier","start": 54,"end": 59,"name": "value"},"init": null}],"kind": "const"},"right": {"type": "Identifier","start": 63,"end": 71,"name": "iterable"},"body": {"type": "BlockStatement","start": 73,"end": 98,"body": [{"type": "ExpressionStatement","start": 77,"end": 96,"expression": {"type": "CallExpression","start": 77,"end": 95,"callee": {"type": "MemberExpression","start": 77,"end": 88,"object": {"type": "Identifier","start": 77,"end": 84,"name": "console"},"property": {"type": "Identifier","start": 85,"end": 88,"name": "log"},"computed": false,"optional": false},"arguments": [{"type": "Identifier","start": 89,"end": 94,"name": "value"}],"optional": false}}]}}],"sourceType": "module" }19）LetStatement —— 表示let語句
interface LetStatement <: Statement {type: "LetStatement";head: [ VariableDeclarator ];body: Statement; }20）DebuggerStatement —— 表示一個debugger語句
interface DebuggerStatement <: Statement {type: "DebuggerStatement"; }Declarations 聲明
1）Declaration —— 表示任何一條聲明
interface Declaration <: Statement { }2）FunctionDeclaration —— 表示一個函數聲明 id字段不為null
interface FunctionDeclaration <: Function, Declaration {type: "FunctionDeclaration";id: Identifier;params: [ Pattern ];defaults: [ Expression ];rest: Identifier | null;body: BlockStatement | Expression;generator: boolean;expression: boolean; }3）VariableDeclaration —— 表示變量聲明，let var const
interface VariableDeclaration <: Declaration {type: "VariableDeclaration";declarations: [ VariableDeclarator ];kind: "var" | "let" | "const"; }id字段不能為null.
let和const是SpiderMonkey特有的.
6）VariableDeclarator —— 表示變量聲明符
interface VariableDeclarator <: Node {type: "VariableDeclarator";id: Pattern;init: Expression | null; }Expression 表達式
interface Expression <: Node, Pattern { }任意表達式
1）ThisExpression —— 表示一個this表達式
interface ThisExpression <: Expression {type: "ThisExpression"; }2）ArrayExpression —— 表示一個數組表達式
interface ArrayExpression <: Expression {type: "ArrayExpression";elements: [ Expression | null ]; }例如：
var arr = [1, 2]; // 轉成AST {"type": "Program","start": 0,"end": 20,"body": [{"type": "VariableDeclaration","start": 2,"end": 19,"declarations": [{"type": "VariableDeclarator","start": 6,"end": 18,"id": {"type": "Identifier","start": 6,"end": 9,"name": "arr"},"init": {"type": "ArrayExpression","start": 12,"end": 18,"elements": [{"type": "Literal","start": 13,"end": 14,"value": 1,"raw": "1"},{"type": "Literal","start": 16,"end": 17,"value": 2,"raw": "2"}]}}],"kind": "var"}],"sourceType": "module" }3）ObjectExpression —— 表示一個對象表達式
interface ObjectExpression <: Expression {type: "ObjectExpression";properties: [ { key: Literal | Identifier,value: Expression,kind: "init" | "get" | "set" } ]; } var foo = { a: 1 };類似結構：{"type": "ObjectExpression","properties": [{"type": "ObjectProperty","key": {"type": "Identifier","name": "a"},"value": {"type": "NumericLiteral","value": 1}}] }4）FunctionExpression —— 表示一個函數表達式
interface FunctionExpression <: Function, Expression {type: "FunctionExpression";id: Identifier | null;params: [ Pattern ];defaults: [ Expression ];rest: Identifier | null;body: BlockStatement | Expression;generator: boolean;expression: boolean; }例如
var show= function () {return 1; } // 轉成AST {"type": "Program","start": 0,"end": 37,"body": [{"type": "VariableDeclaration","start": 0,"end": 36,"declarations": [{"type": "VariableDeclarator","start": 4,"end": 36,"id": {"type": "Identifier","start": 4,"end": 8,"name": "show"},"init": {"type": "FunctionExpression","start": 10,"end": 36,"id": null,"expression": false,"generator": false,"async": false,"params": [],"body": {"type": "BlockStatement","start": 22,"end": 36,"body": [{"type": "ReturnStatement","start": 25,"end": 34,"argument": {"type": "Literal","start": 32,"end": 33,"value": 1,"raw": "1"}}]}}}],"kind": "var"}],"sourceType": "module" }5）SequenceExpression —— 表示序列表達式，由逗號分隔
interface SequenceExpression <: Expression {type: "SequenceExpression";expressions: [ Expression ]; }例如
function show(a = 0, b = 0) {return a, b; }// 轉成AST {"type": "Program","start": 0,"end": 46,"body": [{"type": "FunctionDeclaration","start": 0,"end": 45,"id": {"type": "Identifier","start": 9,"end": 13,"name": "show"},"expression": false,"generator": false,"async": false,"params": [{"type": "AssignmentPattern","start": 14,"end": 19,"left": {"type": "Identifier","start": 14,"end": 15,"name": "a"},"right": {"type": "Literal","start": 18,"end": 19,"value": 0,"raw": "0"}},{"type": "AssignmentPattern","start": 21,"end": 26,"left": {"type": "Identifier","start": 21,"end": 22,"name": "b"},"right": {"type": "Literal","start": 25,"end": 26,"value": 0,"raw": "0"}}],"body": {"type": "BlockStatement","start": 28,"end": 45,"body": [{"type": "ReturnStatement","start": 31,"end": 43,"argument": {"type": "SequenceExpression","start": 38,"end": 42,"expressions": [{"type": "Identifier","start": 38,"end": 39,"name": "a"},{"type": "Identifier","start": 41,"end": 42,"name": "b"}]}}]}}],"sourceType": "module" }6）UnaryExpression
interface UnaryExpression <: Expression {type: "UnaryExpression";operator: UnaryOperator;prefix: boolean;argument: Expression; }7）BinaryExpression —— 表示一個二元運算符表達式
interface BinaryExpression <: Expression {type: "BinaryExpression";operator: BinaryOperator;left: Expression;right: Expression; }例如
a >= 0// 轉成AST {"type": "Program","start": 0,"end": 7,"body": [{"type": "ExpressionStatement","start": 0,"end": 6,"expression": {"type": "BinaryExpression","start": 0,"end": 6,"left": {"type": "Identifier","start": 0,"end": 1,"name": "a"},"operator": ">=","right": {"type": "Literal","start": 5,"end": 6,"value": 0,"raw": "0"}}}],"sourceType": "module" }8）AssignmentExpression
interface AssignmentExpression <: Expression {type: "AssignmentExpression";operator: AssignmentOperator;left: Expression;right: Expression; }例如:
this.a = 0;// 轉成AST {"type": "Program","start": 0,"end": 12,"body": [{"type": "ExpressionStatement","start": 0,"end": 11,"expression": {"type": "AssignmentExpression","start": 0,"end": 10,"operator": "=","left": {"type": "MemberExpression","start": 0,"end": 6,"object": {"type": "ThisExpression","start": 0,"end": 4},"property": {"type": "Identifier","start": 5,"end": 6,"name": "a"},"computed": false,"optional": false},"right": {"type": "Literal","start": 9,"end": 10,"value": 0,"raw": "0"}}}],"sourceType": "module" }9）UpdateExpression
interface UpdateExpression <: Expression {type: "UpdateExpression";operator: UpdateOperator;argument: Expression;prefix: boolean; }10）LogicalExpression —— 表示邏輯運算符（&&，||，！）
interface LogicalExpression <: Expression {type: "LogicalExpression";operator: LogicalOperator;left: Expression;right: Expression; }11）ConditionalExpression —— 表示條件運算符（三元）
interface ConditionalExpression <: Expression {type: "ConditionalExpression";test: Expression;alternate: Expression;consequent: Expression; }12）NewExpression —— 表示new運算符
new constructor[([arguments])] interface NewExpression <: Expression {type: "NewExpression";callee: Expression;arguments: [ Expression ] | null; }例如:
new Date()// 轉成AST {"type": "Program","start": 0,"end": 12,"body": [{"type": "ExpressionStatement","start": 1,"end": 11,"expression": {"type": "NewExpression","start": 1,"end": 11,"callee": {"type": "Identifier","start": 5,"end": 9,"name": "Date"},"arguments": []}}],"sourceType": "module" }13）CallExpression —— 表示函數或方法的call表達式
interface CallExpression <: Expression {type: "CallExpression";callee: Expression;arguments: [ Expression ]; }14） MemberExpression —— 表示member表達式
interface MemberExpression <: Expression {type: "MemberExpression";object: Expression;property: Identifier | Expression;computed : boolean; }例如：
console.log(4);// 轉成AST {"type": "Program","start": 0,"end": 17,"body": [{"type": "ExpressionStatement","start": 2,"end": 17,"expression": {"type": "CallExpression","start": 2,"end": 16,"callee": {"type": "MemberExpression","start": 2,"end": 13,"object": {"type": "Identifier","start": 2,"end": 9,"name": "console"},"property": {"type": "Identifier","start": 10,"end": 13,"name": "log"},"computed": false,"optional": false},"arguments": [{"type": "Literal","start": 14,"end": 15,"value": 4,"raw": "4"}],"optional": false}}],"sourceType": "module" }15）YieldExpression —— 表示yield表達式
interface YieldExpression <: Expression {argument: Expression | null; }注: yield expressions 是SpiderMonkey特有的.
16）ComprehensionExpression —— 表示
interface ComprehensionExpression <: Expression {body: Expression;blocks: [ ComprehensionBlock ];filter: Expression | null; }數組推導式：
// 公式： [ expression for (variable in object) if (condition) ]// 例如： var numbers = [1, 2, 3, 4]; var doubled = [i * 2 for (i of numbers)]; console.log(doubled); // logs 2,4,6,8 // 等價于 var doubled = numbers.map(function(i){return i * 2;});注: Array comprehensions 是SpiderMonkey特有的.
17）GeneratorExpression —— 表示generator表達式
interface GeneratorExpression <: Expression {body: Expression;blocks: [ ComprehensionBlock ];filter: Expression | null; }注: Generator expressions 是SpiderMonkey特有的.
18）GraphExpression —— 表示graph表達式
interface GraphExpression <: Expression {index: uint32;expression: Literal; } // 類似這樣的 #1={ self: #1# }.注: Graph expressions 是SpiderMonkey特有的.
19）GraphIndexExpression —— 表示graph索引表達式
interface GraphIndexExpression <: Expression {index: uint32; }// 類似這樣 #1#Graph索引表達式是SpiderMonkey特有的.
20）LetExpression —— 表示一個let表達式
interface LetExpression <: Expression {type: "LetExpression";head: [ { id: Pattern, init: Expression | null } ];body: Expression; }注: let表達式是SpiderMonkey特有的.
Pattern 模式（解構模式）
interface Pattern <: Node { }1）ObjectPattern —— 表示對象解構模式
interface ObjectPattern <: Pattern {type: "ObjectPattern";properties: [ { key: Literal | Identifier, value: Pattern } ]; }例如：
let {a, b} = obj; // 轉成AST {"type": "Program","start": 0,"end": 18,"body": [{"type": "VariableDeclaration","start": 0,"end": 17,"declarations": [{"type": "VariableDeclarator","start": 4,"end": 16,"id": {"type": "ObjectPattern","start": 4,"end": 10,"properties": [{"type": "Property","start": 5,"end": 6,"method": false,"shorthand": true,"computed": false,"key": {"type": "Identifier","start": 5,"end": 6,"name": "a"},"kind": "init","value": {"type": "Identifier","start": 5,"end": 6,"name": "a"}},{"type": "Property","start": 8,"end": 9,"method": false,"shorthand": true,"computed": false,"key": {"type": "Identifier","start": 8,"end": 9,"name": "b"},"kind": "init","value": {"type": "Identifier","start": 8,"end": 9,"name": "b"}}]},"init": {"type": "Identifier","start": 13,"end": 16,"name": "obj"}}],"kind": "let"}],"sourceType": "module" }2）ArrayPattern —— 表示數組解構模式
interface ArrayPattern <: Pattern {type: "ArrayPattern";elements: [ Pattern | null ]; }例如：
let [a, b, c] = [1, 2, 3]; // 轉成AST {"type": "Program","start": 0,"end": 27,"body": [{"type": "VariableDeclaration","start": 0,"end": 26,"declarations": [{"type": "VariableDeclarator","start": 4,"end": 25,"id": {"type": "ArrayPattern","start": 4,"end": 13,"elements": [{"type": "Identifier","start": 5,"end": 6,"name": "a"},{"type": "Identifier","start": 8,"end": 9,"name": "b"},{"type": "Identifier","start": 11,"end": 12,"name": "c"}]},"init": {"type": "ArrayExpression","start": 16,"end": 25,"elements": [{"type": "Literal","start": 17,"end": 18,"value": 1,"raw": "1"},{"type": "Literal","start": 20,"end": 21,"value": 2,"raw": "2"},{"type": "Literal","start": 23,"end": 24,"value": 3,"raw": "3"}]}}],"kind": "let"}],"sourceType": "module" }子句
1) SwitchCase —— 表示switch中case語句
interface SwitchCase <: Node {type: "SwitchCase";test: Expression | null;consequent: [ Statement ]; }例如:
switch (a) {case '1': console.log('1');break;case '2':console.log('2');break;default:console.log('3'); } // 轉成AST {"type": "Program","start": 0,"end": 138,"body": [{"type": "SwitchStatement","start": 0,"end": 138,"discriminant": {"type": "Identifier","start": 8,"end": 9,"name": "a"},"cases": [{"type": "SwitchCase","start": 15,"end": 58,"consequent": [{"type": "ExpressionStatement","start": 30,"end": 47,"expression": {"type": "CallExpression","start": 30,"end": 46,"callee": {"type": "MemberExpression","start": 30,"end": 41,"object": {"type": "Identifier","start": 30,"end": 37,"name": "console"},"property": {"type": "Identifier","start": 38,"end": 41,"name": "log"},"computed": false,"optional": false},"arguments": [{"type": "Literal","start": 42,"end": 45,"value": "1","raw": "'1'"}],"optional": false}},{"type": "BreakStatement","start": 52,"end": 58,"label": null}],"test": {"type": "Literal","start": 20,"end": 23,"value": "1","raw": "'1'"}},{"type": "SwitchCase","start": 61,"end": 103,"consequent": [{"type": "ExpressionStatement","start": 75,"end": 92,"expression": {"type": "CallExpression","start": 75,"end": 91,"callee": {"type": "MemberExpression","start": 75,"end": 86,"object": {"type": "Identifier","start": 75,"end": 82,"name": "console"},"property": {"type": "Identifier","start": 83,"end": 86,"name": "log"},"computed": false,"optional": false},"arguments": [{"type": "Literal","start": 87,"end": 90,"value": "2","raw": "'2'"}],"optional": false}},{"type": "BreakStatement","start": 97,"end": 103,"label": null}],"test": {"type": "Literal","start": 66,"end": 69,"value": "2","raw": "'2'"}},{"type": "SwitchCase","start": 106,"end": 136,"consequent": [{"type": "ExpressionStatement","start": 119,"end": 136,"expression": {"type": "CallExpression","start": 119,"end": 135,"callee": {"type": "MemberExpression","start": 119,"end": 130,"object": {"type": "Identifier","start": 119,"end": 126,"name": "console"},"property": {"type": "Identifier","start": 127,"end": 130,"name": "log"},"computed": false,"optional": false},"arguments": [{"type": "Literal","start": 131,"end": 134,"value": "3","raw": "'3'"}],"optional": false}}],"test": null}]}],"sourceType": "module" }2）CatchClause —— 表示catch語句
interface CatchClause <: Node {type: "CatchClause";param: Pattern;guard: Expression | null;body: BlockStatement; }3）ComprehensionBlock —— 表示數組推導式中for或for each語句
interface ComprehensionBlock <: Node {left: Pattern;right: Expression;each: boolean; }雜項
1）Identifier —— 標識符
interface Identifier <: Node, Expression, Pattern {type: "Identifier";name: string; }注意，標識符可以是表達式或解構模式
2）Literal ——
interface Literal <: Node, Expression {type: "Literal";value: string | boolean | null | number | RegExp; }AST 轉化網址參考：https://astexplorer.net/
var a = 1;// 轉化成AST {"type": "Program","start": 0,"end": 10,"body": [{"type": "VariableDeclaration","start": 0,"end": 10,"declarations": [{"type": "VariableDeclarator","start": 4,"end": 9,"id": {"type": "Identifier","start": 4,"end": 5,"name": "a"},"init": {"type": "Literal","start": 8,"end": 9,"value": 1,"raw": "1"}}],"kind": "var"}],"sourceType": "module" }總結
以上是生活随笔為你收集整理的超级详细AST抽象语法树Javascript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue-cli3 本地代理配置
- 下一篇： AMD、CMD、CommonJS、ES6