【var 、let和const的区别】 前端 es6 javascript

var定义变量 和let、const区别在哪？

let和var都是定义可以改变值的变量，而const定义的是不可改变值的常量

      const http = "www.baidu.com" //无法更改值
        http = 123 // 报错 ：赋值给了常数变量
        console.log(http)

区别1：let和const新增了块级作用域  {}，let和const定义的变量写在{}中，就只会在{}中生效，而var 没有块级作用域，只有全局和局部作用域（定义在函数中）

       {
            var dd=78;
            let a = 10;
            const ss = 20;
            console.log(a, ss)//10 20
        }
        console.log(a)//报错  没有找到
        // console.log(ss)//报错  没有找到
        console.log(dd)//78

                深度理解let和const的块级作用域

  案例代码：

          点击页面中不同的li输出n值比较let和var作用域的区别

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

let lis = document.getElementsByTagName("li")
            // for(let n=0;n<lis.length;n++){
            //     lis[n].onclick=function(){
            //         console.log(n)//点击第一个li控制台输出0，
           //点击第二个li控制台输出1，点击第三个li控制台输出2
            //     }
            // }
/*这里let定义的是在{}中的局部变量，
每一次的循环都会产生新的局部变量n和块级作用域{}，
这几个n之间互不干扰，拥有各自的的块级作用域，保存了不同的值
每一个n都被单独保存下来，所以点击不同的li就会输出不同的n值*/


        for (var n = 0; n < lis.length; n++) {
            lis[n].onclick = function() {
                console.log(n) 
//不管点击哪一个li，控制台都只会输出3
//因为循环中var定义的是全局变量，n的值在循环中修改，
//覆盖了之前的值，n最后的值为循环结束后的值，n=3

            }
        }

 区别2：var 定义变量 存在变量的默认提升功能 ，let 和const没有

        // console.log(x)//undifined
        // var x=2
        console.log(x)//报错： 在初始化之前无法访问“x”
        let x = 2

 区别3: var 定义可以重复定义 ，let和const不可以

  // var x=2
        // var x=3
        // console.log(x)//3 var重复定义变量会覆盖之前的值
        let x = 2
        let x = 3 //报错 x已经声明过
        console.log(x)

区别四：var 定义变量 自动挂载 window对象上 。let和const不会

      // var x=2  //相当于window.x=2
        // console.log(window.x) //2
        let x = 2
        console.log(window.x) //undefined

区别五：let 存在暂时性死区问题

        ES6明确规定，如果​区块​中存在​let​和​const​命令，这个区块对这些命令声明的变量，从一开始就形成了​封闭作用域​。凡是在声明​之前​就使用这些变量​就会报错​。

总之，在代码块内使用​let​命令声明变量之前，该变量都是不可用的。

这在语法上，称为“​暂时性死区”​（temporal dead zone，简称 TDZ）。

      var a = 20
        if (true) {
            a = 40 //报错：在初始化之前无法访问“a” 
            console.log(a)
            let a = 50
        }