1.你可以看看AST explorer。一个在线工具，用于探索由 10 多个解析器生成的 AST。是学习一门语言的AST树的好工具。
Github.com 上的 AST 资源管理器源。

2.您也可以将您的 js 代码粘贴到JavaScript AST 可视化工具中，然后单击“显示 AST”按钮，您将可以直观地看到 AST。

演示js代码：

function foo(d) {
  d += 3;
    return d+999
}
function bar(d) {
    return d*100
}

SpiderMonkey 提供了解析器 api。这可能是掌握语法对象的最简单方法。

还有像Esprima这样的开放式js-js解析器（这是 ECMAScript，真的，但它就在胡同里）

抽象语法树（AST），是程序源代码的树状表示。

有几个 JavaScriptAST标准：

• estree - EcmaScript AST 的标准；
• shift - 设计时考虑了转换，与 estree 不兼容；
• babel - 支持尚未成为标准的语言特性，但有一个建议。

下面是 JavaScript 解析器的列表：

• esprima是第一个
• 橡子非常受欢迎，快速且稳定
• espree基于acorn，在eslint 中使用；
• @babel/parser基于acorn，支持所有新的语言特性
• shfit-ast 解析器产生Shift AST
• typescript可以解析 JavaScript 和 TypeScript，为此生成它自己的 AST 格式

您可以在astexplorer.net上找到更多解析器，其中大部分是estree兼容的。

虽然大多数支持的解析器estree可以很容易地相互替换，但babel具有使用AST. 它有：

• 描述所有工具及其使用方法的手册。
• @babel/traverse——维护树的整体状态，负责替换、移除、添加节点；
• @babel/template -AST从字符串创建-node 的最简单方法。
• @babel/types - 包含AST-nodes 的构建器和检查器。

最简单的使用方法之一AST是使用putout，它基于babel并支持JavaScript在插件 API 的帮助下转换代码的简化方式。

这是删除DebuggerStatement节点的示例：

module.exports.replace = () => ({
    'debugger': '',
});

如果你想切换变量的位置，改变声明的方式：

module.exports.replace = () => ({
    'let __a = __b': 'const __b = __a'
});

如果您想将此代码转换为return x[0]：

for (const x of y) {
    return x;
}

您可以使用：

module.exports.replace = () => ({
    'for (const __a of __b) {return __a}': 'return __a[0]',
});

借助它，putout您可以进行最简单的JavaScript代码转换，而无需AST直接处理。

如果你想尝试 Marijnh 教授的 acro 解析器https://github.com/marijnh试试这个链接：https : //astexplorer.net/

这是一个小巧、快速的 JavaScript 解析器，完全用 JavaScript 编写。

上面提到的JavaScript AST 可视化器使用 Esprima 引擎，并且也是用 JavaScrpt 编写的。

JavaScript 在解析 AST 方面占主导地位，因为今天 JavaScript 引擎已经过超级优化。https://en.wikipedia.org/wiki/JavaScript_engine

JS语法树的SpiderMonkey AST标准？V8 是否使用相同类型的 AST？

这两个 Web 浏览器引擎都在内部使用 C++ 编写了 AST 处理。这就是为什么除了eval.

我只知道 Javascript AST 的一种规范：https : //github.com/estree/estree

它起源于 Mozilla 的 Dave Herman 的出版物，此后演变为社区标准。所以它应该在某种程度上匹配 SpiderMonkey，但我不确定 V8 和 JSC。

如果有人可以提供有关此事的更多信息，我们将不胜感激。