创建 AST 节点写法示例
创建 AST 节点写法示例
前端GoGoGo
发布于 2020-04-02 12:01:09
发布于 2020-04-02 12:01:09
AST (Abstract Syntax Tree(抽象语法树)) 是源代码语法结构的一种抽象表示。不了解 AST 的，可以看这篇文章。
创建 AST 节点是转换AST节点时的常见操作。本文用 @babel/types 来创建 AST节点。@babel/types 是根据 babel 的 AST 规范来创建 AST。规范说明见这里。
下面，我们来具体看代码。代码中的 t 为 require('@babel/types')。完整代码见这里。
创建数字
t.numericLiteral(1)输出:
1创建字符串
t.stringLiteral('a str')输出:
"a str"创建布尔值
t.booleanLiteral(true)
t.booleanLiteral(false)输出:
true
false创建null
t.nullLiteral()输出:
null创建对象
const nameKey =
t.objectProperty(
t.identifier('name'),
t.stringLiteral('Joel')
)
const agetKey =
t.objectProperty(
t.identifier('age'),
t.numericLiteral(18)
)
t.objectExpression([nameKey, agetKey])输出:
{
name: "Joel",
age: 18
}创建获取对象的属性
t.memberExpression(
t.identifier('obj'),
t.identifier('name')
)
t.memberExpression(
t.identifier('obj'),
t.identifier('name'),
true
)输出:
obj.name
obj[name]创建数组
const item1 = t.numericLiteral(1)
const item2 = t.numericLiteral(2)
t.arrayExpression([item1, item2])输出:
[1, 2]创建获取数组的内容
t.memberExpression(
t.identifier('arr'),
t.numericLiteral(1),
true
)输出:
arr[1]创建二元表达式
t.binaryExpression(
'+', // 操作符。 还支持：==, ===, != 等
item1, // 左操作数
item2
)输出:
1 + 2创建三元表达式
t.conditionalExpression(
t.binaryExpression(
'>',
t.numericLiteral(4),
t.numericLiteral(3)
),
t.numericLiteral(4),
t.numericLiteral(3)
)输出:
4 > 3 ? 4 : 3创建逻辑表达式
t.logicalExpression(
'||',
t.identifier('num'),
t.numericLiteral(0)
)
t.logicalExpression(
'&&',
t.identifier('obj'),
t.memberExpression(
t.identifier('obj'),
t.identifier('name')
)
)输出:
num || 0
obj && obj.name创建条件语句if
t.binaryExpression(
'>',
t.numericLiteral(4),
t.numericLiteral(3)
),
t.blockStatement(
[
t.expressionStatement(
t.callExpression(
t.memberExpression(
t.identifier('console'),
t.identifier('log')
),
[
t.booleanLiteral(true)
]
)
)
]
)输出:
if (4 > 3) {
console.log(true);
}不知到怎么创建 else if 和 else。
创建for循环
t.forStatement(
t.variableDeclaration(
'let',
[
t.variableDeclarator(
t.identifier('i'),
t.numericLiteral(0)
)
]
),
t.binaryExpression(
'<',
t.identifier('i'),
t.numericLiteral(3)
),
t.updateExpression(
'++',
t.identifier('i')
),
t.blockStatement([
t.emptyStatement()
])
)输出:
for (let i = 0; i < 3; i++) {
;
}创建变量定义
t.variableDeclaration(
'let', // 还支持 const 和 var
[
t.variableDeclarator(
t.identifier('b'), // 变量名
)
]
)
t.variableDeclaration(
'let', // 还支持 const 和 var
[
t.variableDeclarator(
t.identifier('b'), // 变量名
)
]
)
t.assignmentExpression(
'=',
t.identifier('b'),
t.numericLiteral(1)
)输出:
let a = 1;
let b;
b = 1创建定义函数
t.functionDeclaration(
t.identifier('add'), // 函数名
[t.identifier('a'), t.identifier('b')], // 参数
t.blockStatement([ // 函数体
t.variableDeclaration(// const sum = a + b
'const',
[
t.variableDeclarator(
t.identifier('sum'), // 变量名
t.binaryExpression('+', t.identifier('a'), t.identifier('b')) // a + b
),
]
),
t.returnStatement(t.identifier('sum')) // return sum
])
)输出:
function add(a, b) {
const sum = a + b;
return sum;
}创建箭头函数
const declarationArrowFun =
t.arrowFunctionExpression(
[t.identifier('a'), t.identifier('b')], // 参数
t.blockStatement([ // 函数体
t.variableDeclaration(// const sum = a + b
'const',
[
t.variableDeclarator(
t.identifier('sum'), // 变量名
t.binaryExpression('+', t.identifier('a'), t.identifier('b')) // a + b
),
]
),
t.returnStatement(t.identifier('sum')) // return sum
])
)
t.variableDeclaration(
'let', // 还支持 const 和 var
[
t.variableDeclarator(
t.identifier('add2'), // 变量名
declarationArrowFun
)
]
)输出:
function add(a, b) {
const sum = a + b;
return sum;
}
let add2 = (a, b) => {
const sum = a + b;
return sum;
};创建函数调用
t.callExpression(
t.identifier('add'),
[
t.numericLiteral(1),
t.numericLiteral(2)
]
)输出:
add(1, 2)本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录