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的总数。