ES6 let和var的四个不同

来源：互联网发布：主升浪起爆点公式源码编辑：程序博客网时间：2024/06/10 07:50

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>

阅读全文

0 0