es6小白學習筆記(一)

標籤：使用   cti   size   覆蓋   代碼   重複   strong   define   變數提升   

1.let和const命令

1.es6新增了let和const命令，與var用法類似，但它聲明的變數只在let所在的代碼塊內有效(塊級範圍，es5隻有全域和函數範圍)

 {     let a = 1;     var b = 2; }     console.log(a); //a is not defined  let聲明的變數只在自己的塊內有效 console.log(b); //2

 var a = []; for(avr i = 0; i < 10; i++){     a[i] = function() {        console.log(i)     }; }     a[3](); //  10 //a[3])() 列印出來是10，i是var聲明的，在全域範圍內都有效，所以每一次迴圈，新的i值都會覆蓋舊值，所以最後i是10  var a = []; for(let i = 0; i < 10; i++){     a[i] = function() {        console.log(i)     }; } a[3](); //  3 //a[3]()  列印出來是3，變數i是let聲明的，且僅在塊級範圍內有效，每個i都是不同的範圍，所以最後輸出3

2.不存在變數提升

變數提升的意思是把下邊的東西提到上面，在JS中，就是把定義在後面的東西（變數或函數）提升到前面來定義。

eg:  var會存在變數提升 

 var v=‘Hello‘;  (function(){      alert(v);      var v=‘World‘;  })() ; //這段代碼alert出來的是undefined，就是因為存在變數提升，會把定義提到前面去，賦值不會提升，變數提升之後的代碼如下： var v=‘Hello‘;  (function(){      var v;     alert(v);      v=‘World‘;  })() ;

使用let命令就不會存在變數提升，所以一定要先聲明後使用。

 3.暫時性死區

ES6明確規定， 如果區塊中存在let和const命令， 這個區塊對這些命令聲明的變數， 從一開始就形成了封閉範圍。 凡是在聲明之前就使用這些變
量， 就會報錯。

 var tmp = ‘www‘;
 if (true) {       tmp = ‘abc‘;   // tmp is not defined     console.log(tmp);   // tmp is not defined     let tmp;      console.log(tmp); // undefined     tmp = 123;     console.log(tmp); // 123 }

es6使用let和const，是為了避免var沒有聲明就使用所帶來的一些問題。

4.不允許重複聲明

//以下這幾種都會報錯function() {  let a = 1;  var a = 2;  }function() {  let a = 1;  let a = 2;  }function fun( arg ){  let arg;  }//不報錯，兩個arg屬於不同的塊級範圍function fun( arg ){  {      let arg;     }    }    

2.塊級範圍

1.在es5中沒有塊級範圍

//第一種情境：內層變數覆蓋外層變數
var tmp = new Date();function f() {    console.log(tmp);    if (false) {    var tmp = ‘hello world!‘    }}f(); //undefined   變數提升，內層變數覆蓋了外層變數//第二種情境：迴圈變數泄露為全域變數var s = ‘hello‘;for (var i = 0; i < s.length; i++) {    console.log(s[i]);}onsole.log(i); // 5    迴圈結束後 i泄露為全域變數

2.es6的塊級範圍，let和const

一對{}就代表一個塊級範圍，可以任意嵌套

{{{    {let aa = ‘hello‘}    console.log(aa); //報錯 }}}{{{    {let aa = ‘hello‘}     let aa = ‘world‘;   //不同的範圍可以定義同名變數}}}

 

 

 

es6小白學習筆記(一)