let和var的小结

let容许你声明一个做用域被限制在块级中的变量、语句或者表达式。与var关键字不一样的是，它声明的变量只能是全局或者整个函数块的。

一 做用域

let声明的变量只能在其声明的块或子块中使用，这个和var很类似，两者之间最主要的区别在于var声明的变量的做用域是整个封闭函数。

// var
function testVar() {
  var a = 0;
  if (true) {
    var a = 1;
    console.log(a);  // 输出1
  }
  console.log(a);  // 输出1
}

// let
function testLet() {
  let a = 0;
  if (true) {
    let a = 1;
    console.log(a);  // 输出1 （不一样的变量）
  }
  console.log(a);  // 输出0
}

小结

在testVar函数里面重复输出了1，var声明的变量的做用域是整个封闭函数，因此到if里面被赋值为1，最后都输出为1。

在testLet函数里面{}，两个花括号至关于一个做用域，两个a在不一样的做用域里面，因此不受影响。（使用let能够彻底代替闭包）

二简化内部函数代码

好比给许多函数添加事件

/*
*  使用let
*/

let lists = document.getElementsByTagName('li');
for (let i = 0; i < lists.length; i++) {
  lists[i].onclick = function(ev) {
    console.log(`点击了第${i}个元素`);
  }
}
console.log(i);  // 报错 Uncaught ReferenceError: i is not defined

运行这段代码点击每一个元素都能输出正确的i值，并且console报错

var lists = document.getElementsByTagName('li');
for (var i = 0; i < lists.length; i++) {
  lists[i].onclick = function(ev) {
    console.log("点击了第"+i+"个元素"); // 点击了第6个元素
  }
}
console.log(i);  // 输出6


// 解决办法，可使用自执行函数
var lists = document.getElementsByTagName('li');
for (var i = 0; i < lists.length; i++) {
  (function(i){
    lists[i].onclick = function(ev) {
      console.log("点击了第"+i+"个元素"); // 正常输出
    }
  })(i);
}
console.log(i);  // 输出6

上面的代码能够看出不管点击哪一个元素都是输出“点击了第6个元素”，并且最后console也是6。

小结

由于（匿名）内部函数的五个实例引用了变量i的五个不一样实例。注意，若是你将let替换为var，则它将没法正常工做，由于全部内部函数都将返回相同的i：6的最终值。此外，咱们能够经过将建立新元素的代码移动到每一个循环的做用域来保持循环更清晰。

三 暂存死区的错误

不能再相同函数和相同做用域里面从新声明同一个变量

{
  let a;
  let a; //Uncaught SyntaxError: Identifier 'a' has already been declared
}

let 绑定不受变量提高的约束，也就是let声明不会被提高到当前执行上下文的顶部，若是你在初始化以前引用它，也会报上面那个错误。

{
  console.log(a);  // Uncaught ReferenceError: a is not defined
  let a;
  let b;
}

上面介绍了es6做用域的问题，表达式(2 + 55)内的标识符“a”会解析为if块的a,而不是覆盖值为2的a。if块的a已经生明，并未初始化，它仍处在暂存死区

function test(){
 var a = 2;
 if (true) {
    let a = (a + 55); // ReferenceError
  }
}
test();

小结

当在块中使用时，let将变量的做用域限制为该块。注意var的做用域在它被声明的函数内的区别。

总结

1. let有块级做用域；
2. 没有变量提高；
3. 暂存死区的错误；
4. 不能重复声明；
5. do表达式。

--- 参考阮老师的 《ECMAScript 6 入门》