关于循环中let的tips

最新推荐文章于 2024-03-15 21:13:58 发布

原创最新推荐文章于 2024-03-15 21:13:58 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文探讨了JavaScript中let关键字在for循环中的应用，对比了var关键字的区别。当使用let时，每次循环都会创建独立的作用域，导致点击事件能够正确显示对应的索引值。而var则在所有循环中共享同一个变量，导致点击事件总是输出循环结束时的索引值。理解let的块级作用域对于编写可维护的JavaScript代码至关重要。

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