ast抽象语法树_你不知道的——AST抽象语法树第一篇

       如果你想了解vue等框架，或是ESLint、Webpack、Babel、vue@cli等工程化、自动化的前端工具的运行原理、实现逻辑，那么你是必须要懂得AST。

       AST十分强大，能帮你吃透现在流行的前端工具的真理，成为工程师的工程，而不仅仅是搬砖的码农。

       ??先来了解一下AST的基本理论??

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

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

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

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

   我们来看一下抽象语法树的结构、示例

?????????

推荐一个在线解析AST 可将输入的代码，转换为抽象语法树，可详细的查看所有的节点

https://astexplorer.net/

我们输入代码：const demo = 0

下图为解析器给出的结果：

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

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

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

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

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

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