AST进阶篇|一个小例子带你搞懂 enter 和 exit 的区别

╰+哭是因爲堅強的太久メ 2022-09-10 14:13 41阅读 0赞

假设我们需要处理的代码如下:

var a = 'a' + 'b' + 'c' + d + 'e' + 'f';

想要对上面的 代码 进行**字符串的合并操作**，遍历 BinaryExpression类型，代码如下:

const visitor = {
    "BinaryExpression"(path)
      {
        console.log(path.toString())
        const {confident,value} = path.evaluate();
        confident && path.replaceWith(types.valueToNode(value));
      },
    }

我们知道，当没有指明以什么方式进行遍历时，会**默认以enter方式进行遍历**，上面的插件运行结果如下:

![926d6d483fae3bd2fb6e1e8a13a741f9.png][]

最后处理后的代码变成了这样:

var a = "abc" + d + 'e' + 'f';

我们在插件的第一行打印出了当前所遍历path的源代码，可以看到①②③④是按顺序进行遍历的，是逐渐向底部进行遍历，直到无法遍历。可以将上面的代码略微的调整下:

var a = 'a' + 'b' + 'c' + 'd' + 'e' + 'f';

再次运行上面的插件，打印的结果如下:

![d3102a13a254867be68795ff5489316a.png][]

这一次为什么只遍历了一次呢？那是因为第一次遍历后，结果变成了一个 **StringLiteral** 类型的表达式，

var a = 'abcdef';

已不再是 **BinaryExpression** 类型，因此不会再次遍历。甚至可以将path的left节点和right节点分别打印出来看看效果:

结果不在本文中阐释，请自行观察分析。

当指明**以exit方式进行遍历时**，插件及部分代码如下:

let sourceCode = "var a = 'a' + 'b' + 'c' + d + 'e' + 'f';";
    let ast    = parser.parse(sourceCode);
    
    
    const visitor = {
        "BinaryExpression": {
            exit: function(path) {
                console.log(path.toString())
                const {confident, value} = path.evaluate();
                confident && path.replaceWith(types.valueToNode(value));
            }
        },
    }
    
    
    traverse(ast, visitor);

运行上面的代码，看看效果:

![7431e738d06cf862e014a54f51cf02a9.png][]

很明显和上面enter方式遍历的顺序不一样，大致分析如下:

1.  left : 'a'; right:'b' ---> 结果合并为'ab'。  
    
2.  left : 'ab'; right:'c' ---> 结果合并为'abc'。
3.  left : 'abc'; right:d ---> 结果没法合并，但他们已经成为一个整体 'acb' + d
4.  left : 'abc'+d; right:'e' ---> 结果没法合并，但他们已经成为一个整体 'acb' + d + 'e';
5.  left : 'abc'+d + 'e'; right:'f' ---> 结果没法合并，但他们已经成为一个整体 'acb' + d + 'e' + 'f';
6.  不再是**BinaryExpression** 类型，停止遍历。

上面的left和right表示**BinaryExpression** 类型的左右子节点。

我画了个示意图，大家可以看看:

![fa145d0c41e81b122684467dea1770f1.png][]

相信聪明的你通过这篇文章已经搞懂了 enter 和 exit 遍历的区别。

感谢阅读，欢迎关注微信公众号:

[926d6d483fae3bd2fb6e1e8a13a741f9.png]: /images/20220829/7c3daf71930947fbac30be4d55b2d418.png
[d3102a13a254867be68795ff5489316a.png]: /images/20220829/ebfffee7ad4b44bc9c2dce9c38ad9f01.png
[7431e738d06cf862e014a54f51cf02a9.png]: /images/20220829/1c2568c7e4774228b05c72a79810fc56.png
[fa145d0c41e81b122684467dea1770f1.png]: /images/20220829/c1bb6e96c7cb4801b76e23ff6455f784.png