ES6基本语法之let和const

1.var可以重复声明

var a = 12;
var a = 5;
alert(a) //5

2.var无法限制修改

如：PI=3.1415926;

3.没有块级作用域

{

}

和；

if(){

}
for(){

}

这都是块级作用域，在这里面定义的变量则在块级域外面是没法使用的。

4.let和const不能重复声明

let a =12;
let a=5;
alert(a)//报错

const a =12;
const a=5;
alert(a)//报错

5.let是可以重复修改的，但是const是常量，是不能重复修改的。

let a = 12;
a = 5;
alert(a); //5

const a = 12;
a = 5;
alert(a);//报错

6.块级作用域

if(true){
let a = 12;
}
alert(a);//报错，a is not defined

if(true){
const a = 12;
}
alert(a);//报错，a is not defined

语法快不仅仅是if，for等这些，如下面的也是块级作用域：

{
let a = 5;
console.log(a) //5
}
console.log(a); //报错，a is not defined

7.let语法特性

• 形成块级作用域

  for (let i=0;i<3;i++) {
    let i='abc';
  console.log(i);
  }
  //abc
  //abc
  //abc
  

  这里循环语句部分是一个父作用域，而循环体内部是一个单独的子作用域。
  输出3次abc，表明函数内部变量i和循环语句中的i是分离的。

• 不存在变量提升

  console.log(foo); //undefined
  var foo=2;
  
  //let 情况
  console.log(bar); //ReferenceError
  let bar=2;
  

• 暂时性死区（temporal dead zone）
  如果区块中存在let和const命令，则这个区块不需等到代码执行到命令那一行就形成封闭作用域

  var tmp=123;
  if (true) {
    tmp='abc'; //ReferenceError
    let tmp;
  }
  

  在块内，使用let声明变量前，该变量都是不可用的。

  function bar(x = y, y = 2) {
    return [x, y];
  }
  
  bar(); // 报错
  

  参数x默认值等于另一个参数y，而此时y还没有声明，属于”死区“。

• 不允许在相同作用域内重复声明同一个变量

  // 报错
  function () {
    let a = 10;
    var a = 1;
  }
  
  // 报错
  function () {
    let a = 10;
    let a = 1;
  }
  
  //函数内部也不可以
  function fn (arg) {
    let arg; //报错
  }
  function fn (arg) {
    {
      let arg; //不报错
    } 
  }
  

8.块级作用域的用法：

现在有三个button，分别点击，传统的写法是：

window.onload = function(){
var aBtn = document.getElementByTagName("input");
   for(var i=0;i<aBtn.length;i++){
        aBtn[i].onclick = function(){
        alert(i) 
      }
   }
}

结果每次弹出的都是3，然后我们采用函数作为块级作用域的方式在外边增加一层，如下：

window.onload = function(){
var aBtn = document.getElementByTagName("input");
   for(var i=0;i<aBtn.length;i++){
        (function(i){
            aBtn[i].onclick = function(){
             alert(i) 
         }
        })(i)
   }
}

虽然问题解决了，但是如果用现在ES6的let，本身就是在块级作用域中有效，更加方便；

window.onload = function(){
var aBtn = document.getElementByTagName("input");
   for(let i=0;i<aBtn.length;i++){
            aBtn[i].onclick = function(){
             alert(i) 
         }
   }
}

最后总结如下：