关于循环中let的tips

for循环中的let关键字特点

看下如下代码以及结果：

	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        let divs = document.querySelectorAll("div");
        for(var i = 0;i<divs.length;i++){
            divs[i].addEventListener("click", function(){
                console.log(i);
            })
        }
    </script>

点击浏览器中的div标签，在控制台我们看到，无论点击哪个div都打印出div的总数4。

如果把for循环中的var改成let，结果就会如我们所愿：

		for(let i = 0;i<divs.length;i++){
            divs[i].addEventListener("click", function(){
                console.log(i);
            })
        }

点击某个div可以得到它对应的索引值。

原因：
那是因为let关键字有独立的块级作用域,会为每一次循环创建的独立变量，也就例子中是每次循环的i值都是独立且不一样的。
而var关键字是所有的循环都共享同个var声明的变量，比如例子中的i值，所以div每次触发点击事件都会打印出div的总数。