笔记：ES6新特性-变量声明关键字：let和const

变量的声明

ES6在对变量进行声明时，除了可使用原有的var之外，还可以使用两个新的关键字：

1. let ：定义变量
2. const ：定义常量

新关键字的特点

1. 不可重复定义同名变量，定义同名变量时，会报错。
2. 使用const定义的变量，其值不可修改。
3. 块级的作用域。

不可重复定义同名变量

使用var定义变量

var a = 5;
var a = 6;//同名没有问题

使用let或const定义同名变量

let a = 5;
let a = 6;//报错：Uncaught SyntaxError: Identifier 'a' has already been declared

const b = 8;
const b = 10;//报错：Uncaught SyntaxError: Identifier 'b' has already been declared

const定义的变量，其值不可修改

const a = 5;
a = 5; //报错：Uncaught TypeError: Assignment to constant variable.

块级作用域

使用var定义变量

{
    var a = 5;
    alert(a);//弹出
}
alert(a);//弹出

使用let定义变量

{
    let a = 5;
    alert(a);//弹出

}
alert(a);//报错：Uncaught ReferenceError: a is not defined

var 和let的对比

页面上有三个按钮

<input type="button" value="A">
<input type="button" value="B">
<input type="button" value="C">

给按钮添加onclick方法，结果三个按钮点击后者是alert相同的结果：2。

    var bs = document.getElementsByTagName('input');
    for(var i = 0; i < bs.length;i ++){//注意这里使用var声明
      bs[i].onclick=function(){
        alert(i);
      }
    }

如果想alert出0，1，2的结果，要修改为：

    var bs = document.getElementsByTagName('input');
    for(var i = 0; i < bs.length;i ++){//注意这里使用var声明
        (function(j){
          bs[j].onclick=function(){
            alert(j);
          }
        })(i);//这里相当于定义了一个函数并立即执行
    }

使用let声明则不同，直接可alert出0，1，2。

    var bs = document.getElementsByTagName('input');
    for(let i = 0; i < bs.length;i ++){//注意这里使用let声明
      bs[i].onclick=function(){
        alert(i);
      }
    }

但是要注意，这里alert(m)的结果是15：

    var bs = document.getElementsByTagName('input');
      for(let i = 0; i < bs.length;i ++){//注意这里使用let声明
          let m = 10;
          bs[i].onclick=function(){
            alert(m);//结果是15
          }
          m = m+5;
        }

如果要alert的结果是10的话，还是需要修改：

    var bs = document.getElementsByTagName('input');
    for(let i = 0; i < bs.length;i ++){//注意这里使用let声明
      let m = 10;
      (function(n){
        bs[i].onclick=function(){
          alert(n);
        }
      })(m);
      m = m+5;
    }

小结

使用let和const跟方便查找错误，使得变量作用域更加清晰，更加符合编程习惯。

推荐在编写代码时，使用let和const替换var使用。

参考：

根据开课吧《ECMAScript6.0》视频教程整理。