js关于AST的简单理解

前言

在一次讨论中，听人提到了AST，感觉既熟悉又模糊，后来朋友补充了一句：抽象语法树，我才恍然，来简单mark复习下这个知识点。AST到底是什么？它的作用是什么？

一、AST是啥？

AST全名abstract syntax tree（抽象语法树），抽象表示把js代码进行了结构化的转化，转化为一种类似树状数据结构的json对象。

js是一种解释性语言，js引擎将js代码交给解释器之前，要先进行格式化，也就是通过词法和语法分析后构建出抽象语法树(AST)，之后会交给解释器，最终解释称计算机可以识别的机器码。
如果javascript解析器无法构建出语法树时就会报出语法错误，从而结束此次编译过程（平时遇到语法错误提示时，就是此阶段报的错误）。

1、生成原理

在了解如何生成AST之前，有必要了解一下Parser，Parser其实是一个解析器，它是将js源码转化为抽象语法树（AST）的解析器。
Parser是解析器的统称，不是指定的解析器，通常用到的解析器有 uglify-js、esprima、acorn、babel的@babel/parser等

整个解析过程主要分为以下两个步骤：

分词：词法解析器将整个代码字符串分割成最小语法单元数组。
语法分析：对应语法的解释器在分词基础上建立分析语法单元之间的关系。

经过分词和语法解析后，代码转化为对应的抽象解释，也就是AST了

2、AST结构

AST是一个json结构，去描述这一段js代码的类型、内容等，类似于虚拟DOM树结构

这里推荐两个在线解析器Esprima和astexplorer；可以在线生成js代码的AST结构。

var test = '测试'

上边这段代码，转化成AST结构后如下：

{
  "type": "Program",
  "start": 0,
  "end": 15,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 15,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 4,
          "end": 15,
          "id": {
            "type": "Identifier",
            "start": 4,
            "end": 8,
            "name": "test"
          },
          "init": {
            "type": "Literal",
            "start": 11,
            "end": 15,
            "value": "测试",
            "raw": "'测试'"
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "module"
}

对该AST结构观察一番，便会明白，AST其实即是我们在已经ECMAScript标准对代码进行解析后，将标识符（identifier）、声明（declaration）、表达式（expression）、语句（statement）等按代码表述的逻辑整理成为树状结构。看到这个AST结构是不是让我们对js代码有更深的认识呐？
通过上边的树状结构，我们看到每个节点都有自己的类型，来表示当前节点是个声明变量的符号还是一个特定类型的数据，或者是一个运算符。

下边是AST的节点类型列表：

AST节点类型

二、AST作用

前边简单讲了AST生成的原理和他的结构，知道它是js引擎去执行js代码的必经之路。但是AST不仅仅是用在JS引擎的对代码的编译上。我们的开发过程也会经常用到。

比如babel将 ES6转化成ES5 、开发WebPack插件、eslink语法检查等这些底层原理都是基于AST来实现的，AST能够帮助开发者理解JavaScript这门语言的精髓，还相当于你拥有对一门新的js语法的解释权。

我们可以直接试着用三方库来生成AST，这里推荐一个工具库recast，因为它用起来稍微简单一点。
其实recast是基于esprima开发的，我也是在看它的依赖配置时才发现

1、利用AST实现js格式转换

无论用什么工具去转换js代码，都是有三个步骤：

Parse解析js代码成AST结构；
对AST树的节点进行添加、更新及移除等操作，完成格式转换；
解析工具再把完成转换的AST再译回js代码。

const recast = require("recast");

const code = [
  "function add(a, b) {",
  "  return a + b ;",
  "}"
].join("\n")
 const ast = recast.parse(code);

console.log(ast);//这个ast就是被解析出来的AST结构

const add = ast.program.body[0];

const n = recast.types.namedTypes;

n.FunctionDeclaration.assert(add);
 
const b = recast.types.builders;
 
ast.program.body[0] = b.variableDeclaration("var", [
  b.variableDeclarator(add.id, b.functionExpression(
    null,
    add.params,
    add.body
  ))
]);
 
add.params.push(add.params.shift());

const output = recast.print(ast).code;//这个就是parse方法的逆向过程，将AST重新编译成js代码

console.log(output);

最后打印结果是：

var add = function(b, a) {
  return a + b ;
};

通过这个个实验，说明了js转成AST后，可以利用工具可以对其进行任意修改，把它变成任何你想要的的js代码。
由于可以增、删、改源代码里边的内容，所以格式转换和压缩代码都不是问题，发挥我们的想象里，还有无限可能。
今天先到这里，回头补一个Babel的AST操作小案例。