我想问一下for程序的执行和鼠标移入的顺序具体是怎么样的，let和var的是不是我注释中理解的顺序？
来源：3-13 编程练习
城诗
2024-03-18 23:48:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jquery</li>
<li>HTML5</li>
<li>CSS3</li>
<li>ES6</li>
</ul>
<script type="text/javascript">
//补充代码
var li=document.getElementsByTagName('li');
for(let i=0;i<li.length;i++){
//如果是用var定义i的话，最后i的值是8，那是在鼠标进入区域之后for再执行这段程序8次后，全局变量i的值才变为8吗？还是说在鼠标没进入之前，程序就已经执行了，函数作用域直接向外获取的i的值为8？
//这里是let定义的话，是不是把i的值储存在每个不同的块级作用域，那是鼠标移入之前就存储每个块级作用域i的值，还是说鼠标移入之后才开始执行这段程序？
//如果每次鼠标移动到新的区域是都会执行一次for循环，每次是都要运行8次还是说直到匹配到当前i的项后就输出不向后继续运行了呢？
let arr=li[i].innerHTML;
li[i].style.cursor='pointer';
li[i].addEventListener('mouseenter',function(){
this.style.color='red';
this.style.fontSize='20px';
this.innerHTML=arr+'我是第'+(i+1)+'个';
},false);
li[i].addEventListener('mouseleave',function(){
this.style.color='';
this.style.fontSize='';
this.innerHTML=arr;
},false)
}
</script>
</body>
</html>1回答
-
好帮手慕小李
2024-03-19
同学你好，解答如下：
1、//如果是用var定义i的话，最后i的值是8，那是在鼠标进入区域之后for再执行这段程序8次后，全局变量i的值才变为8吗？还是说在鼠标没进入之前，程序就已经执行了，函数作用域直接向外获取的i的值为8？
答：如果使用var关键字去定义i的话，程序会在页面加载时就将程序逻辑走一遍，届时i就已经走完。这里要注意一点var
与let定义变量是有区别的，let会有作用域的概念在其中。这里之前有个小知识点，在之前的课程中我们使用var去声明for循环中的i同学是否还记得老师使用过匿名空间或是先将i进行存储在使用的情况，那么这里就是说如果使用for循环，且循环体中有函数的情况下，var声明的i是没有“记录功能的”这里说到的没有记录功能是指程序实际上已经走完了，但是没有被记录下来，所以在程序走完了以后程序就被释放完了，只会记录最后一步。
2、//这里是let定义的话，是不是把i的值储存在每个不同的块级作用域，那是鼠标移入之前就存储每个块级作用域i的值，还是说鼠标移入之后才开始执行这段程序？
答：结合1继续看，let具有块级作用域的加持，那么在页面加载完成后-->程序走完了以后系统并不会直接释放它而是“将它记录下来了”所以当页面加载完成后for循环end之后我们在进行点击i还会弹出当时的i的“记录”
3、//如果每次鼠标移动到新的区域是都会执行一次for循环，每次是都要运行8次还是说直到匹配到当前i的项后就输出不向后继续运行了呢？
答：这里思路不对，只有在页面加载时才会将循环全部走一遍，之后鼠标操作时并不是再循环八次，这里同学要注意，for循环包含方法，而不是方法包含for循环（很重要）如果是事件包裹for循环才会出现循环多少次的问题。
祝学习愉快！
0
相似问题