ES6中的let和const

ES6新增了let命令，用于声明变量。
let与var的区别：
1.不存在声明提升

• var可以在声明之前调用，值为undefined。

• let声明的变量如果在声明前调用，会报错。

   console.log(a);    //undefind
    var a = 10;
    
   console.log(b);// 报错：Cannot access 'b' before initialization  不能在初始化之前使用b。
    let b = 10;
  //-----------------------------------
    var a = 10;
    if (true) {
      console.log(a);//10  
      var a = 30; //全局变量
    }
    console.log(a);//30

2.暂时性死区:

• 只要块级作用域内存在 let 命令。它声明的变量就绑定了这个区域。

3.块级作用域：

• 碰到大括号就会形成一个作用域。

 let a = 10;
    if (true) {
      console.log(a);//报错  Cannot access 'a' before initialization
      let a = 30; // 块级作用域      //一个大括号就是一个作用域
    }
    console.log(a);//10
//-----------------------
    {
      let a = 10;
    }
    console.log(a);   // 报错

4.不允许重复声明。

• 重复声明会报错

var a = 10;
var a =30;
console.log("a") //输出30
//--------------------------
 let a = 10;
 let a = 20;//Identifier 'a' has already been declared  标识符a已经被声明了
   console.log(a);

const与let的用法一样。
它与let的相同点：
1.不存在声明提升
2.暂时性死区
3.块级作用域
4.不允许重复声明。

它与let的不同点：

 
        const用于声明 常量；const声明的变量，必须赋值，而且值不能改变。
        用let和const的场景：
        一般都可以用let
        const用于获取元素节点。  引入模块化。

      【注意】const定义的变量存储的值如果是复杂数据类型，只要地址不变，就不算修改。

示例

 let a;
    a = 10;
    const b; //Missing initializer in const declaration  const声明的变量没有初始化。
    const b = 20;
    b = 30;//报错！
    console.log(b);

    const arr = [10,20,30];
    arr.push(40);
    arr = [10,20,30,40];//报错
    console.log(arr);

案例
循环中使用var和let的内存区别：

• 使用var,内存中有且只有一个i，它的值会随着循环改变。

• 使用let，循环多少次就有多少个i创建，这一次循环结束了，这个i就会销毁了。

div部分

  <button>点击次数：0次</button>
  <button>点击次数：0次</button>
  <button>点击次数：0次</button>
  <button>点击次数：0次</button>
  <button>点击次数：0次</button>

js部分

//获取元素节点
    var btns = document.querySelectorAll("button");
    //遍历元素节点
     for (let i = 0; i < btns.length; i++) {
        let count = 0;     //每一次点击都是用的一个count
        btns[i].onclick = function () {
        count++;   
        btns[i].innerHTML = `点击次数：${count}次`;
      }
    }