javascript中循环嵌套导致的bug

自定义生成一个表单的多选框，循环一个选项表生成选项，循环另一个一个属性表生成选项的各类属性。无意中构成了一个循环的嵌套，每个循环的结构都类似这样：

for(i in a){
    操作语句;   
}

整个结构就类似这样：

a={'aa':'aaa','bb':'bbb','cc':'ccc','dd':'ddd'};
b={'ee':'eee','ff':'fff','gg':'ggg','hh':'hhh'};
for(i in a){
    for(i in b){
        console.log('i am b   '+ i);
    }
    console.log('i am a     '+i);
}

其实梳理过后可以很明显的发现参数设置有问题，内外两层循环共用了参数i，关键实际应用中都写成了函数，数据对象是传参过去的，所以相对隐蔽，查了很久才想到可能是参数重叠的问题。上面这个案例的输出如下，外循环中的i获取到了不属于它范围内的值：

i am b   ee
i am b   ff
i am b   gg
i am b   hh
i am a   hh
i am b   ee
i am b   ff
i am b   gg 
i am b   hh 
i am a   hh 

解决方案

虽然为不同循环重新设置不同的参数，问题似乎就迎刃而解了。

a={'aa':'aaa','bb':'bbb','cc':'ccc','dd':'ddd'};
b={'ee':'eee','ff':'fff','gg':'ggg','hh':'hhh'};
for(i in a){
    for(j in b){
        console.log('i am b   '+ j);
    }
    console.log('i am a     '+i);
}

实际上，还存在一个安全隐患，for循环中的i与j均未进行声明。对于函数内部未声明过的变量，如果给它赋值，会隐式的将它声明为全局变量。全局变量容易为其他的函数所修改或读取，导致所获得结果超出预期，所以写for循环，最好在参数前再加上一个var。

a={'aa':'aaa','bb':'bbb','cc':'ccc','dd':'ddd'};
b={'ee':'eee','ff':'fff','gg':'ggg','hh':'hhh'};
for(var i in a){
    for(var j in b){
        console.log('i am b   '+ j);
    }
    console.log('i am a     '+i);
}