Javascript:在函数内调用函数并覆盖变量

Question

我有一个 JavaScript 数组，可以按照我想要的深度排列:

 var steps = [
    { "step_id" : "1", "step_name" : "Step 1", "children" : 
        [ 
            { "step_id" : "4", "step_name" : "Step 4", "children" : 
                [ 
                    { "step_id" : "6", "step_name" : "Step 6" }
                ] 
             },
            { "step_id" : "5", "step_name" : "Step 5" } 
        ] 
    }, 
    { "step_id" : "2", "step_name" : "Step 2" }, 
    { "step_id" : "3", "step_name" : "Step 3" }
];

然后我想在选择下拉框中显示每个步骤。对于每个子步骤，我想缩进它。这是我的 JS

 function stepsChildren(children, count) {
    var new_count = count + 1;
    var selection_values_children = '';
    for(j=0;j<children.length;j++) {
        selection_values_children += '<option value="' + children[j].step_id + '">';
        for(x=1;x<=count;x++) {
            selection_values_children +='&nbsp;&nbsp;&nbsp;';
        }
        selection_values_children += children[j].step_name + '</option>';
        if (typeof(children[j].children) != 'undefined')
            selection_values_children += stepsChildren(children[j].children, new_count);
    }
    return selection_values_children;
}

var selection_values = '';
for(i=0;i<steps.length;i++) {
    selection_values += '<option value="' + steps[i].step_id + '">' + steps[i].step_name + '</option>';
    if (typeof(steps[i].children) != 'undefined')
        selection_values += stepsChildren(steps[i].children, 1);
}

document.write('<select>' + selection_values + '</select>');

这几乎可以工作，但是在 stepsChildren() 函数中，j 变量每次调用它时都会被覆盖。这几乎就像将 j 设置为全局变量。

我说得有道理吗？

如果没有，我已经整理了一个示例供您查看:http://jsfiddle.net/CJbnm/

如果您运行代码并查看右侧的选择框，请注意数组中的第 5 步是如何缺失的？

这是因为第 4 步只有一个子函数将父函数的 j 变量更新为 1 而不是 2，并且不再显示任何结果...

Answer 1

如果您不使用 var 创建变量关键字它将是全局的，您将得到您所描述的行为。在 javascript 中我总是使用 for循环如 for(var i=0;i<10;i++)因为当使用循环时，我几乎从不打算将循环变量设置为全局变量。我相信这就是你的问题。