for循环中函数对变量i的使用

在一些循环中需要对每个i执行操作，每次输出最后的数字，比如有5个li 会输出5

var list = document.querySelector("li");
for(var i = 0; i<list.length; i++){
    list[i].onmouseover = function(){
        console.log(i);  
    }
}

可以使用以下方法

var list = document.querySelector("li");

//第一个方法
for(var i = 0; i<list.length; i++){
    (function(index){  // 每次把i赋值给index 这样就可以正常获取鼠标移动触发的数字了
        list[index].onmouseover = function(){
             console.log(index);       
        }
    })(i)
}

//第二个方法
  for(var i = 0; i<list.length; i++){
        list[i].index = i;  //把i赋值到list[i]的index
        list[i].onmouseover = function(){
            console.log(this.index);
        }
  }
//第三个方法
for(var i = 0; i<list.length; i++){
        list[i].onmouseover  = (function(index){
            return function(){
                console.log(index);
            }
        })(i)
        
}

//第四个方法 使用es6的let 每次运算都是一个新的变量
for(let i = 0; i < list.length; i++){
    list[i].onmouseover = function(){
        console.log(i);
    }  
}