ES6之let与const

一、声明变量var、let、const三种；

二、let，const与var区别：

1、使用let/const声明的变量只在块级作用与有效

2、使用let/const 声明的变量在当前作用域下是唯一的

3、使用let/const声明的变量是不存在变量提升的

4、使用let/const声明的变量是会存在暂时性死区域的

5、const其实是用来定义常量的

6、const定义的变量必须要在定义的时候同时赋值

三、块级作用域是什么？

1、函数块

function（）{

//这就是函数块的作用域

}

2、花括号

if（）{

//这就是花括号的作用域

}；

for（）{

//这就是花括号的作用域

}

注意：if与for等循环语句是没有块作用域的。

3、let定义的变量只在它当前花括号块作用域内使用

eg:{ 

            {

                let a=9 //这里有效

                 {     //这里有效    } 

              } 

                //这里无效

        }

4、使用let/const 声明的变量在当前作用域下是唯一的

eg：{

            let a=9;let a=7;    //报错

          } 

5、在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”；简称 TDZ

eg:if(true){ 

            tmp='abc'; 

            console.log(tmp); // ReferenceError

            let tmp; // TDZ结束

            console.log(tmp); // undefined

            tmp=123;

            console.log(tmp); // 123    

造成暂时性死区的原因1.封闭的环境2.不存在变量提升；

可以这样相互不受影响：

{

let a=9；

{

let a=8

}

四、Es5与Es6的块级作用域

1、在ES5中只有函数function拥有块级作用域；

eg： function f() {

        var c = 8;

        console.log(c);

      }

      f();       //8

      console.log(c);       //报错

2、在循环函数if和for里没有块级作用域的；

 eg: if循环

 var a = true;

      if (a) {

        var b = 5;

        console.log(b); //5

      }

      console.log(b);    //5

eg: for循环

var btn = document.getElementsByTagName('button');

      for (var i =0;i<btn.length;i++){

        btn[i].addEventListener('click',function () {

            console.log('第'+ i +'个按钮')

        })

      }        //返回的都是第5个按钮

3、如何解决循环语句没有块级作用域；

1.es5闭包解决：

var btn = document.getElementsByTagName("button");

      for (var i = 0; i < btn.length; i++) {

        (function (num) {

          btn[i].addEventListener("click", function () {

            console.log("第" + num + "个按钮");

              });

        })( i );

      }

2.es6用let储存值，存在块级作用域

  var btn = document.getElementsByTagName("button");

      for ( let  i = 0; i < btn.length; i++) {

        btn[i].addEventListener("click", function () {

          console.log("第" + i + "个按钮");

        });

      }