循环语句中var与let声明循环变量的区别

最新推荐文章于 2024-09-11 15:33:18 发布

矜(bai)持(gei)的云拏

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量348

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_73687800/article/details/136759673

版权

文章详细比较了JavaScript中let和var在循环中的行为：var导致全局变量，每次循环结束后i会被覆盖；而let在每次循环中创建新的作用域，点击事件触发时显示各自独立的i值。

摘要由CSDN通过智能技术生成

循环语句中let与var声明循环变量的区别

html：

<ul>
        <li>i</li>
        <li>i</li>
        <li>i</li>
        <li>i</li>
</ul>

使用var：

var elements = document.getElementsByTagName('li');
for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {
        console.log(i);
        alert(i);
    };
}

结果：

点击任意li标签控制台都打印 4

使用let：

var elements = document.getElementsByTagName('li');
for (let i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {
        console.log(i);
        alert(i);
    };
}