ES6 let 与 const 

<html>

<head>
    <title> ES6 let 与 const</title>
</head>

<body>




    <script>
        //1,作用域
        {   //全局变量
            var b = 4;
            //let 声明的是局部变量
            let a = 3;
            document.write("<hr>");
        }
        document.write(b);
        document.write("<hr>");
        //document.write(a); 
        // document.write(number);

        //2,let不能重复赋值不能重复声明：let 只能声明一次 var 可以声明多次:
        {
            let t = 1;
            // let t=2;
            var v = 0;
            var v = 9;
            document.write("let t=" + t + "|" + "var v=" + v);
        }
        document.write("<hr>");

        //3.for循环计数器 let 与 var 
        for (var i = 0; i < 10; i++) {
            setTimeout(function () {
                console.log(i);//var 声明的 i在这里输出一直是10
            })
        }
        console.log("--------------------------------分割线---------------------------------------------");
        for (let i = 0; i < 10; i++) {
            setTimeout(function () {
                console.log(i);//let 声明的 i在这里就开始计数啦
            })
        }
        document.write("<hr>");
        //4.不存在变量提升:let 不存在变量提升，var 会变量提升
        {
         //   console.log(e);//这里未声明变量e 在其下面声明赋值，此行会直接报错
            let e = 20;
            console.log("--------------------------------分割线---------------------------------------------");
            console.log(r);//这里直接显示undifinded 不会报错
            var r = 30;
        }
        document.write("<hr>");
        //5 const变量：const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。
        {
            //1. 基本用法
            const PI = "3.1415926";
            PI  // 3.1415926
    //        const MY_AGE;  // SyntaxError: Missing initializer in const declaration    直接报错
            //2.暂时性死区:ES6 明确规定，代码块内如果存在 let 或者 const，
            //代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。
             var test="测试";
             if(true){
              console.log(test);//此行报错
              const test="测试1";
             }

         }
  



    </script>
</body>

</html>

教程来源于：https://www.runoob.com/w3cnote/es6-tutorial.html

posted @ 2020-09-26 13:02  KwFruit  阅读(146)  评论(0)    收藏  举报