關於let

ES6新增了聲明變量的命令let，let與var不一樣的是let聲明的做用域是塊級做用域。下面是let的幾種使用場景。

一、let常見使用場景

以往寫for循環常常有這樣的代碼：for(var i=0;i<num;i++)

這種狀況下聲明的變量i的做用域其實函數做用域，至關於

var i；

for(i=0;i<num;i++)

 

如今有了let能夠這樣寫for(let i=0;i<num;i++),i只在for循環體內有效。須要注意的是在每次循環中i都是一個新的變量。可是JavaScript引擎會記錄上一個i的值，根據上一個i的值對本次的i進行初始化。由於let的這個特性因此能夠拿來解決閉包所帶來的問題。由於每一個i都是一個新的變量，因此輸出的i就是0,1,2,3,4...

var buttons=document.getElementsByTagName("button"); 
for(let i=0;i<buttons.length;i++){
　　buttons[i].onclick=function(){
　　　　console.log(i);
　　}
}

for循環的變量i的做用域是父做用域，for循環裏面的句子還能夠用let再次定義i

for(let i=0;i<10;i++){
    let i="aaa";
    console.log(i);//輸出aaa
}

二、var與let的不一樣

1.let塊級做用域

2.不支持變量提高

3.會出現暫時性死區

當用let聲明變量在該區域會產生封閉，外部的變量對其無影響

function test(){
        let i=1;
        let a=2;
        if(1){
            console.log(a);//不會出現暫時性死區，由於在該區域沒有再定義a因此會拿到上一級的變量a
            console.log(i);//出現暫時性死區，在該區域聲明瞭變量i,會產生封閉，外界的變量i則對其無影響，又由於let不提高變量因此出現報錯。
            let i;
        }
    }
    test()

 

4.不容許重複定義變量

var a;
let a;
//報錯

let a=1;
let a=2;
//報錯

 

5.不支持函數提高（但在支持ES6環境下仍是會支持提高，至關於var。通常不在塊做用域定義函數，即便定義函數也應使用let定義函數表達式，但在沒有大括號狀況下會報錯）

// 瀏覽器的 ES6 環境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重複聲明一次函數f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

//實際上執行的代碼效果
// 瀏覽器的 ES6 環境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function