ES6学习之let与const篇

一、let命令

let与var的区别：

1、存在块级作用域

在es6中使用let来定义一个变量，那么这个变量只在当前块级作用域内有效。举个例子：

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

用var定义的a输出结果为3，用let定义的变量b则会报错undefined，证明let定义的变量只在当前块中有效。

2、let不存在变量提升

什么是js中的变量提升呢？看下面的代码：

 console.log(a); //undefined
 var a = 10;
 console.log(a);//10

我们可以看到在第一个console.log中输出为undefined，并未报错，可是不应该是先声明再使用的吗，这之前并没有声明变量a啊？这就是变量提升，变量和函数的声明都会被自动提到最前面，和下面的是一样的：

var a;
console.log(a);
a = 3;
console.log(a);

变量a的声明提到了最前面，因此console.log(a)不会报错。

在es5中比变量提升通常会使得我们的写法很灵活，也会有混乱，在es6中加强了这一部分，不允许存在变量提升，必须先声明后使用。

3、let不允许在同一作用于内重复声明变量

var a = 10;
var a = 20;

 <button>按钮1</button>
 <button>按钮2</button>
 <button>按钮3</button>
 <button>按钮4</button>
 <button>按钮5</button>

        var a = 10;
        var a = 20;
        console.log(a); //20
        let b = 3;
        let b = 5;
        console.log(b); //Uncaught SyntaxError: Identifier 'b' has already been declared

我们可以看到当用var重复定义变量a时，a的值会被覆盖，输出20；但是用let中报错。

4、let在for循环中体现父子作用域

我们来做一个简单的小例子：现在有5个button按钮，当我点击第一个按钮会alert一个点击了第1个按钮，点击第五个会弹出点击了第五个按钮。

 <button>按钮1</button>
 <button>按钮2</button>
 <button>按钮3</button>
 <button>按钮4</button>
 <button>按钮5</button>

        var btns = document.getElementsByTagName('button');
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function (){
                i+=1;
                alert('点击了第'+ i +'个按钮');
            }
        }

这里我们点击任意按钮，弹出框都显示点击第5个按钮。这是由于for循环是个同步事件，下面的触发事件是个异步事件，当我们触发点击事件后，会在当前作用域寻找，没有找到就是在上一级for中寻找，此时i的值为5，因此无论点击哪一个按钮都是5。此时i通常我们会使用一个闭包来解决这一问题。

        var btns = document.getElementsByTagName('button');
        for(var i=0;i<btns.length;i++){
           (function(i){
                btns[i].onclick = function (){
                i+=1;
                alert('点击了第'+ i +'个按钮');
            }
            })(i);  
        }

闭包中的i和for中的互不影响，存在于两个作用域中，这样就可以达到我们想要的效果了~

在es6中我们可以使用let轻松的解决这一问题，只需要用let定义变量i：

        let btns = document.getElementsByTagName('button');
        for( let i=0;i<btns.length;i++){
            btns[i].onclick = function (){
                i+=1;
                alert('点击了第'+ i +'个按钮');
            }
        }

因为let中是存在父子作用域的，两个作用于互不影响。

二、const命令

1、存在块级作用域；

2、作用域不会被提升；

3、不允许在同一作用域内重复声明；

以上三条与let是一样的。

4、声明的常量必须复制，且一旦声明，就不可以更改。

const a; //错误

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

      const a = {};

      //为 a 添加一个属性，可以成功
      a.prop = 123;
      a.prop;//123

      //将 a 指向另一个对象，就会报错
      a = {}; //TypeError: "a" is read-only