前端进阶js01----var和let的区别

weixin_43795761

已于 2023-08-08 22:18:33 修改

阅读量83

点赞数

文章标签：前端 javascript

于 2023-05-26 14:28:23 首次发布

本文链接：https://blog.csdn.net/weixin_43795761/article/details/130885032

版权

1.var可以多次声明相同名称的变量，如果用let多次声明会报错。
2.var是函数作用域和全局作用域，let是块级作用域。所以在for循环中推荐用let。
举例说明：

<body>
    <button class="btn">button1</button>
    <button class="btn">button2</button>
    <button class="btn">button3</button>
    <button class="btn">button4</button>

    <script>
        var btnEls = document.querySelectorAll('.btn');
        //onclick方法是异步的，var是全局的，
        //所以执行过程是：先走完循环，得到i=5（走完循环i应该等于5而不是4， 因先执行了一次i++,才判断5<4, 所以i=5）,接着执行点击，函数打印“按钮5发生了点击”
        for(var i=0; i<btnEls.length; i++){
           var btnEl = btnEls[i];
            console.log(btnEl);
            btnEl.onclick = function(){
                console.log(`按钮${i+1}发生了点击`);
            }
        }
    </script>
</body>

<body>
    <button class="btn">button1</button>
    <button class="btn">button2</button>
    <button class="btn">button3</button>
    <button class="btn">button4</button>

    <script>
        var btnEls = document.querySelectorAll('.btn');
          //用let let有作用域， 所以打印的值是正常的
          //它的每一个值都会单独存在一个独立的作用域中不会被覆盖掉。
        for(let i=0; i<btnEls.length; i++){
           var btnEl = btnEls[i];
            console.log(btnEl);
            btnEl.onclick = function(){
                console.log(`按钮${i+1}发生了点击`);
            }
        }
    </script>
</body>