如何编写解析器来为表达式a.b[c.d][e].f[g[h[i.j]]]构造JavaScript AST MemberE

Question

遵循"如何将a.b[c.d][e].f[g[h[i.j]]]清晰地表示为对象树？"？，您将如何编写一个算法来从表达式a.b[c.d][e].f[g[h[i.j]]]生成JS AST？我正试图编写一个解析器，从这个表达式中生成某种对象结构(理想情况下比JS ASTMemberExpression更直观，因此还有另一个问题(。我想看看算法是如何构建JavaScriptMemberExpression树的。

目前，我有这种算法来生成某种树(但目前似乎不正确(：

const patterns = [
[/^[a-z][a-z0-9]*(?:-[a-z0-9]+)*/, 'name'],
[/^[/, 'open'],
[/^]/, 'close'],
[/^./, 'stem']
]
console.log(parsePath('a.b[c.d][e].f[g[h[i.j]]]'))
function parsePath(str) {
let node
let nest = []
let result = nest
let stack = [nest]
while (str.length) {
nest = stack[stack.length - 1]
p:
for (let pattern of patterns) {
let match = str.match(pattern[0])
if (match) {
if (pattern[1] === 'name') {
node = {
form: `term`,
name: match[0],
link: []
}
nest.push(node)
} else if (pattern[1] === 'stem') {
stack.push(node.link)
} else if (pattern[1] === 'open') {
node = {
form: 'read',
link: []
}
nest.push(node)
stack.push(node.link)
} else if (pattern[1] === 'close') {
stack.pop()
}
str = str.substr(match[0].length)
break p
}
}
}
return result[0]
}

想要的结果是这样的(或者如果你很想创建一个更好、更直观的数据结构(：

{
"type": "MemberExpression",
"object": {
"type": "MemberExpression",
"object": {
"type": "MemberExpression",
"object": {
"type": "MemberExpression",
"object": {
"type": "MemberExpression",
"object": {
"type": "Identifier",
"name": "a"
},
"property": {
"type": "Identifier",
"name": "b"
},
"computed": false
},
"property": {
"type": "MemberExpression",
"object": {
"type": "Identifier",
"name": "c"
},
"property": {
"type": "Identifier",
"name": "d"
},
"computed": false
},
"computed": true
},
"property": {
"type": "Identifier",
"name": "e"
},
"computed": true
},
"property": {
"type": "Identifier",
"name": "f"
},
"computed": false
},
"property": {
"type": "MemberExpression",
"object": {
"type": "Identifier",
"name": "g"
},
"property": {
"type": "MemberExpression",
"object": {
"type": "Identifier",
"name": "h"
},
"property": {
"type": "MemberExpression",
"object": {
"type": "Identifier",
"name": "i"
},
"property": {
"type": "Identifier",
"name": "j"
},
"computed": false
},
"computed": true
},
"computed": true
},
"computed": true
}

我之所以挣扎(部分(是因为我不喜欢这种MemberExpression树结构，它给人的感觉很落后，不太直观。因此，如果你能构建一个更简单、更直接的数据结构，这将是理想的(这是另一个问题(，但如果不能，那么仅仅是一个构建算法就能让我继续前进。

就我个人而言，我宁愿尝试生成这种结构，因为我发现它更直观：

{
type: 'site',
site: [
{
type: 'term',
term: 'a'
},
{
type: 'term',
term: 'b'
},
{
type: 'sink',
sink: [
{
type: 'term',
term: 'c'
},
{
type: 'term',
term: 'd'
}
]
},
{
type: 'sink',
sink: [
{
type: 'term',
term: 'e'
}
]
},
{
type: 'term',
term: 'f'
},
{
type: 'sink',
sink: [
{
type: 'term',
term: 'g'
},
{
type: 'sink',
sink: [
{
type: 'term',
term: 'h'
},
{
type: 'sink',
sink: [
{
type: 'term',
term: 'i'
},
{
type: 'term',
term: 'j'
}
]
}
]
}
]
}
]
}

但任何一个对我都有效(或者两者都有效(。

如果我们使用第二个，我的下一个问题将是如何将该数据结构转换为MemberExpression树/数据结构：(但我会先尝试自己做。因此，在这个问题中构造MemberExpression可能更好，然后我可以解决这个问题。

Answer 1

1. 将字符串分成一组对象和第一级属性，如

   [
   "a",
   "b",
   "[c.d]",
   "[e]",
   "f",
   "[g[h[i.j]]]"
   ]
   

2. 获取对象

   1. 将最后一项作为属性
   2. 检查该属性是否以括号开头，然后将computed设置为true，并从周围的括号中删除该属性
   3. 返回一个对象
      • CCD_ 8
      • CCD_ 9与对象(2.(
      • CCD_ 10与调用主函数CCD_
      • computed

function getAST(string) {
function getObject(parts) {
if (parts.length === 1) return { type: "Identifier", name: parts[0] };
let property = parts.pop(),
computed = false;
if (property.startsWith('[')) {
computed = true;
property = property.slice(1, -1);
}
return {
type: "MemberExpression",
object: getObject(parts),
property: getAST(property),
computed
};
}
let i = 0,
dot,
bracket,
parts = [];
while (i < string.length) {
dot = string.indexOf('.', i);
bracket = string.indexOf('[', i);
if (dot !== -1 && (bracket === -1 || dot < bracket)) {
const temp = string.slice(i, dot);
if (temp) parts.push(temp);
i = dot + 1;
continue;
}
if (bracket !== -1 && (dot === -1 || bracket < dot)) {
const temp = string.slice(i, bracket);
if (temp) parts.push(temp);
i = bracket;
let open = 1,
j = i;
while (++j < string.length) {
if (string[j] === '[') open++;
if (string[j] === ']') open--;
if (!open) break;
}
j++;
parts.push(string.slice(i, j));
i = j;
continue;
}
parts.push(string.slice(i));
break;
}
return getObject(parts);
}
console.log(getAST('a.b[c.d][e].f[g[h[i.j]]]'));

.as-console-wrapper { max-height: 100% !important; top: 0; }