JavaScript AST介绍
一、什么是AST？
AST全称为：Abstract Syntax Tree（即抽象语法树），也可简称为Syntax Tree（语法树）
AST是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。
简单理解，AST就是源代码的树状结构表现
二、AST有什么用？
有了AST抽象语法树，我们就可以通过操纵这颗树，精准的定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、语法分析、优化、变更等操作。
现在流行的 webpack，eslint 等很多插件或者包都涉及到AST。
AST的应用非常广泛，以下是部分例子：
-
IDE的错误提示、代码格式化、代码高亮、代码自动补全等 -
JSLint、JSHint对代码错误或风格的检查等 -
webpack、rollup进行代码打包等 -
CoffeeScript、TypeScript、JSX、babel等转化为原生Javascript
当然，其实它的用途，还远不止这些，如果你想自己实现一个React、Vue这样的框架，那就必须要知道AST。
而且，不仅仅只针对JavaScript，其实大部分的语言都会有抽象语法树的概念。无论是解释语言（JavaScript，Python，Ruby）还是一种编译语言（C#，Java，Rust），总会有一个共同的部分：将源代码作为纯文本解析为一个数据结构，这里的数据结构就是指AST。
如果能对AST有深入的理解，那么对于其它的语言的也可举一反三，学好AST永远不亏。
三、AST的生成过程？
现在的Web浏览器引擎大都使用C++编写AST处理功能，这也是JavaScrpt代码在大多数情况下能快速运行的原因。
AST的生成主要分为以下两个步骤：
-
分词：将整个代码字符串分割成最小语法单元数组 -
语法分析：在分词基础上建立分析语法单元之间的关系
语法单元
语法单元是被解析语法当中具备实际意义的最小单元，简单的来理解就是自然语言中的词语。
例如，下面这段话：
2019年是祖国70周年
我们可以把这句话拆分成最小单元，即：2019年、是、祖国、70、周年。
这就是我们所说的分词，也是最小单元，因为如果我们把它再拆分出去的话，那就没有什么实际意义了。
Javascript 代码中的语法单元主要包括以下这么几种：
- 关键字：例如
var、let、const等 - 标识符：没有被引号括起来的连续字符，可能是一个变量，也可能是
if、else这些关键字，又或者是true、false这些内置常量 - 运算符：
+、-、*、/等 - 数字：像十六进制，十进制，八进制以及科学表达式等语法
- 字符串：因为对计算机而言，字符串的内容会参与计算或显示
- 空格：连续的空格，换行，缩进等
- 注释：行注释或块注释都是一个不可拆分的最小语法单元
- 其他：大括号、小括号、分号、冒号等
如果我们以最简单的复制语句为例的话，如下？
var sum = 1 + 2;
通过分词，我们可以得到如下结果：
[
{
"type": "Keyword",
"value": "var"
},
{
"type": "Identifier",
"value": "sum"
},
{
"type": "Punctuator",
"value": "="
},
{
"type": "Numeric",
"value": "1"
},
{
"type": "Punctuator",
"value": "+"
},
{
"type": "Numeric",
"value": "2"
},
{
"type": "Punctuator",
"value": ";"
}
]
在这个网站，可以很容易的为JavaScript生成分词：https://esprima.org/demo/parse.html#
语法分析
上面我们已经得到了我们分词的结果，需要将词汇进行一个立体的组合，确定词语之间的关系，确定词语最终的表达含义。
简而言之，语法分析是对语句和表达式识别，确定分词之间的关系，并能准确将之表达。
具体的语法分析过程会比较复杂，这里不详细作介绍，总之这一步骤的产物便是AST
通过这个网站可以很简单的得到代码的抽象语法树表示图：https://resources.jointjs.com/demos/javascript-ast，上面的var sum = 1 + 2;语句，其AST示意图如下：
上面的表示图省略了很多字段，以下是AST的详细内容：
{
"type": "Program",
"start": 0,
"end": 16,
"body": [
{
"type": "VariableDeclaration",
"start": 0,
"end": 16,
"declarations": [
{
"type": "VariableDeclarator",
"start": 4,
"end": 15,
"id": {
"type": "Identifier",
"start": 4,
"end": 7,
"name": "sum"
},
"init": {
"type": "BinaryExpression",
"start": 10,
"end": 15,
"left": {
"type": "Literal",
"start": 10,
"end": 11,
"value": 1,
"raw": "1"
},
"operator": "+",
"right": {
"type": "Literal",
"start": 14,
"end": 15,
"value": 2,
"raw": "2"
}
}
}
],
"kind": "var"
}
],
"sourceType": "module"
}
四、AST 的使用？
相信大部分同学对 babel 这个库不陌生，现在的做前端模块化开发过程中中一定少不了它，因为它可以帮你将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
实际上呢，babel 中的很多功能都是靠修改 AST 实现的。
假如我们想实现一个功能：将 es6 中的 箭头函数 转换成 es5 中的 普通函数
转换前：
const sum = (a,b) => a+b;
转换后：
const sum = function(a, b){
return a+b;
}
想想看，该如何实现呢？