什么是 JavaScript AST，如何使用它？答案

【问题标题】：What is JavaScript AST, how to play with it?什么是 JavaScript AST，如何使用它？
【发布时间】：2023-04-04 21:55:01
【问题描述】：

抽象语法树.. 我总是听说在 Github 上编译成 SpiderMonkey AST。
那么，这是 JS 语法树的实际标准吗？还有 V8，V8 使用的是同一种 AST 吗？

我该怎么玩呢？

【问题讨论】：

【解决方案1】：

抽象语法树 (AST)，是程序源代码的树形表示。

有几个 JavaScript AST 标准：

以下是 JavaScript 解析器列表：

您可以在astexplorer.net 上找到更多解析器，其中大多数与estree 兼容。

虽然大多数支持estree 的解析器可以很容易地相互替换，但babel 具有与AST 舒适工作所需的非常广泛的基础设施。它有：

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

这里是删除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。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

上面提到的JavaScript AST visualizer使用了Esprima引擎，也是用JavaScrpt编写的。

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

JS语法树的SpiderMonkey AST标准？ V8 使用的是同一种 AST 吗？

这两个 Web 浏览器引擎在内部都有用 C++ 编写的 AST 处理。这就是为什么除了eval 之外，JavaScrpt 代码在大多数情况下都能快速运行的原因。

【讨论】：

【解决方案4】：

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

2.您也可以将您的js代码粘贴到JavaScript AST visualizer并点击“显示ast”按钮，您将看到AST。

演示js代码：

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

【讨论】：

【解决方案5】：

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

还有开放的 js-js 解析器，例如 Esprima（确实是 ECMAScript，但它就在小巷里）

【讨论】：