javascript - codemod 从 ForInStatement 到 ForStatement

Question

我有一个我想要转换的代码模块

for (var key in foo){}

进入

for (var keys = 0; key < foo; key++){}

到目前为止我做到了:

return j(file.source)
    .find(j.ForInStatement)
    .replaceWith(p => {

        var prop = p.node.left.declarations[0].id;

        var v = [j.variableDeclarator(prop, null)];
        var varDec = j.variableDeclaration('var', v);
        var binary = j.binaryExpression('<', prop, j.identifier('foo'));
        var uE = j.updateExpression('++', prop, false);
        var block = j.blockStatement([]);

        var forIn = j.forStatement(varDec, binary, uE, block);
        return forIn;
    })
    .toSource();

和that brought me this far :

for (var key; key < foo; key++)
  {}

我仍然对从头开始创建东西感到有点迷失......

问题:

• 我这样做正确吗？感觉很冗长，但也许这是正确的方法。
• 如何完成？我缺少例如 foo.length...

PS: Felix ，如果您正在阅读本文，请指出我可以在哪里发送拉取请求以改进文档!我很乐意在我尝试学习此 API 时提供帮助。哦，还有菲利克斯，你们制作的工具真是太棒了!

Answer 1

直接创建 AST 节点确实很冗长。然而，jscodeshift 导出了一些帮助器“方法”，允许您从字符串生成 AST 节点，并让您插入现有的 AST 节点(带标签的模板!)。

上面的例子可以简化为:

  return j(file.source)
    .find(j.ForInStatement)
    .replaceWith(p => {
      var prop = p.node.left.declarations[0].id;
      return statement`for (var ${prop} = 0; ${prop} < foo.length; ${prop}++) ${p.node.body}`;
    })
    .toSource();

DEMO

请注意，这些模板方法(表达式、语句、语句)有其局限性(您只能在可以插入的地方插入 AST 节点)输入标识符)。

<小时/>

如果您想手动创建 foo.length，则必须创建 MemberExpression:

j.memberExpression(
  prop,
  j.identifier('length')
);