概念
AST 全稱為 Abstract Syntax Tree恒序，譯為抽象語法樹三圆。在 JavaScript 中悬嗓，任何一個對象（變量污呼、函數(shù)、表達(dá)式等）都可以轉(zhuǎn)化為一個抽象語法樹的形式包竹。抽象語法樹本質(zhì)就是一個樹形結(jié)構(gòu)的對象燕酷。
使用 astexplorer 可以在線將任意對象籍凝，表達(dá)式轉(zhuǎn)換為 AST 語法樹。
那么假設(shè)你的電腦主板壞掉了苗缩。維修人員的修理過程是：先把電腦各個零件拆開饵蒂，找到壞掉的主板，檢查主板是否還可以修好酱讶。如果不行退盯，則換一個新的主板，再把電腦一步步重新組裝好浴麻。那么 AST 就是被拆解的一個個電腦零件得问。
特點
一個對象生成 AST 的關(guān)鍵所在是詞法分析和語法分析。
- 詞法分析指的是將對象逐個掃描软免，獲取每一個字母的信息，生成由對象組成的一維數(shù)組焚挠。
const a = 5;
//詞法分析
[{value:'const',type:'keyword'},{value:'a',type:'identifier'}...]
語法分析指的是將有關(guān)聯(lián)的對象整合成樹形結(jié)構(gòu)的表達(dá)形式膏萧。
const a = 5;
//語法分析
{
"type": "Program",
"start": 0,
"end": 12,
"body": [
{
"type": "VariableDeclaration",
"start": 0,
"end": 12,
"declarations": [
{
"type": "VariableDeclarator",
"start": 6,
"end": 11,
"id": {
"type": "Identifier",
"start": 6,
"end": 7,
"name": "a"
},
"init": {
"type": "Literal",
"start": 10,
"end": 11,
"value": 5,
"raw": "5"
}
}
],
"kind": "const"
}
],
"sourceType": "module"
}
用途
- 常用各類轉(zhuǎn)義、編譯的插件中蝌衔。比如最典型的 ES6 轉(zhuǎn)換為 ES6 工具 榛泛、JSX 語法轉(zhuǎn)換為 JavaScript 語法。即 babel 模塊噩斟。
- 代碼語法的檢查曹锨，比如代碼規(guī)范工具 ESLint 模塊。
- 各類 JS/CSS/HTML 壓縮工具剃允。
- 代碼的格式化沛简、高亮。
- 代碼錯誤提示斥废。
- 代碼自動補(bǔ)全椒楣。
案例
我們使用 AST 的概念來拆解一個最簡單的函數(shù)。
function exp(a){return a}
在最外層的 type牡肉、start捧灰、end、body统锤、sourceType 中毛俏，我們主要看中間 body 部分。把每一個 body 當(dāng)成一個塊來拆解饲窿。
第一個 body（塊） 就是 function exp(a) 這段煌寇。這是一個 type 為 FunctionDeclaration （函數(shù)定義）類型的對象。每一個函數(shù)定義的塊中都有一個 id 對象免绿。如上所示唧席，它的 id 對象信息中 type 為 Identifier，name 為 exp。它不是表達(dá)式淌哟，也不是異步迹卢。所以 express、generator徒仓、async 皆為 false腐碱。最后它有一個參數(shù) params 對象集，在該參數(shù)對象集中參數(shù)名 name 為 a掉弛。
再看第二個 body（塊） 就是 return a症见。這是一個 type 為 BlockStatement （塊語句）類型的對象。在其內(nèi)部有一個 type 為 ReturnStatement （返回語句）類型的語句殃饿。在返回的 argument 集合中參數(shù)名 name 為形參 a谋作。
可以看到上面的拆解中，每一個塊都有 type乎芳、start遵蚜、end、body 這幾個字段奈惑。
其中 type 表達(dá)當(dāng)前塊的類型吭净。比如 FunctionDeclaration 表示函數(shù)定義，Identifier 表示標(biāo)識符肴甸、BlockStatement 表示塊語句寂殉、ReturnStatement 表示返回語句等。
start 表示該塊開始的位置原在，end 表示該塊結(jié)束的位置友扰，body 表示子塊。
其他的字段根據(jù)塊的性質(zhì)不同有所不同晤斩。
