在for循环中var和let的区别

时间:2019-03-25
本文章向大家介绍在for循环中var和let的区别,主要包括在for循环中var和let的区别使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

当我们中在for循环中使用var或者let为四个按钮绑定点击事件时,你会发现一个现象打个比方 现在有四个按钮

我们使用for来绑定事件 首先我们使用var来修饰变量

<body>
    <button>0</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
</body>

 
        var btn = document.querySelectorAll("button");
        for(var i=0;i<btn.length;i++){
            btn[i].addEventListener("click",function(){
                console.log("you click ["+i+"]");
            });
        }

当我们绑定一个点击事件时 你点击每个按钮输出时,你会发现输出的都是 you click [4]

 

而当我们使用let来修饰变量时 你会发现不同


        var btn = document.querySelectorAll("button");
        for(let i=0;i<btn.length;i++){
            btn[i].addEventListener("click",function(){
                console.log("you click ["+i+"]");
            });
        }

这样我们点击四个按钮时 将会分别输出  you click [0]    you click [1]   you click [2]   you click [3]

 

 

现在来讲讲这是为什么 因为当我们使用var在for中修饰变量时 它其实是一个全局的变量 而我们知道 在全局作用域中全局变量只能有一个,不能出现多个相同的全局变量 就算有也会被覆盖 这也就是说当我们在for中使用var修饰变量时它其实绑定事件时是在不断的修改和覆盖,

当i等于0时 绑定的事件中的i指向的是0 、
btn[0].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i为0
})

当i等于1时 绑定事件中的的i全都指向1

btn[0].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 1
})

btn[1].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 1
})

当i等于2时 绑定事件中的的i全都指向2

btn[0].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 2
})

btn[1].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 2
})

btn[2].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 2
})

以此类推

那为什么会输出4呢 ,因为在for执行到3时会跳出循环 ,但因为是i++,所以最后跳出循环后i还会在运行一次,变成4

由于是用var声明的,也就是说它是全局的,所以在for中无论你声明了多少个i,它都会被最后一个所覆盖

 

 

 

现在在来说说let ,在for中使用let时,其实每一轮声明的都是一个新的let,它不会被覆盖,而是会创建一个新的变量来使用

如下

当i等于0时
btn[0].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i为0
})

当i等于1时 

btn[0].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 0
})

btn[1].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 1
})

当i等于2时 

btn[0].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 0
})

btn[1].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 1
})

btn[2].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 2
})

当i等于3时

btn[0].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 0
})

btn[1].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 1
})

btn[2].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 2
})

btn[2].addEventListener("click",fun(){
    console.log("you click ["+i+"]")//---->此时i指向 3
})

以此类推

这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。由于使用的是let,所以当前i只在本轮循环有效,下一轮循环它又是一个新的i,所以使用let时它是不会被覆盖的