let 和const

浅浅的花香味﹌ 2022-01-21 09:53 253阅读 0赞

<!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>