>[success] # 遍歷節點 -- traverser ~~~ 1.經過ast 語法樹解析后，以下面這個babel 生成的簡化ast 語法樹為例 { program: { type: "Program", body: [ { type: "VariableDeclaration", declarations: [ { type: "VariableDeclarator", id: { type: "Identifier", name: "a", }, init: { type: "NumericLiteral", value: 1, }, }, ], kind: "let", }, { type: "ExpressionStatement", expression: { type: "AssignmentExpression", operator: "=", left: { type: "Identifier", name: "a", }, right: { type: "NumericLiteral", value: 2, }, }, }, { type: "ExpressionStatement", expression: { type: "BinaryExpression", left: { type: "Identifier", name: "a", }, operator: "===", right: { type: "NumericLiteral", value: 1, }, }, }, ], }, }; ~~~  >[info] ## 遍歷節點 ~~~ 1.現在想遍歷節點，但是在遍歷時候想拿到特定節點值，但是可以發現babel ast不像我們之前開 發過程中數據結構每個子節點都是固定屬性，相對來說不同節點的對應包含自己的數據類型是 不同的。下面案例來說明 ~~~ >[danger] ##### 案例一 ~~~ 1.要設計一個可以獲取指定節點數據，并且可以獲取其父節點數據，其實整體設計思路就是遞歸 時候判斷是否是需要的類型，如果需要通過回調函數獲取 2.下面數據先將案例簡化。默認所有子節點都是'body' ~~~ ~~~ const aa = { type: "Program", body: [ { type: "CallExpression", name: "add", body: [ { type: "NumberLiteral", value: "2" }, { type: "CallExpression", name: "subtract", body: [ { type: "NumberLiteral", value: "4" }, { type: "NumberLiteral", value: "2" }, ], }, ], }, ], }; function traverser(ast, cfg) { if (ast.body && ast.body.length > 0) { // 遞歸父節點中子節點 ast.body.forEach((item) => { // 判斷類型使用回調 let fun = cfg[item.type]; if (fun) { // 獲取父節點 fun(ast, item.name); } traverser(item, cfg); }); } } traverser(aa, { CallExpression(ast, name) { console.log(name, ast); }, }); ~~~ >[danger] ##### 針對更復雜的案例 ~~~ 1.下面案例針對類型做了更具體的針對父節點對應子節點進行了展開 ~~~ ~~~ const a = { type: "Program", body: [ { type: "CallExpression", name: "add", params: [ { type: "NumberLiteral", value: "2" }, { type: "CallExpression", name: "subtract", params: [ { type: "NumberLiteral", value: "4" }, { type: "NumberLiteral", value: "2" }, ], }, ], }, ], }; // 遍歷器 參數：ast 和 visitor function traverser(ast, visitor) { // 定義方法 traverseArray // 用于遍歷 AST節點數組，對數組中每個元素調用 traverseNode 方法。 function traverseArray(array, parent) { array.forEach((child) => { traverseNode(child, parent); }); } // 定義方法 traverseNode // 用于處理每個 AST 節點，接受一個 node 和它的父節點 parent 作為參數 function traverseNode(node, parent) { // 獲取 visitor 上對應方法的對象 let methods = visitor[node.type]; if (methods) { methods(node, parent); } switch (node.type) { // 根節點 case "Program": traverseArray(node.body, node); break; // 函數調用 case "CallExpression": traverseArray(node.params, node); break; // 數值和字符串，忽略 case "NumberLiteral": case "StringLiteral": break; // 當遇到無法識別的字符，拋出錯誤提示，并退出 default: throw new TypeError(node.type); } if (methods && methods.exit) { methods.exit(node, parent); } } // 首次執行，開始遍歷 traverseNode(ast, null); } traverser(a, { CallExpression(ast, name) { console.log(name, ast); }, }); ~~~