let案例说明

最新推荐文章于 2024-08-30 22:17:40 发布

黑夜问白天_

最新推荐文章于 2024-08-30 22:17:40 发布

阅读量119

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/l_0214/article/details/120807558

版权

本文探讨了JavaScript中let关键字的作用，包括它如何创建局部变量、防止全局变量污染、块级作用域以及关于重复声明和声明提升的特性。通过实例展示了let在for循环中的应用，以及var和let在不同作用域中的区别。

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

1. let声明的变量不会挂在window中，不会造成全局变量污染
2. 新增一个块级作用域
3. let不允许重复声明
4. let不会有声明提升（只是人为看到没有，但其实本身是由声明提升的，只是提升至暂时性死区中）

案例

<body>
    <style>
        .item {
            width: 300px;
            height: 150px;
            border: 1px solid red;
            margin: 0 auto;
            margin-top: 10px;
        }
    </style>

    <body>
        <div class="container">
            <h4 class="pattem"></h4>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <script>
            // 获取div元素内容
            let itmes = document.getElementsByClassName("item");

            // 遍历并绑定对象
            for (var i = 0; i < itmes.length; i++) {
                itmes[i].onclick = function() {
                    this.style.background = "pink"

                }
            }
        </script>
    </body>

现在没有任何的问题点击每个div可以实现添加背景颜色

当我们把this改成itmes[i]时，就报错了

 <script>
            // 获取div元素内容
            let itmes = document.getElementsByClassName("item");

            // 遍历并绑定对象
            for (var i = 0; i < itmes.length; i++) {
                itmes[i].onclick = function() {

                    itmes[i].style.background = "pink"

                }
            }
            console.log(window.i)
        </script>

我们输出i发现i的值是3，但是我们最大的下标值为2，找不到目标元素所以没办法改变目标元素。

当我们把var改成let就没有报错。

相当于在3个代码块里面声明了3个i，他们是互不影响的。当触发点击事件后这个程序运行，这个程序执行后发现当前在自己的函数作用域里面没有，向外层作用域寻找，i=0，所以点击第一个元素就有结果了。

黑夜问白天_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
let案例说明

1. let声明的变量不会挂在window中，不会造成全局变量污染2. 新增一个块级作用域3. let不允许重复声明4. let不会有声明提升（只是人为看到没有，但其实本身是由声明提升的，只是提升至暂时性死区中）案例<body> <style> .item { width: 300px; height: 150px; border: 1px solid red;
复制链接

扫一扫