js解析为AST语法树
AST 抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。
在使用JavaScript开发过程中，虽然并不会直接与AST直接打交道，但许多打包相关的插件都会涉及到它，例如使用bable对代码进行转换，ts类型检查，语法高亮，使用UglifyJS来压缩代码，使用www.safekodo.com来进行代码混淆加密，css预处理器、elint、pretiier，等。有很多js模块我们不会在生产环境用到，但是它们在我们的开发过程中充当着重要的角色。所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上。等，实际这背后就是在对JavaScript的抽象语法树进行操作。
在线 JS转AST语法树 在线转换JS=>AST
一、JavaScript语法解析
1、什么是AST抽象语法树
It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.
估计很多同学看完这段官方的定义一脸懵逼，可以通过一个简单的例子来看语法树具体长什么样子。有如下代码：
我们可以发现，程序代码本身可以被映射成为一棵语法树（实际上，真正AST每个节点会有更多的信息。但是，这是大体思想。从纯文本中，我们将得到树形结构的数据，每个条目和树中的节点一一对应。），而通过操纵语法树，我们能够精准的获得程序代码中的某个节点。例如声明语句，赋值语句，而这是用正则表达式所不能准确体现的地方。
JavaScript的语法解析器Espsrima提供了一个在线解析的工具，你可以借助于这个工具，将JavaScript代码解析为一个JSON文件表示的树状结构。
2、有什么用
聊到AST的用途，其应用非常广泛，下面我简单罗列了一些：
* IDE的错误提示、代码格式化、代码高亮、代码自动补全等 * JSLint、JSHint对代码错误或风格的检查等 * webpack、rollup进行代码打包等 * CoffeeScript、TypeScript、JSX等转化为原生Javascript
其实它的用途，还不止这些，如果说你已经不满足于实现枯燥的业务功能，想写出类似react、vue这样的牛逼框架，或者想自己搞一套类似webpack、rollup这样的前端自动化打包工具，那你就必须弄懂AST。
抽象语法树的作用非常的多，比如编译器、IDE、压缩优化代码等。在JavaScript中，虽然我们并不会常常与AST直接打交道，但却也会经常的涉及到它。例如使用UglifyJS来压缩代码，实际这背后就是在对JavaScript的抽象语法树进行操作。在一些实际开发过程中，我们也会用到抽象语法树，下面通过一个小例子来看看怎么进行JavaScript的语法解析以及对节点的遍历与操纵。
二、如何生成AST？
在了解如何生成AST之前，有必要了解一下Parser（常见的Parser有esprima、traceur、acorn、shift等）。JS Parser其实是一个解析器，它是将js源码转化为抽象语法树（AST）的解析器。整个解析过程主要分为以下两个步骤：
* 分词（也就是词法分析）：将整个代码字符串分割成最小语法单元数组 * 语法分析：在分词基础上建立分析语法单元之间的关系 1、什么是语法单元？
语法单元是被解析语法当中具备实际意义的最小单元，简单的来理解就是自然语言中的词语。举个例子来说，下面这段话：“2019年是祖国70周年”，我们可以把这句话拆分成最小单元，即：2019年、是、祖国、70、周年。
这就是我们所说的分词，也是最小单元，因为如果我们把它再拆分出去的话，那就没有什么实际意义了。
Javascript 代码中的语法单元主要包括以下这么几种：
* 关键字：例如 var、let、const等 * 标识符：没有被引号括起来的连续字符，可能是一个变量，也可能是 if、else 这些关键字，又或者是 true、false 这些内置常量 * 运算符： +、-、 *、/ 等 * 数字：像十六进制，十进制，八进制以及科学表达式等语法 * 字符串：因为对计算机而言，字符串的内容会参与计算或显示 * 空格：连续的空格，换行，缩进等 * 注释：行注释或块注释都是一个不可拆分的最小语法单元 * 其他：大括号、小括号、分号、冒号等
如果我们以最简单的复制语句为例的话，如下：
var a = 1
通过分词，我们可以得到如下结果：
[
{ "type": "Keyword", "value": "var" }, { "type": "Identifier", "value": "a" }, { "type": "Punctuator", "value": "=" }, { "type": "Numeric", "value": "1" }, { "type": "Punctuator", "value": ";" } ]
2、什么是语法分析？
上面我们已经得到了我们分词的结果，需要将词汇进行一个立体的组合，确定词语之间的关系，确定词语最终的表达含义。
简单来说语法分析是对语句和表达式识别，确定之前的关系，这是个递归过程。
上面我们通过语法分析，可以得到如下结果：
{
"type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "a" }, "init": { "type": "Literal", "value": 1, "raw": "1" } } ], "kind": "var" } ], "sourceType": "script" }
这就是 var a = 1 所转换的 AST；
三、示例代码解析AST如何用
小需求 ：我们将构建一个简单的静态分析器，它可以从命令行进行运行。它能够识别下面几部分内容：
* 已声明但没有被调用的函数 * 调用了未声明的函数 * 被调用多次的函数
现在我们已经知道了可以将代码映射为AST进行语法解析，从而找到这些节点。但是，我们仍然需要一个语法解析器才能顺利的进行工作，在JavaScript的语法解析领域，一个流行的开源项目是Esprima，我们可以利用这个工具来完成任务。此外，我们需要借助Node来构建能够在命令行运行的JS代码。当然也可以在在线网页上实现js代码转ast语法树 在线转换JS=>AST
转换解析流程
- 生成AST
- 修改AST
- 将AST重新生成js代码
下面利用safekodo提供的网页版ast解析器解析演示
原程序
```
console.log("www.safekodo.com 在线JavaScript代码转AST");
```
生成AST
{ "type": "File", "start": 0, "end": 51, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 51, "index": 51 } }, "errors": [], "program": { "type": "Program", "start": 0, "end": 51, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 51, "index": 51 } }, "sourceType": "module", "interpreter": null, "body": [ { "type": "ExpressionStatement", "start": 0, "end": 51, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 51, "index": 51 } }, "expression": { "type": "CallExpression", "start": 0, "end": 51, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 51, "index": 51 } }, "callee": { "type": "MemberExpression", "start": 0, "end": 11, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 11, "index": 11 } }, "object": { "type": "Identifier", "start": 0, "end": 7, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 7, "index": 7 }, "identifierName": "console" }, "name": "console" }, "computed": false, "property": { "type": "Identifier", "start": 8, "end": 11, "loc": { "start": { "line": 1, "column": 8, "index": 8 }, "end": { "line": 1, "column": 11, "index": 11 }, "identifierName": "log" }, "name": "log" } }, "arguments": [ { "type": "StringLiteral", "start": 12, "end": 50, "loc": { "start": { "line": 1, "column": 12, "index": 12 }, "end": { "line": 1, "column": 50, "index": 50 } }, "extra": { "rawValue": "www.safekodo.com 在线JavaScript代码转AST", "raw": "\"www.safekodo.com 在线JavaScript代码转AST\"" }, "value": "www.safekodo.com 在线JavaScript代码转AST" } ] } } ], "directives": [] }, "comments": [] }
对AST做修改 得到以下新的AST
{
"type": "File", "start": 0, "end": 51, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 51, "index": 51 } }, "errors": [], "program": { "type": "Program", "start": 0, "end": 51, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 51, "index": 51 } }, "sourceType": "module", "interpreter": null, "body": [ { "type": "ExpressionStatement", "start": 0, "end": 51, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 51, "index": 51 } }, "expression": { "type": "CallExpression", "start": 0, "end": 51, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 51, "index": 51 } }, "callee": { "type": "MemberExpression", "start": 0, "end": 11, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 11, "index": 11 } }, "object": { "type": "Identifier", "start": 0, "end": 7, "loc": { "start": { "line": 1, "column": 0, "index": 0 }, "end": { "line": 1, "column": 7, "index": 7 }, "identifierName": "console" }, "name": "console" }, "computed": false, "property": { "type": "Identifier", "start": 8, "end": 11, "loc": { "start": { "line": 1, "column": 8, "index": 8 }, "end": { "line": 1, "column": 11, "index": 11 }, "identifierName": "log" }, "name": "log" } }, "arguments": [ { "type": "StringLiteral", "start": 12, "end": 50, "loc": { "start": { "line": 1, "column": 12, "index": 12 }, "end": { "line": 1, "column": 50, "index": 50 } }, "extra": { "rawValue": "www.safekodo.com", "raw": "\"www.safekodo.com\"" }, "value": "www.safekodo.com" } ] } } ], "directives": [] }, "comments": [] }
ast转js
在通过safekodo提供的网页版ast代码转js工具将修改后的ast代码转为js
相关文章
- noip2018提高组初赛解析_noip小学组
- js 实现解析和构造Url参数
- html js 全局 变量,JS定义全局变量
- js中的prototype的解析
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- 高频js手写题之实现数组扁平化、深拷贝、总线模式
- 前端项目启动报错：config buildwebpack.dev.conf.js
- js 数组详细操作方法及解析
- thymeleaf模板支持（解析）JS
- js 数组去除重复数据-当WPS开始像支持VBA一样支持JS语言时，微软又该何去何从？
- js作用域链与预解析
- WKWebView接入PDF.js过程记录处理总结
- JS 按自定义格式 拼接二进制串 解析二进制串
- Linux 安装node.js和npm教程详解程序员
- 使用html+css+js实现3D相册详解编程语言
- JS面向对象例子详解编程语言
- JS偏函数
- JS在Oracle中的应用（js如何oracle）
- Oracle中使用JS变量管理数据（oracle使用js变量）
- 一段js小代码，计算距春节还有多少天
- Javascript入门学习第四篇js对象和数组
- js解析与序列化json数据(一)json.stringify()的基本用法
- js解析与序列化json数据(三)json的解析探讨
- JSP中js传递和解析URL参数以及中文转码和解码问题
- 巧用js提交表单轻松解决一个页面有多个提交按钮
- 解析页面加载与js函数的执行onloadorready
- js鼠标及对象坐标控制属性详细解析
- js闭包的用途详解
- js使用递归解析xml
- jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析