隨著ES6規範的到來，Js中定義變數的方法已經由單一的 var 方式發展到了 var、let、const 三種之多。var 眾所周知，可那倆新來的貨到底有啥新特性呢？到底該啥時候用呢？下面就是小編總結出的關於javascript中var與ES6規範中let、const區別詳解

我們先來絮叨絮叨 var 方式定義變數有啥 bug ？

Js沒有塊級作用域

請看這樣一條規則：在JS函式中的var宣告，其作用域是函式體的全部。

  for(var i=0;i<10;i++){
     var a = 'a';
  }
  console.log(a);

明明已經跳出 for 迴圈了，卻還可以訪問到 for 迴圈內定義的變數 a ，甚至連 i 都可以被放訪問到，尷尬~

2.** 迴圈內變數過度共享 **

你可以猜一下當執行以下這段程式碼時會發生什麼

for (var i = 0; i < 3; i++) {
   setTimeout(function () {
    console.log(i)
   },1000);
 }

在瀏覽器裡執行一下，看看和你預想的結果是否相同？

沒錯，控制檯輸出了3個3，而不是預想的 0、1、2。

事實上，這個問題的答案是，迴圈本身及三次 timeout 回撥均共享唯一的變數 ** i 。當迴圈結束執行時，i 的值為3。所以當第一個 timeout 執行時，呼叫的 i 當讓也為 3 了。

話說到這兒，想必客官已經猜到 let 是幹嘛用的。

你沒猜錯，就是解決這兩個bug的。你儘可以把上述的兩個例子中的 var 替代成 let 再執行一次。

注意：必須宣告 'use strict' 後才能使用let宣告變數，否則瀏覽並不能顯示結果

let是更完美的var

let宣告的變數擁有塊級作用域。 也就是說用let宣告的變數的作用域只是外層塊，而不是整個外層函式。let 宣告仍然保留了提升特性，但不會盲目提升，在示例一中，通過將var替換為let可以快速修復問題，如果你處處使用let進行宣告，就不會遇到類似的bug。

let宣告的全域性變數不是全域性物件的屬性。這就意味著，你不可以通過window.變數名的方式訪問這些變數。它們只存在於一個不可見的塊的作用域中，這個塊理論上是Web頁面中執行的所有JS程式碼的外層塊。

形如for (let x...)的迴圈在每次迭代時都為x建立新的繫結。

這是一個非常微妙的區別，拿示例二來說，如果一個for (let...)迴圈執行多次並且迴圈保持了一個閉包，那麼每個閉包將捕捉一個迴圈變數的不同值作為副本，而不是所有閉包都捕捉迴圈變數的同一個值。

所以示例二中，也以通過將var替換為let修復bug。

這種情況適用於現有的三種迴圈方式：for-of、for-in、以及傳統的用分號分隔的類C迴圈。

用let重定義變數會丟擲一個語法錯誤（SyntaxError）。

這個很好理解，用程式碼說話

let a = 'a';
let a = 'b';

上述寫法是不允許的，瀏覽器會報錯，因為重複定義了。

** 在這些不同之外，let和var幾乎很相似了。舉個例子，它們都支援使用逗號分隔宣告多重變數，它們也都支援解構特性。 **

ES6引入的第三個宣告類關鍵詞：const

一句話說明白，const 就是用來定義常量的！任何腦洞(fei)大(zhu)開(liu)的寫法都是非法的

比如這樣：

//只宣告變數不賦值
const a
這樣：
//重複宣告變數
const a = 'a';
const a = 'b';

還有這樣：

//給變數重新賦值
const a = 'a';
a = 'b'

再來個黑科技：

//不過不推薦這麼幹，實在沒啥意思，常量常量，不變的才叫常量嘛~
const a = {a:'a'};
//重新賦值當然是行不通的了
a = {a:'b'};
//嘿嘿嘿科技
a.a = 'b'

const 確實沒啥說的，普通使用者使用完全沒問題，高(dou)端(bi)使用者咋用都是問題。

以上就是小編對 var、let、const 用法的一些總結，有不當之處，還請大大們指出。

更多關於Javascript ES6規範詳解請檢視下面的相關文章