假期里入门JS的一些感受（一个小坑）

假期里JS入门小结

无聊的假期结束了，浑浑噩噩的度过了寒假。假期里学习了一丢丢JS ，也遇到了一些坑，总结一下。

1、let 和 var
背景描述： 我定义了三个li，想利用for循环来完成每个li标签对应的鼠标事件。
理想结果：当鼠标移动到某一个li时，执行当前li标签的鼠标事件函数。

var oLi=document.getElementsByTagName('li');            for(var s=0;s<oLi.length;s++){                oLi[s].onmouseover= function(){                    alert(s);                    var btn = oLi[s].getElementsByTagName('button');                    btn[0].style.display="inline";                }                oLi[s].onmouseout= function(){                    var btn = oLi[s].getElementsByTagName('button');                    btn[0].style.display="none";                }            }

事实结果：并没有执行鼠标移动事件，检查代码，并没有错误，万不得已alert(s);结果发现 alert结果始终是3，不管鼠标在哪个li上面。

怎么解决的： let

var oLi=document.getElementsByTagName('li');            for(let s=0;s<oLi.length;s++){ //这里的var改成let                oLi[s].onmouseover= function(){                    alert(s);                    var btn = oLi[s].getElementsByTagName('button');                    btn[0].style.display="inline";                }                oLi[s].onmouseout= function(){                    var btn = oLi[s].getElementsByTagName('button');                    btn[0].style.display="none";                }            }

结果如我所愿。
可以实现，当鼠标移动到第一个li时，alert结果为0，当鼠标移动到第二个li时，alert结果为1，当鼠标移动到第三个li时，alert结果为2。功能实现。

重点内容：let 和var 的区别是什么呢？ 为什么let可以而var就可以呢？
简单的来说，let定义的是块级变量，而var 定义的是全局或者整个函数内的变量。也就是说两者定义的变量作用范围不同。

function varTest() {  var x = 1;  if (true) {    var x = 2;  // 同样的变量!    console.log(x);  // 2  }  console.log(x);  // 2}function letTest() {  let x = 1;  if (true) {    let x = 2;  // 不同的变量    console.log(x);  // 2  }  console.log(x);  // 1}

在不使用let的情况下，使用var可以吗？

当然可以，代码如下：

function btnshow(){        var itemLists=document.getElementsByTagName('li');        for(var s=0;s<itemLists.length;s++){            itemLists[s].index=s;//使用index属性获取当前li的index，将id名（建议定义class名）设置为b加上当前li的index值，便可实现功能。             itemLists[s].onmouseover=function(){                var str=            document.getElementById(str).style.display="inline";            }            }