超级详细AST抽象语法树Javascript

最新推荐文章于 2024-03-16 19:18:33 发布
最新推荐文章于 2024-03-16 19:18:33 发布
阅读量1.6k 收藏 10
点赞数 2
分类专栏： AST 文章标签： javascript css3 前端
原文链接：https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API
版权

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"
}
小蛮牧码者
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
astexplorer：一种Web工具，用于探索由各种解析器生成的AST
02-02
AST浏览器 将代码粘贴或拖放到编辑器中，并在上检查生成的AST。 AST资源管理器提供以下代码解析器： CSS： + 和 Graphviz： 车把 HTML： Vue： Java JavaScript： + JSON： 卢阿： 降价： ： PHP 常用表达： Scala 坚固性： SQL： YAML： 实验/自定义语法 根据解析器设置，它不仅支持ES5 / CSS3，而且还支持 ES6：，，，... ES7建议：，，... ，通过众所周知。 键入JavaScript（ 和 ） 变身 由于支持将来的语法，因此对于想要创建AST转换的开发人员来说，AST资源管理器是一个有用的工具。 实际上，其中包含以下转换器，因此您可以原型自己的插件： JavaScript （v5，v6） （v1，v2，v3） HTML CSS MDX 常用表达 车把 更多功能 保存并分叉代码片段。 复制网址以共享它们。 复制AST或将包含AST的文件到窗口中将解析AST并使用更新代码。 否则，文本编辑器的内容将替换为文件的内容（即，您可以拖放JS文件）。 在多个
浅析AST抽象语法树及Python代码实现
09-21
Abstract Syntax Tree抽象语法树简写为ATS,是相当于用树结构将代码程式表现出来的一种数据结构,这里我们就来浅析AST抽象语法树及Python代码实现
前端基础建设与架构12 如何理解 AST 实现和编译原理？
fegus的博客
09-13 467
这一讲，我们聚焦了 AST 这一热点话题。说 AST 是热点，是因为当前前端基础建设、工程化建设中越来越离不开 AST 技术的支持，AST 在前端中扮演的重要角色也越来越广为人知。但事实上，AST 是计算机领域中一个历经多年的基础概念，每一名开发者也都应该循序渐进地了解 AST 相关技术以及编译原理。这一讲，我们先从基本概念入手，然后借助了 acorn 的能力，动手实现了一个真实的 AST 落地场景——实现简易 Tree Shaking，正好又和上一章节内容相扣。
AST 抽象语法树知识点(1)，全网独家首发
最新发布
m0_61408947的博客
03-16 776
() => {};class{};a;this;super;a::b;它们对应的AST如图：细心的同学可能会问 identifier 和 super 怎么也是表达式呢？其实有的节点可能会是多种类型，identifier、super 有返回值，符合表达式的特点，所以也是 expression。我们判断 AST 节点是不是某种类型要看它是不是符合该种类型的特点，比如语句的特点是能够单独执行，表达式的特点是有返回值。
关于 AST
qq_22656655的博客
09-09 718
什么是抽象语法树(Abstract Syntax Tree ，AST)？ 百度百科是这么解释的： 在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。 听起来还是很绕，没关系，你可以简单理解为 它就是你所写代码的的树状结构化表现形式。 有了这棵树，我们就可以通过操纵这颗树，精准的定位到声明语句、赋值语句、运算语句等等，实现对
php ast 抽象语法树,抽象语法树(AST)
weixin_28847199的博客
03-28 555
抽象语法树入门到放弃？抽象语法树(Abstract syntax tree AST)在计算机科学中，抽象语法和抽象语法树其实是源代码的抽象语法结构的树状表现形式为什么是抽象的？前端工程化，离不了 AST虽然AST是编译原理中的基础内容，但在大前端时代，它有很广的应用。比如我们的babel、eslint、代码格式化、代码自动补全、代码压缩、JSX 甚至 Typescript 都是在 AST 上进行操...
ast自动化javascript防护方案
qq_26158277的博客
09-20 513
如无特殊说明，以下为处理js的源码： Date.prototype.format = function (formatStr) { var str = formatStr; var Week = ['日', '一', '二', '三', '四', '五', '六']; str = str['replace'](/yyyy|YYYY/, this['getFullYear']()); str = str['replace'](/MM/, (this['getMonth']()
JavaScript 常见 AST 梳理
前端劝退师
06-17 1365
这是掘金小册《babel 插件通关秘籍》的第三节（试读章节）。babel 编译的第一步是把源码 parse 成抽象语法树 AST （Abstract Syntax Tree），后续对这个 ...
（三）ExpressionStatement
qq_50538421的博客
08-04 256
练习
JavaScript 混淆与逆向必读之 AST 节点类型名词基础
静觅
07-17 1482
“ 阅读本文大概需要 15 分钟。 ”在《Python3 反爬虫原理与绕过实战》[1]一书中给出了“爬虫与反爬虫都是综合技术的应用”、“技术在对抗中进步”这样的观点。随着时间的推移、技术...
【Web技术】751- 一文助你搞懂 AST
pingan8787
10-19 396
好朋友在团队分享的文章作者：fecym原文地址：https://chengyuming.cn/views/webpack/AST.html什么是 AST抽象语法树（Abstract Sy...
AST 抽象语法树
weixin_47128751的博客
07-18 1231
AST 是什么 抽象语法树 (Abstract Syntax Tree)，简称 AST，它是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。 AST 有什么用 AST 运用广泛，比如： 编辑器的错误提示、代码格式化、代码高亮、代码自动补全； elint、pretiier 对代码错误或风格的检查； webpack 通过 babel 转译 javascript 语法； 并且如果你想了解 js 编译执行的原理，那么你就得了解 AST。 AST 如何生
treehugger:JavaScript AST（抽象语法树）转换工具
04-13
treehugger.js treehugger.js是用于程序处理的...ast.js使用一些简单的数据结构来表示AST，并使用文本表示形式来方便地调试和编写这些AST。 文本表示最好通过示例介绍。 考虑一种具有以下表达式的简单表达语言： 2 +
astq:抽象语法树 (AST) 查询引擎
05-29
ASTq 是一个用于 JavaScript 的抽象语法树 (AST) 查询引擎库，也就是说，它允许您在强大的 XPath 启发式查询语言的帮助下查询任意 AST 样式分层数据结构的节点。 ASTq 可以在可插拔访问适配器的帮助下对任意 AST ...
PHP7新特性之抽象语法树(AST)带来的变化详解
10-18
主要介绍了PHP7新特性之抽象语法树(AST)带来的变化,结合实例形式分析了PHP7抽象语法树的相关概念、功能、特性、使用方法及相关注意事项,需要的朋友可以参考下
【JavaScript 逆向】AST 技术反混淆
热门推荐
Yy_Rose的博客
04-24 1万+
JavaScript 常见混淆技术类型，及如何使用 AST 技术反混淆，通过 javascript-obfuscator 库混淆 JavaScript 代码
java AST 表达式_Java ASTNode.CAST_EXPRESSION属性代码示例
weixin_35745604的博客
02-16 267
private void parseExpression(MethodInfo methodInfo, Expression expression) {if (expression == null) {return;}//System.out.println(expression.toString()+" "+Annotation.nodeClassForType(expression.getNo...
前端高级进阶必备的 AST知识和实战
趣谈前端
04-28 2314
大厂技术坚持周更精选好文认识 AST定义： 在计算机科学中，抽象语法树是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。从定义中我们只需要知道一件事就行，那就是 AST 是一种树形结构，并且是某种代码的一种抽象表示。在线可视化...
AST抽象语法树生成
07-27
抽象语法树（Abstract Syntax Tree，AST）是一种树状结构，用于表示编程语言的语法结构。AST生成是通过将源代码解析为语法分析树（Parse Tree），然后对其进行一系列的转换和优化得到的。 在编译器或解释器中，AST生成的过程通常包括以下步骤： 1. 词法分析：将源代码分割成一个个单词（Token）。 2. 语法分析：根据语法规则将Token组织成语法分析树，也称为解析树或语法树。 3. 语义分析：对语法分析树进行检查，确保程序符合语义规则，并进行类型检查等操作。 4. AST生成：从语法分析树中去除无关的细节，只保留与语义相关的信息，生成一棵更加抽象的AST。 AST的生成过程可以借助工具和库来实现，如ANTLR、PLY等。这些工具提供了语法规则的定义和解析器生成的功能，简化了AST生成的过程。 需要注意的是，不同编程语言的AST结构可能有所不同，因为不同语言具有不同的语法和语义规则。因此，在进行AST生成时需要考虑具体的编程语言特性和规范。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值