区分var、let、const ，用这一篇就够了

let、const是ES6新增的声明变量的关键字，之前声明变量的关键字是var

var

1、var声明的变量具有函数作用域或全局作用域

2、在同一作用域内允许使用

var

多次声明同一个变量，这可能会覆盖之前的声明

3、存在变量提升现象，即可以在声明之前使用变量，此时变量的值为

undefined

4、

可以在声明时不进行初始化，此时变量的值为

undefined

let

1、let

声明的变量具有块级作用域

2、let定义的变量不能重复

3、let不存在变量提升

4、let定义的变量如果在{ }中只能在{ }中调用

5、在循环语句中var定义的循环变量和使用let定义的循环变量，执行原理和执行效果不同。

const

1、const声明的变量具有块级作用域，声明常量并且一旦赋值后其值不能再被修改

2、const定义的变量如果在{ }中只能在{ }中调用

3、const 定义的变量存储的数据数值不能改变，也就是const定义的变量，不能重复赋值

4、不存在变量提升

代码演示

（1）let声明的变量提前调用报错

        // 提前调用 预解析
        console.log( a);
        // // 提前调用 结果是报错
        console.log( b );
 
 
        // var 定义的变量 
        var a = 100 ;
        let b = 200 ;

（2）const 和let 定义的变量不能重复

        // var 定义的变量 
        var int1 = 100 ;
        let int2 = 200 ;
 
        // 变量名称重复 重复赋值效果
        var int1 = '北京' ;
        console.log( int1 );
 
        // 变量名称重复 结果是  报错
        let int2 = '上海' ;

（3）const 和let 定义的变量 如果在{ } 中只能在 { } 中调用

        // 在 {} 中 使用 let 定义变量 只能在 { } 中 使用
        // 如果需要在 { } 中 对 let 定义的变量 进行操作 
        // 提前定义 变量 在 {} 中 进行赋值操作

        if( true ){
            var a = 300 ;
            let b = 400 ;
            // let 声明的变量 在 { } 中可以调用
            // 对 {} 外定义的变量 进行赋值操作

            console.log( b );  // 400
        }
 
        console.log( a ) ;  //300
 
        // let 声明的变量 在 { } 外 不能调用 
        console.log( b );  //报错

let和var声明的循环变量的区别

循环变量存储的数据数值

5.1 var声明的循环变量

在整个循环变量过程中只定义了一个循环变量i，每次循环都对这一个循环变量i进行重复赋值，也就是之后的循环变量数值会覆盖之前的循环变量数值，当循环结束后只有一个循环变量i，存储的是最终的循环变量数值。

5.2 let声明的循环变量

在整个循环过程中每次循环都相当于触发执行了一个{ }，每一个{ }对于let定义的变量就是一个独立的作用域，也就是每次循环let声明的循环变量都是一个人独立作用域中的循环变量，每一次循环中循环变量都会存储不同的数据数值，互相之间不会影响，不会覆盖，也就是每次循环let声明的循环变量都相当于是一个独立的变量，不会覆盖之前的数据数值。

代码演示：

 <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
    </ul>
 
    <script>
        // 给 li 绑定事件 点击 li标签 弹出 索引下标
 
        // 获取标签对象
        const oLis = document.querySelectorAll('ul>li');
 
        // 通过 for循环 给 li标签 绑定事件
        for( var i = 0 ; i <= oLis.length -1 ; i++ ){
            // i 是 索引下标 oLis[i] 是 li标签对象
            oLis[i].addEventListener( 'click' , function(){
                
                // 点击时输出索引下标
                console.log( `我是var循环的i ${i}` );
            })
        }
        for( let j = 0 ; j <= oLis.length -1 ; j++ ){
            // i 是 索引下标 oLis[i] 是 li标签对象
            oLis[j].addEventListener( 'click' , function(){
                
                // 点击时输出索引下标
                console.log( `我是let循环的i ${j}` );
            })
        }
 
    </script>

按顺序点击每一个li后的运行结果：

最后的最后，let和const都是ES6的新特性，let和const的出现是为了解决var的各种问题，强烈建议大家写JS代码都用let和const声明变量和常量。

如果本文对你有帮助，记得点个赞哦~