javascript中，for循环做无作用遍历的意义是什么？
0
悬赏园豆：20
[已解决问题]
解决于 2017-01-03 16:57
文科女生刚开始自学前端，对于for循环套for循环很是迷惑，看到网上别人制作的年历，有个地方不理解，源代码是这样的：
for(i=0;i<aBtn.length;i++) { aBtn[i].index=i; aBtn[i].onmouseover=function () { for(i=0;i<aBtn.length;i++) { aBtn[i].className=''; } this.className='active'; oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>'; }; }我想问下最外面那个for循环遍历是什么意思？假如说我鼠标over到第3个，即i=2,那么里面那个onmouseover事件得到了执行，即所有的月份按钮的classname都清空，紧接着当前over的这个按钮的classname被设置成了active，然后下面的文本内容也转换了。可是外面还有个大的for循环，所以循环继续，i变成3，同时属性Index的值变成3,假如这时候我鼠标不over到任何月份按钮，下面的onmouseover事件就不会执行，所以直接跳到i++，i变成4，同样鼠标不over到任何月份按钮上，一直到i变成12.退出外面的for循环，程序结束。过了几秒我鼠标再次over到另外一个月份按钮上，那么同样的事情将被继续执行一遍。可是我就不明白外面的for循环做了那么多次循环的意义在哪里，我不知道这个外层for循环的作用是什么？还请前辈们解答
最佳答案
0
最外层的循环是用来给所有的aBtn绑定onmouseover事件用的，只执行一次。假设有3个按钮，即aBtn.length等于3，那么最外层的循环就给这3个按钮绑定了onmouseover事件。运行完这段代码后，实际上就变成了：
aBtn[0].onmouseover = function(){} aBtn[1].onmouseover = function(){} aBtn[2].onmouseover = function(){}
onmouseover只有鼠标移上去才会触发，在最外层for循环时是不触发的，所以不用考虑里面的i。当触发onmouseover时，外层的循环早已执行完了。或者换一种写法：
for(i=0;i<aBtn.length;i++) { aBtn[i].index=i; aBtn[i].onmouseover=function () { for(var j=0;j<aBtn.length;j++) { aBtn[j].className=''; } this.className='active'; oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>'; }; }
把内层循环的变量i换成j就好理解了。
收获园豆：20
谢谢前辈的解答，那意思是外层for循环不受里面onmouseover事件的影响吗？按照我有限的知识理解，for循环也好，什么流程控制语句也好，是不能自己就自发执行的，必须要有外部比如事件触发，或者调用才能执行。因为我目前看到的例子是都是这样的。可是这个代码段外面的for循环没有任何外部触发事件或者调用，怎么自己就执行了一遍呢？除了里面的index需要用到外面的i的值，而且外层执行情况跟里层会有什么逻辑联系？现在我看了您的解答，等到over到某一个按钮的时候，外层for早就都执行完了，那个i的值早就变成length长度而结束了，那怎么产生联系啊
@kiravalerie: 不管这段代码放在哪一行，当浏览器解析到那一行时这段代码就会执行。比如在页面中加入
for(var i = 0; i < 3; i++) { alert(i); }
运行结果依次弹出0~2。onmouseover只是把事件注册上，告诉浏览器它准备响应你的鼠标事件，但实际上你没动鼠标，所以里面的代码暂时不会执行直到你把鼠标移动到目标元素上。外层循环执行完了以后，为3个按钮注册了3个onmouseover事件，准备响应你的操作，同时这3个按钮还多了以下属性：
aBtn[0].index = 0; aBtn[1].index = 1; aBtn[2].index = 2;
到这里外层循环的作用就完成了(在内循环访问index是直接得到它们的值0、1、2而不是再去读取i)，当触发onmouseover事件时，外层循环早已结束，跟i变量也没有什么关系了。所以上面的代码在内层循环可以用变量j来代替i，就是表示内层循环的i和外层的i没有关系。但j的值也是从0到2，所以取到的仍然是aBtn[0],aBtn[1],aBtn[2]，它们的index值也是从0到2。
不知道描述得是否清晰，因为我也是个初学者，不是什么前辈。
@逐影: 非常谢谢您的解答，我好像理解了，我有一段时间没有登录博客园了，刚刚才看到，非常感谢
其他回答(3)
0
理解下闭包
谢谢您的回复，最近刚开始接触闭包，感觉是个理解难点呢
大神，不过我还是有点好奇这个代码块怎么跟闭包联系上了，我目前理解的闭包是在函数里嵌套了一个函数，或者说是函数的返回值是一个函数。可是这个没有嵌套一个函数啊
0
for(i=0;i<aBtn.length;i++)
{//遍历每一个按钮
aBtn[i].index=i;//给每一个按钮设置索引，以便操作的时候知道这是第几个按钮
aBtn[i].onmouseover=function ()//给每个按钮添加鼠标经过事件
{
for(i=0;i<aBtn.length;i++)
{//先取消所有按钮的鼠标悬停的样式
aBtn[i].className='';
}
this.className='active';//给当前按钮添加鼠标悬停的样式
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>';//通过this.index得到当前点击的按钮的索引值，以便显示跟这个按钮相关的内容。
};
}
谢谢您的解答，非常感谢
@kiravalerie: 。。真是努力
0
当我看到"文科女生"四个字的时候，我相信问题一定能解决的。。
另外，你说的那个外层for循环为啥会执行，我感觉是你那个for循序没放function里面吧，如果是直接:
<script>
for(){}
<script>
而不是
<script>
function me(){
for(){}
}
</script>
那直接就执行了。
感谢回复，不过我好像没懂你在说什么(⊙o⊙)…
@kiravalerie: (⊙*⊙)…
