主題大綱：ES6 系列之 let 和 const

簡述：

1.前端的變數申明,可以用到var,ES6的const(衡量)/let(變數) 

2.在ES5用的都是var,到ES6之後,也就是2015年開始出現const/let.

var 不會報錯，有宣告提升，會顯示undefined（一個變數未初始化）；

     function show(falg){
 //     var a;//**宣告提升，初始化為undefined,函式體（作用域）的最前排
        console.log(a);//undefined
        if(falg){
            var a ="111";
            console.log(a); //111
        }else{
            console.log(a);//undefined
        }
        
    }
    show(true);
    show(false);
    var a = "123";
    var a = "456";//覆蓋，同名，let不會，要報錯Identifier 'a' has already been declared(已被宣告)。
    console.log(a);
   
 

const/let訪問範圍

    function show(falg){                          // JavaScript引擎在掃描程式碼發現變數               TDZ暫時性死區(有let申明)
    console.log(a);//報錯: a is not defined              //a                              放入（未申明引用報錯）       
        if(falg){//在第134行和第137行的大括號之間，
            let a="111";
            console.log(a); // 111                      //a                               移除（已申明引用移除）
        }else{
            console.log(a);//報錯: a is not defined     //a                               放入（未申明引用報錯）
        }
        
    }
    show(true);
    show(false);
 

const/let不同作用於可同名，同一作用於不可同名；

    function show(falg){
            let a="222";
//          let a="333";//Identifier 'a' has already been declared
    console.log(a);// 222
        if(falg){
            let a="111";
            console.log(a); // 111
        }else{
            console.log(a);// a is not defined
        }
        
    }
    show(true);
//    show(false);
 

二.var 和 const/let 的區別

1.const/letlet：宣告變數，宣告的是區域性變數

用途及區別：ES6新增了let命令，用來宣告變數，類似於var ，但是宣告的變數只在let所在的程式碼塊的內部有效

let不存在變數提升，這個要注意喲

• 暫時性的死區(Temporal Dead Zone)，簡寫為 TDZ：

只要塊級作用域裡存在let命令，它所宣告的變數就繫結這個區域，不在受外部的影響

let 和 const 宣告的變數不會被提升到作用域頂部，如果在宣告之前訪問這些變數，會導致報錯：

console.log(typeof value); // Uncaught ReferenceError: value is not defined
let value = 1;

複製程式碼這是因為 JavaScript 引擎在掃描程式碼發現變數宣告時，要麼將它們提升到作用域頂部(遇到 var 宣告)，要麼將宣告放在 TDZ 中(遇到 let 和 const 宣告)。訪問 TDZ 中的變數會觸發執行時錯誤。只有執行過變數宣告語句後，變數才會從 TDZ 中移出，然後方可訪問。

• 不允許重複宣告

內部的資料有了let宣告過之後不允許重複宣告

for迴圈的處理

var funcs = [];
for (var i = 0; i < 3; i++) {
//for (let i = 0; i < 3; i++) {
    console.log(i);
  funcs[i] = (function(i){
      return function() {
          console.log(i);
      }
  }(i))
}
funcs[0](); // let輸出的結果是0；var輸出的結果是3

for (var i = 0; i < 3; i++) {
     var c = "123";//一次123
//   let c = "123";//三次123

     console.log(c);
}
  
  

使用let

var funcs = [];
for (let i = 0; i < 3; i++) {
  funcs[i] = function () {
      console.log(i);
  };
}
funcs[0](); // 0
funcs[1](); // 1
funcs[2](); // 2

分解：

(let i = 0) {
  funcs[0] = function() {
      console.log(i)
  };
}

(let i = 1) {
  funcs[1] = function() {
      console.log(i)
  };
}

(let i = 2) {
  funcs[2] = function() {
      console.log(i)
  };
};

let value = 1;
console.log(window.value); //undefined

ES6的const和let的區別:

1.const定義衡量:
不可以重新賦值,但是可以給物件的屬相重新賦值.

const data = {
  value: 1
}
// 沒有問題
data.value = 2;
data.num = 3;
 報錯
data = {}; // X   Uncaught TypeError: Assignment to constant variable.（分配恆定的變數）

優點:const 意味著該識別符號不能被重新賦值。
讓它在程式碼中的使用盡可能的清晰。使用一個變數對應代表一個東西.

2.let 在定義後可能還會修改,可變,越來越多的被使用在迴圈和演算法上面。

ES6相容性問題?bable轉義成ES5,用例:

需要安裝 ES5的bable: npm install [email protected]

C:\Users\Administrator\node_modules\babel-core

目錄裡面我們找到babel的瀏覽器版本browser.js(未壓縮版)和browser.min.js(壓縮版)
我們把browser.min.js引入（檔案位置的路徑要確保正確）。並且設定第二個script標籤的type為”text/babel”。

babel轉義具體實現：

if (false) {
  let a = 1;
//  var a=1;//如果直接將let改成var，直接編譯成 var，列印的結果肯定是 undefined
  var _a = 1;//然而 Babel 很聰明，它編譯成了內層變數名不一致
}
console.log(a); // Uncaught ReferenceError: a is not defined

// const 的修改值時報錯，以及重複宣告報錯怎麼實現的呢？
// 其實就是在編譯的時候直接給你報錯