AST抽象语法树第一篇

如果你想更好的理解 vue 的 Vdom ，或是 ESLint、Webpack、Babel 等工程化、自动化的前端工具的运行原理、实现逻辑，那么你最好懂得 AST。

AST 十分强大，能帮你更好的理解现在流行的前端工具的原理，成为工程师的工程师。

什么是 AST ？

抽象语法树（Abstract Syntax Tree，AST）或简称语法树（Syntax tree）是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

和抽象语法树相对的是具体语法树（通常称作分析树）。一般的，在源代码的翻译和编译过程中，语法分析器创建出分析树。一旦 AST 被创建出来，在后续的处理过程中，比如语义分析阶段，会添加一些信息。

可以这么理解，语法树是作为 JavaScript 的编译器或解释器的，经编译后的代码会换为电脑可识别的机器码，并最终运行成功。

具体语法树是编译时记录了所有的细节的树状结构，抽象语法树则为具体语法树的简化版，那么相对来说，抽象语法树的运行速度也就快了许多，像 ESLint、Webpack、Babel 等都工具都采用 AST 来提高性能，同时，AST 也就足够满足这些工具运行时所需要的信息。

抽象语法树的结构

推荐一个在线解析工具： astexplorer

可将输入的代码解析为抽象语法树，可视化的查看所有的节点

我们输入代码：const demo = 0

下图为解析器给出的结果

可以看出，刚刚输入的代码，经过语法检查、词法分析之后，被解析成了AST语法树。

从语法树中我们可以得到以下信息

1、代码的长度，包括空格

2、name 的开始、结束位置、类型， name 为 ‘demo’ （被折叠部分 id 的内容）

3、value的开始、结束位置、类型， value 值为 0 （被折叠部分 init 的内容）

4、区块的类型为 ’const‘ 常量

什么叫做语法检查、词法分析

词法分析

也叫做扫描 scanner。负责读取代码，按照预定的规则合并成唯一标识 tokens。同时，它会移除空白符、注释等。最后，整个代码将被分割进一个 tokens 列表（或者说一维数组）。当词法分析源代码的时候，它会一个一个字母地读取代码，所以很形象地称之为扫描 scans；当它遇到空格、操作符、或者特殊符号的时候，它会认为一段扫描已经结束

语法分析

它会将词法分析出来的数组转化成树形的表达形式并且验证语法。当生成树的时候，解析器会删除一些没必要的标识 tokens（比如不完整的括号），因此 AST 不是 100% 与源码匹配的，但是已经能让我们知道如何处理了。如果解析器 100% 覆盖所有代码结构生成树叫做 CST（具体语法树）

该在线转换器还可以查看众多的语言编译之后的语法树，如 java 等，也可查看前端开发必备的 Babel、Webpack、Eslint 等工具的语法树，非常方便

我将在 AST 第二篇中以 ESLint 举例，代码示例讲解，AST 的具体用法，同时推荐一些解析代码的开发工具。