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

Question

抽象语法树(简称AST)。我在Github上经常听到将其编译为SpiderMonkey AST的说法。
那么，这是JS语法树的实际标准吗？V8是否使用相同类型的AST？

我该如何与它互动？

- jiyinyiyong

---

这是一个方便的JavaScript AST执行可视化工具：http://int3.github.io/metajs/ - Matt Woelk

Answer 1

1.您可以查看AST Explorer，这是一个在线工具，可用于探索超过10个解析器生成的AST。这是学习语言AST树的好工具。
AST explorer源代码在Github.com上。

---

2.此外，您还可以将JavaScript代码粘贴到JavaScript AST visualizer中，并单击“show ast”按钮，以直观的方式查看AST。

演示JS代码：

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

- cuixiping

---

这张图片有什么好处？它有帮助吗？ - Buh Buh

Answer 2

SpiderMonkey提供解析器API。这可能是获取语法对象最简单的方法。

还有一些开放的js-js解析器，例如Esprima（实际上是ECMAScript，但非常相似）。

- salezica

Answer 3

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

有几个JavaScript AST标准：

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

以下是JavaScript解析器列表：

• esprima 最早的之一
• acorn 非常流行、快速和稳定
• espree 基于acorn，用于eslint；
• @babel/parser 基于acorn，支持所有新的语言特性
• shfit-ast parser 生成Shift AST
• typescript 可以解析JavaScript和TypeScript，并为此生成自己的AST格式

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

尽管大多数支持estree的解析器可以轻松地相互替换，但babel具有非常丰富的基础设施，可使其舒适地使用AST。 它拥有：

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

玩弄AST的最简单方法之一是使用putout，它基于babel，并支持通过插件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，您可以在不直接处理AST的情况下对JavaScript代码进行最简单的转换。

- coderaiser

---

我已向Node.js团队提出了一个关于TC9提案状态跟进的问题。如果您认为这应该成为Node.js的一个功能，请在我提出的GitHub问题中投票并支持此功能状态请求。这个功能在Python中是可用的。https://www.github.com/nodejs/node/issues/45158 - Gary

Answer 4

如果您想尝试来自Marijnh教授的缩写解析器https://github.com/marijnh，请使用此链接：https://astexplorer.net/。

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

上述JavaScript AST可视化工具使用Esprima引擎，并且也是用JavaScript编写的。

JavaScript在解析AST方面占据主导地位，因为今天的JavaScript引擎已经被超级优化了。https://en.wikipedia.org/wiki/JavaScript_engine 这两个Web浏览器引擎都有用C++编写的AST处理功能。这就是为什么JavaScript代码在大多数情况下运行得很快，除了eval之外。

- prosti

---

视频链接无效。 - Juan Picado

感谢 @JuanPicado，我已经删除了链接。 - prosti

Answer 5

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

它起源于Mozilla的Dave Herman的出版物，自那时以来已经发展成为社区标准。因此它应该在某种程度上与SpiderMonkey匹配，但我不确定V8和JSC是否也适用。

如果有人能提供更多相关信息，将不胜感激。

- Rvach.Flyver