如何使用jsSyntaxTree绘制解析树

Question

我有这段代码需要绘制解析树：

for(id=num;id<=num;id=id+1){ 
   id=id/num; 
   if(id==num){ 
      id=id*num; 
   } 
   else{ 
      id=id+num; 
   } 
}

我在其他帖子中看到有人建议使用这个网站：https://ironcreek.net/syntaxtree/。我该如何使用它？

Answer 1

我希望这对你有用。

[ForLoop
  [Initialization 
    [Assignment 
      [Identifier "id"]
      [Literal "num"]
    ]
  ]
  [Condition 
    [Comparison 
      [Identifier "id"] 
      [Operator "<="] 
      [Literal "num"]
    ]
  ]
  [Increment 
    [Assignment 
      [Identifier "id"] 
      [Expression 
        [Identifier "id"] 
        [Operator "+"] 
        [Literal "1"]
      ]
    ]
  ]
  [Body 
    [Block 
      [Assignment 
        [Identifier "id"] 
        [Expression 
          [Identifier "id"] 
          [Operator "/"] 
          [Literal "num"]
        ]
      ]
      [IfStatement 
        [Condition 
          [Comparison 
            [Identifier "id"] 
            [Operator "=="] 
            [Literal "num"]
          ]
        ]
        [ThenBlock 
          [Assignment 
            [Identifier "id"] 
            [Expression 
              [Identifier "id"] 
              [Operator "*"] 
              [Literal "num"]
            ]
          ]
        ]
        [ElseBlock 
          [Assignment 
            [Identifier "id"] 
            [Expression 
              [Identifier "id"] 
              [Operator "+"] 
              [Literal "num"]
            ]
          ]
        ]
      ]
    ]
  ]
]