es6 let const與var 的區別

 ==================== 概述：======================
    1. ECMASCript, Javascript, Node.js 它們的區別是什麼？
       ECMASCript: 簡稱ES， 是一個語言標準（迴圈， 判斷， 變數， 陣列等資料型別）
       JavaScript: 執行在瀏覽器端的語言， 該語言使用ES標準。 ES + web api = Javascript
       NodeJs: 執行在服務端語言， 該語言使用ES標準。 ES + node api = NodeJs
       無論是JavaScript,還是NodeJS, 他們都是ES的超集（super set）

    2. ECMAScript有哪些關鍵版本？
    ES3.0: 1999
    ES5.0: 2009
    ES6.0: 2015， 從該版本開始， 不再使用數字作為變化， 而使用年份
    ES7.0: 2016

    3. ECMAScript6（es6）為啥那麼重要？
    ES6是一個前端必會的技術， ES6解決了JS無法開發大型語言層面的問題。

    ==================宣告變數====================
    宣告變數的問題： 使用var宣告變數，
    1. 允許重複變數的變數宣告：導致資料的覆蓋
    var a= 1;
    function print(){
        console.log(a)
    }
    假設這裡有1000行程式碼
    var a =2;
    print();


    2. 變數提升： 怪異的資料訪問，閉包問題

    // 變數提升
    if（Math.random() < 0.5）{
        var a = "abc";
        console.log(a);
    }else{
        console.log(a);
    }
    console.log(a);

    變成下面的程式碼,由於變數提升
    var a;
     if（Math.random() < 0.5）{
         a = "abc";
        console.log(a);
    }else{
        console.log(a);
    }
    console.log(a);

    // 閉包問題
    例如： 在頁面動態新增10個按鈕， 然後點選按鈕， 輸出按鈕的名字
    var div = document.getElementById("divButtons"); 頁面上有一個帶div的盒子
    for(var i = 0; i < 10; i ++){
        var btn = document.createElement("button");
        btn.innerHTML = " 按鈕"+ i;
        div.appendChild(btn);
        // 按鈕生成完畢， 等待點選， 獲取裡面的值
        btn.onclick = function(){
            console.log(i) // 結果i都是11， 因為閉包， 變數提升
        }
        修改方法：
        (function(i){
             btn.onclick = function(){
            console.log(i) // 結果就對了
        }
        })(i)
    }

    3. 全家變數掛載到全域性物件： 全域性物件成員汙染問題
     var abc = 123;
     console.log(window.abc) 結果是 123， 每次定義一個值，window都會加一個， 會全域性汙染


    ===============es6使用let解決上面的問題=====================
    // 使用let來解決宣告變數存在的問題，並且同時引入了塊級作用域（程式碼遇到花括號，自動會建立一個作用域，塊級作用域執行完了，會自動銷燬， 塊級作用域外不可以訪問塊級作用域裡面的變數）
        let a = 123,
        console.log(window.a) // undefined 不會放到全域性了


    // let 宣告的變數，不會掛載到全域性了

    // let 在同一個作用域裡面， 只能有一個名字的， 不可以重複宣告變數

    //  使用let， 不會有變數提升， 因此不能在let定義變數之前使用它，
    //   底層實現的let宣告的變數也會有提升， 但是提升後會放入到“暫時性死區”， 
    //  如果訪問暫時式性死區的變數，會報錯，。 當程式碼執行到變數的宣告語句時候，變數會從“暫時性死區”裡面移除

     // 在迴圈中，let宣告變數的迴圈變數，會特殊處理，每次進入迴圈體， 都會開啟一個新的作用域，並且將迴圈變數繫結到該作用域（每次迴圈會開啟一個新的作用域），在迴圈結束後變數會銷燬


        例如： 在頁面動態新增10個按鈕， 然後點選按鈕， 輸出按鈕的名字
            let div = document.getElementById("divButtons"); 頁面上有一個帶div的盒子
            for(let i = 0; i < 10; i ++){
                let btn = document.createElement("button");
                btn.innerHTML = " 按鈕"+ i;
                div.appendChild(btn);
                // 按鈕生成完畢， 等待點選， 獲取裡面的值
                btn.onclick = function(){
                    console.log(i) // 結果就是i
                }
            }
 

     =====================使用const宣告變數=========================       
   const與let宣告變數完全相同， 唯一區別：
   僅在於用const宣告的變數， 必須宣告變數賦值， 而且不可以重新賦值。
   在開發中，儘量使用const來賦值， 以保證變數的值不會被隨意改變
   原因如下：
    1. 根據經驗，在開發過程中，許多定義的變數，都不會改變，如div變數
    2. 後續的很多框架，或者第三JS庫， 都要求資料不可變，使用常量可以在一定程度上保證

    注意：1. 常量不可以變，是指宣告的常量的記憶體空間不可以變， 並不保證內容空間中的地址
            指向的其他空間不變，如： 常量宣告一個物件， 物件裡面的值可以變
         2. 常量的命名：
            1. 特殊的常量： 從常量的字面意義上，一定是不可以變的，比如圓周率，
               月底距離或其他絕不可能變化的配置， 一般常量的名稱全部大寫，多個單詞用下劃線分隔
            2. 普通的常量： 使用和之前的命名即可， 小駝峰命名方法
            3. 在for(let i; i < 10, i++)迴圈變數中，不可以使用常量， 但是在for in 迴圈裡面可以使用