ES6系統學習----對比var，let

對於ES6，雖然之前也有過學習，但總的來說還是不夠系統的，知識點非常的零碎。現在結合之前遇到的問題把ES6中的知識點總結一下。
最初接觸ES6時，明白ES5中聲明變量的方式是使用var，在ES6中他是使用let的方式進行聲明的。
JavaScript是一個弱類型的語言。他無法在編譯時就提示一些語法錯誤，只能在運行時期才能夠發現錯誤。因此ES6包括以ES6爲基礎產生的TypeScript語法糖在逐漸的趨近於強類型的語言。
進入正題，結合問題看一下var和let的區別

一：富二代和富一代

1：我們來看第一段代碼（從前兩篇博客中摘過來的）：

 <div>1</div>
 <div>2</div>
 <div>3</div>

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

運行結果爲：

分析：
首先聲明一下：
ES5中只有全局作用域和函數作用域沒有塊級作用域
因此在這段使用var聲明的i變量，i在全局範圍內都有效，因此在全局範圍內只有一個變量i。因此很清晰的就是隻要循環一次，變量i的值都是需要發生變化的。他是覆蓋而不是創建，因此我把它稱之爲富二代，啃老族
在代碼1中增加一段代碼：

var divArr = document.getElementsByTagName("div");
    for (var i = 0;i < divArr.length;i++){
        divArr[i].onclick = function(){
            console.log(i);
        }
    }
     console.log(i);  //輸出3

上述代碼就可以證明了 在使用var聲明瞭變量i之後，他的作用域是全局的。而不是在塊級作用域中，所以他纔可以在最後一行輸出i的值。這樣也驗證了使用var聲明的變量是不具備塊級作用域的。

2：來看第二段代碼：

 <div>1</div>
 <div>2</div>
 <div>3</div>

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

運行結果爲：

從前面的博客中使用的是閉包進行處理代碼1中的問題，現在使用的是ES6中的let進行處理。當使用let進行聲明變量時，當前變量i只在本輪循環中有效，因此每一個循環中的i其實都是一個新的變量i，初始化本輪的變量i的值其實是上一輪循環的值（js引擎內部原理）。因此在編譯後的執行階段，每一個i都是不一樣的變量。let是創建，而不是var的覆蓋。因而稱之爲富一代。
既然上邊談到作用域的問題，就不得不說了ES6中的作用域的問題：
ES6中新增了塊級作用域，在作用域中聲明的變量只在當前作用域中有效

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

最後一行的輸出結果和前面的很不一樣

很顯然，在for循環外部，是獲取不到變量i的，而這種變化正是ES6中的let賦予的。

二：總結

1：由於變量作用域的問題會導致兩者聲明的變量的適用範圍有着極大的不同；
2：使用var聲明的變量是一個覆蓋，頂替的過程，而使用let聲明變量是一個創建，並在原有基礎上開拓的過程。
3：所以js語法標準的更新將對良好編程習慣有着極大的利好。