let 和const-蒲公英云

let 和const

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var price = 100;
        var price = 200;
        let count = 10;
        //let count = 10;
        /*
        let不允许在相同作用域内，重复声明同一个变量。
        这样写的好处是：当你和同事同时声明相同的变量名的时候，用es5提供的var，后面的变量会覆盖前面相同名字的变量
        例如上面的price；所以用let
        */
        let discount = 20;
        const key = 'abc123';
        console.log('price=' + price)//200;
        /*
        let声明的变量是可以直接重新赋值的;
        */
        let count1 = 10;
        count1 = 11;
        console.log('count1=' + count1);//11
        /*
      const声明的变量是不能直接重新赋值的,只能通过间接的方式是给const去赋值；
      */
        const key1 = {
            name: 'xyz',
            age: 21
        }
        // console.log('key1=' + key1)//疑问为什么这种形式打印key1返回的是key1=[object Object]
        console.log(key1)//这才是想要的：{name: "xyz", age: 21}
        //间接改变const声明的变量值（改变里面的属性值）
        key1.age = 22;
        console.log(key1)//{name: "xyz", age: 22}
        //注意你如果连属性值都不想被改变，就用js的Object.freeze()方法
        const key2 = Object.freeze(key1);
        key2.age = 23;
        console.log(key2);//{name: "xyz", age: 22}
        /*
        window里面有个name属性是空字符串；
        不改变 window里面的name属性
        */
        // ES5的做法
        (
            function () {
                var name = 'xyz';
                console.log(name);//xyz
            }
        )();
        // ES6的做法
        {
            let name = 'xyz';
            // const name='xyz';
            console.log(name) //xyz
        }
        /*
        举个例子来证明var 和let 的具体区别:
        如果你想进行ajax请求数组里面一一对应的数据用var肯定是不行的，
        需要用let
        */
        for (var i = 0; i < 10; i++) {//此时的i是全局变量
            console.log(i);
            setTimeout(function(){//模拟ajax请求过来的数据
                console.log(`i:${i}`)//10个i:10
            },1000)
        }
        console.log(`${i}我是全局变量`);
        for (let j = 0; j < 10; j++) {
            console.log(j);
            setTimeout(function(){//模拟ajax请求过来的数据
                console.log(`j:${j}`)//j:0  j:1  j:2 ... j:9
            },1000)
        }
        /*
        var变量提升；
        let 和const 临时性死区
        */
        console.log(color);//undefined
        var color='yellow';
        console.log(color1);
        /*
        let也是存在变量提升的，但是在这个变量（color1）声明之前，
        是存在着临时性死区的，所以下面不管是let还是const都会报错。
        */
        let color1='yellow';//Uncaught ReferenceError: color1 is not defined
        // const color1='yellow';//Uncaught ReferenceError: color1 is not defined
       /*
       什么时候使用： let  const var？
       如果你的值会被重新更新，定义，请使用：let；
       一个变量不想再被重新定义，请使用：const
       ES6中最好别在用var（以前的技术了，要跟上时代呀！）
       */
    </script>
</body>
</html>