什么是JavaScript AST,如何玩它？

Question

抽象语法树..我总是听说在Github上编译为SpiderMonkey AST.
那么,这是JS语法树的实际标准吗？还有V8,是V8使用相同类型的AST吗？

我该怎么玩？

Answer 1

你可以看看AST探险家.一个在线工具,用于探索由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
}

Answer 2

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

还有开放的js-js解析器,如Esprima(这是ECMAScript,真的,但它就在巷子里)

Answer 3

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

有几个 JavaScriptAST标准：

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

以下是 JavaScript 解析器的列表：

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

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

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

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

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

这是删除节点的示例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。