ES6中的let和var的区别

ES6中新增了let命令用来声明变量，let和var 声明的变量有什么区别呢？现在来讲解总结下。

1、基本用法：和var 命令类似，直接使用 let 变量 = 值。

{
    let a = '1';
    var b = 'a';
}
a // error: a is not defined.
b // 1

    

    

2、有效作用域：let声明的变量只在其命令所在的代码块内有效。  

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

    使用let声明的变量仅在在块级作用域内有效有效，所以输出的是6,。

    

    来看，如果使用var 命令声明的情况：    

var a = [];
for (var i = 0; i < 9; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 9

    为什么输入的是9而不是6呢，其中的原因是for循环中的i使用var 声明之后就是一个全局的变量，即变成window对象下的变量。循环中a[i]是一个匿名方法，此匿名方法中的console.log(i)的是window下的i变量，每次遍历时变量i都会增加。数组a中的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值

    

3、let声明的变量不存在变量提升：

     我们都知道使用var 声明的变量存在变量提升，即变量可以在声明之前使用，值为undefined，新增的let命令不存在此功能。

     

// var 的情况
console.log(a); // 输出undefined
var a = 2;

// let 的情况
console.log(b); // 报错ReferenceError
let b = 2;

  

4、let存在暂时性死区：

      暂时性死区就是使用let命令声明的变量会绑定到变量所在的块级作用域中，不收外界影响。使用let命令声明变量之前，该变量都是不可用的。

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

    再看：

    

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

    在相同的函数或块作用域内重新声明同一个变量会引发SyntaxError：

     

if (x) {
  let foo;
  let foo; // TypeError thrown.
}

     比本人总结的更好的地址，参考如下资料：

    阮一峰： http://es6.ruanyifeng.com/#docs/let

    MDN:  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let

如有纰漏，还请多包涵并指出。