ES6 let和var的四个不同_es6 let与var的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/major_zhang/article/details/78847705

本文详细阐述了ES6中let关键字与传统var关键字在变量声明上的四大不同之处：作用域限制、变量提升、重复声明及for循环中的作用域表现，并通过示例代码进行了解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6 let和var的四个不同

01-作用域只局限于当前代码块
02-使用let声明的变量作用域不会被提升
03在相同的作用域下不能声明相同的变量
04-for循环体现let的父子作用域

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
<script>

    //let和const声明变量和常量 var

    //01-作用域只局限于当前代码块
/*    {
        var str = "张三";
        console.log(str);

        let str1 = "李四";
        console.log(str1);
    }
    //++++张三,str1 is not defined
    //let的作用域比var体现的更"明显"一些
    console.log("++++" + str)
    console.log("++++" + str1)*/
    //02-使用let声明的变量作用域不会被提升
/*    {

        console.log(str1) //undefined
        var str1 = "张三";

        //上面等同于
        var str1;
        console.log(str1); //undefined
        str1 = "张三"
    }*/
    //报错“str is not defined”
/*    {
        console.log(str)
        let str = "李四"
    }*/

    //03在相同的作用域下不能声明相同的变量
/*    {
        //不会报错,后面会覆盖前面的
        var str1 = "张三";
        var str1 = "李四";
        console.log(str1);
    }*/
/*    {
        //报错 "Identifier 'str2' has already been declared"
        let str2 = "张三";
        let str2 = "李四";
        console.log(str2）
    }*/
    //04-for循环体现let的父子作用域
//    var btns = document.querySelectorAll("button");
/*    for(var i = 0; i < btns.length; i++) {
        // 点击事件是异步,i
        btns[i].onclick = function () {
            alert("点击了第"+i+"个按钮");
        }
    }*/
    //传统解决思路,闭包
/*    for(var i = 0; i < btns.length; i++) {
        (function (i) {
            btns[i].onclick = function () {
                alert("点击了第"+i+"个按钮");
            }
        })(i);
    }*/
    //ES6中直接用let，因为有作用域的概念
/*    let btns = document.querySelectorAll("button");
    for(let i = 0; i < btns.length; i++) {
        // 点击事件是异步,i
        btns[i].onclick = function () {
            alert("点击了第"+i+"个按钮");
        }
    }*/

    //我们再测试一下
/*    for(var i = 0; i < 5;i++) {
        let i = 20;
        console.log(i);
    }*/

</script>
</body>
</html>