javascript - (无限？)JavaScript 代码中的循环

Question

我有以下 JavaScript 代码来在网站上“显示”XML:

function createChild(node,tabindex){

    var child = node.childNodes;

    var r = '';

    var tabs = '';

    for(i=0;i<tabindex;i++){

        tabs += "\t";

    };

    for(i=0;i<child.length;i++){

        if(child[i].nodeType == 1){

            r += tabs+"&lt;"+child[i].nodeName+"&gt;\n";

            if(child[i].hasChildNodes()){ r += createChild(child[i],1); }; // here is where it fails!

            r += tabs+"&lt;/"+child[i].nodeName+"&gt;\n";

        }

    }

    return r;

 };


function parseXML(xml){

    var doc = new DOMParser().parseFromString(xml,'application/xml');

    var node = doc.getElementsByTagName('*')[0];

    var r = '';

    r += "&lt;<span class=\"highlight highlight-blue\">"+node.nodeName+"</span>&gt;\n";

    if(node.hasChildNodes()){ r += createChild(node,1); };

    r += "&lt;<span class=\"highlight highlight-blue\">/"+node.nodeName+"</span>&gt;\n";

    $('.viewer').html(r);
};

这在 XML 上工作得很好，如下所示:

<properties>
    <property></property>
</properties>

但是当有多个 child 时，它就无法工作，如下所示:

<properties>
    <property>
        <value></value>
    </property>
</properties>

代码一直运行，直到我的浏览器崩溃。我认为其中存在无限循环，但我不确定。有人可以给我建议吗？

Answer 1

这就是为什么您应该始终声明变量:

// declare 'i'
for(var i = 0; i < tabindex ; i++){
  tabs += "\t";
};

如果不在函数作用域中声明 i，它将是全局的，从而干扰递归函数调用中的 for 循环:

1. 在第一个函数调用中，i 变量设置为 0。

2. 函数调用自身。

3. i 变量设置为 0。

4. 函数返回。

5. i 现在再次变为 0，因此第一帧中的循环将永远运行。

因此，在 createChild 函数中的某个位置，您必须在第一个循环之前或在第一个循环中声明 i。您还可以使用 let。