谷粒商城21- 前端基础 es6 let&const

Myth丶恋晨 2023-03-04 06:47 106阅读 0赞

### let&const ###

let具有作用域的代码示例.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <script> //var 声明的变量往往会越域 //let声明的变量有严格的作用域 { //此处为代码块 var a = 1; let b = 2; } console.log(a); console.log(b); </script>
    
    </body>
    </html>

代码写完后, 右键  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
控制台打印如下, 可以看到1 成功打印, 而b说未定义, 说明了let是有严格 的作用域的.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
let只能声明一次示例  
此 代码能正常运行, var可以声明多次, 以最后一次为准

//var可以声明同一变量多次
            //let 只能声明一次
            var m =1 ;
            var m =2 ;
    
            let n=3 ;
            console.log(m);
            console.log(n);

![20200801205950640.png][]  
如下的代码

let n=3 ;
            let n=2 ;
            console.log(m);
            console.log(n);

报错如下, n已经被定义. 说明let定义的变量, 只能声明一次.  
![20200801210012507.png][]  
变量提升

//var 会变量提升
            //let 不存在变量提升
            console.log(x);
            var x =10;
    
            console.log(y);
            let y = 20 ;

运行结果如下.  
![20200801210050691.png][]  
关于js的变量提升, 可以看看下面这篇文章  
https://blog.csdn.net/qq\_39712029/article/details/80951958  
变量提升 就是声明到一个变量所在作用域的顶端去执行, 但只是声明,未赋值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
const 声明变量后 ,不允许改变. 并且一旦声明后,必须初始化, 否则报错.

//const 声明变量后 ,不允许改变. 并且一旦声明后,必须初始化, 否则报错. 
    
            const a = 1;
            a = 3 ;

报错如下,  
![20200801210210470.png][]  
如下的代码也报错, 未初始化.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/ffb7043f1ae140babf3bfc566a8af8d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/948c071d40b24a808bf3bd40c960e20a.png
[20200801205950640.png]: /images/20230208/bdbad1fd34504a9e856f4bf3c1319be5.png
[20200801210012507.png]: /images/20230208/256156d92cd34b1ea5d6d038f09a1bcf.png
[20200801210050691.png]: /images/20230208/5342cc7a96074a28a3305d02109b39a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/78a062f96f60481a8cd224b060731b76.png
[20200801210210470.png]: /images/20230208/36b8e9750daa49e1abf21f530f1f6b27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20230208/2917d426cfb34a8ea1f3d832a185a0d0.png