在ES6中引入了很多新的语法，其中最简单的就是let和const了，我认为ES6中的引入let和const就是为了完善先前的var语法的，当我看了它们两个的功能之后我感觉之后写代码再也不会写var了。

let基本语法

ES6引入了let用于声明变量，与var类似，但是let所声明的变量只在let命令所在的代码块内有效

  1. {
  2.   let a = 10;
  3.   var b = 1;
  4. }
  6. a  //报错，a没有定义
  7. b  // 1

所以for循环的计数器就很适合使用let命令

  1. for(let i = 0; i < 10; i++){}
  3. console.log(i);//当在for循环输出i的时候会报错，显示为定义

请看下面的代码

  1. var a = [];
  2. for(var i = 0; i < 10; i++){
  3.   a[i] = function(){
  4.     console.log(i);  
  5.   };
  6. }
  7. a[6](); //此时输出的10;

因为之前使用的var声明的变量会在全局范围内都有效，所以全局只有一个变量i，每一次循环变量i的值都会改变 ，而循环内被赋给数组a的函数内部console.log（i）中的i指的是全局变量，也就是说所有数组a的成员中的i指向的都是同一个i，导致运行时输出的时最后一个i的值，也就是 10；
而如果使用的是let的话：

  1. var a = [];
  2. for(let i = 0; i < 10; i++){
  3.    a[i] = function(){
  4.     console.log(i);  
  5.    };
  6. }
  7. a[6](); //此时输出的6;

因为i是用let声明的，当前的i只在本轮的循环内有效，所以每一次循环都是一个新的变量，于是最后输出的会是6，大家可能会问，如果每一次循环的变量i都是重新声明的，那它怎么知道上一轮循环的值的，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

let声明变量的特点

在使用let声明变量之后有几个不同于var的特点
1.没有变量的提升：
在使用var声明变量之后会发生“变量提升”的现象，就是声明的变量可以在声明之前使用，值为 undefined，但是在ES6中使用let声明变量就改变了这种语法行为，按道理变量应该在声明语句之后才可以使用，所以如果在使用let声明一个变量之前使用这个变量，那么浏览器就会报错：

  1. console.log(a);//会提示undefined
  2. var a = 2;
  6. console.log(b);//这里会直接报错
  7. let b = 2;

因为变量a使用var声明的会发生变量的提升，即脚本开始运行时，a就已经存在了，但是没有值，所以会输出undefined，而使用let实现的就不会发生变量提升，因为在声明之前b不存在的，所以会报错。
2.暂时性死区：
简单来说就是，当一个块级作用域内有let声明的变量时，这个块级作用域就被这个变量“绑定”了，不受外界影响。

  1. var temp = 0;
  2. if(true){
  3.    temp = 1; //报错，ReferenceError
  4.    let temp;
  5. }

如上代码，当一个代码块内存在一个let声明的变量之后，即使外面有一个相同的全局的变量，代码块内的变量也不受影响，在let声明之前使用该变量还是会报错。
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

  1. if (true) {
  2.   // TDZ开始
  3.   tmp = 'abc'; // ReferenceError
  4.   console.log(tmp); // ReferenceError
  6.   let tmp; // TDZ结束
  7.   console.log(tmp); // undefined
  9.   tmp = 123;
  10.   console.log(tmp); // 123
  11. }

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。
ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。
总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
3.不允许重复声明：
let不允许在相同的作用域内声明同一个变量，如下都是报错

  1. // 报错
  2. function func() {
  3.   let a = 10;
  4.   var a = 1;
  5. }
  7. // 报错
  8. function func() {
  9.   let a = 10;
  10.   let a = 1;
  11. }
  13. function func(arg) {
  14.   let arg;
  15. }
  16. func() // 报错

4.不会成为顶级对象的属性
当用var声明变量是变量会自动成为顶级对象的属性,而使用let声明的变量
image.png

const语法

const语法就是声明一个静态的常量，这个常量只能读，一旦声明之后就不能改变，所以说一旦声明后就必须得初始化。我总结了一下const的几个特点：

  1. 声明的变量一个只读的常量，一旦声明就不能改变
  2. const一旦声明常量就必须立即初始化，不能留到后面赋值
  3. const命令声明的常量也不会提升，同样也存在暂时性死区只能在声明后使用
  4. const声明的变量不会成为顶级属性

而const的实质保证的不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

  1. const foo = {};
  3. // 为 foo 添加一个属性，可以成功
  4. foo.prop = 123;
  5. foo.prop // 123
  7. // 将 foo 指向另一个对象，就会报错
  8. foo = {}; // TypeError: "foo" is read-only

块级作用域

最后给大家介绍一下ES6中的块级作用域，在ES5中只用全局作用域和函数作用域，没有块级作用域，这样会导致很多不必要的麻烦。
1.内层变量会覆盖外层变量

  1. var tmp = new Date();
  3. function f() {
  4.   console.log(tmp);
  5.   if (false) {
  6.     var tmp = 'hello world';//变量提升至f函数的开始，输出为underfined
  7.   }
  8. }
  10. f(); // undefined

这里因为内部的tmp变量提升而导致输出结果为undefined
2.用来计数的循环变量泄露为全局变量。

  1. var s = 'hello';
  3. for (var i = 0; i < s.length; i++) {
  4.   console.log(s[i]);
  5. }
  7. console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。
ES6中新增了块级作用域，跟ES5中的自调用函数一样，可以用块作用域来代替自调用函数，而在块级作用域内运行声明函数，声明的函数跟let声明的变量类似，块级作用域之外不可引用，但是这样有很多的兼容性的问题，所以大部分的ES6浏览器中块级作用域内声明函数跟var类似，还是会提升到全局作用域或函数作用域头部。