从ForInStatement到ForStatement的codemod

时间:2016-06-01 20:13:23

标签: javascript abstract-syntax-tree jscodeshift

我有一个我想要转换的codemod

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时提供帮助。哦,菲利克斯,你们这是一个很好的工具!

1 个答案:

答案 0 :(得分:3)

直接创建AST节点确实很冗长。但是,jscodeshift会导出一些帮助&#34;方法&#34;允许您从字符串生成AST节点,并允许您插入现有的AST节点(标记模板ftw!)。

您的上述示例可以简化为:

  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

请注意,这些模板方法(expressionstatementstatements)有其局限性(您只能插入可以放置标识符的AST节点)。

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

enter image description here

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