前端基础ES6 let const

你的名字 2023-02-21 06:12 13阅读 0赞

### let ###

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>

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

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

![20200628225238442.png][]

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

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

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

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

### const ###

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

const a = 1;
            a = 3 ;

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

[20200628225210612.png]: https://img-blog.csdnimg.cn/20200628225210612.png
[20200628225238442.png]: https://img-blog.csdnimg.cn/20200628225238442.png
[20200628225314336.png]: https://img-blog.csdnimg.cn/20200628225314336.png
[20200628225354561.png]: https://img-blog.csdnimg.cn/20200628225354561.png
[20200628225515706.png]: https://img-blog.csdnimg.cn/20200628225515706.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200628225527641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5,size_16,color_FFFFFF,t_70