探索ES6之let、const

ECMAScript 6 是JS的一個新的語法標準。隨著nodejs的發展以及Babel等ES6編譯器的興起，ES6已逐漸被廣泛使用。在本文中，我們將對ES6的let和const這兩個新的定義變量關鍵字進行詳解。

我們先來說說let。

在ES6出現之前，JS定義變量的關鍵字是var。常用的方式：var a = 12;

現在，我們用let定義一個變量。其方式一樣：let a = 12；

講到這裏，大家會問let與var有什麼區別呢？為了運行ES6代碼，下麵的例子代碼在node環境中運行。(注：實現ES6運行環境的方法很多，在此不再贅述。)

區別一，let聲明的變量具有塊級作用域，而var聲明的變量隻有函數作用域。舉個栗子：

分別用var和let在代碼塊中聲明一個變量，在代碼塊外訪問這個變量。結果如下：

代碼：

{

var a=12;

}

console.log(a);

執行結果：

變量a為全局變量，在代碼塊外邊仍然能訪問。

代碼：

{

let b=12;

}

console.log(b);

執行結果：

在代碼塊外邊不能訪問變量b，顯示錯誤：b is not defined

區別二，let不允許重複聲明同一個變量，而var可以重複聲明同一個變量。舉個栗子：

代碼：

var a =1;

var a = 2;

console.log(a);

執行結果：

變量a的第二個值覆蓋第一個值。

代碼：

let b=1;

let b=2;

console.log(b);

執行結果：

出現錯誤提示，變量b已經被聲明過了。

為了更好的理解let的新特性，我們可以拿選項卡這個功能來說明一下。

以前，前端人員在做選項卡時，經常會碰到如何獲取每一項按鈕的序號問題。通常，我們會用封閉空間的方式來實現。代碼如下：

執行結果：

現在，有了let之後，我們可以更簡潔的實現這個功能（目前，let關鍵字已被主流瀏覽器支持，可以直接使用

）。代碼如下：

執行結果：

let聲明的變量自身具有塊級作用域，相當於一個匿名函數立即調用，可以直接實現這個功能。let的新特性是不是很好用?*｡٩(^㉨^*)و*，大家可以勇於嚐試一下。

平時，大家在做項目中肯定會遇到自己聲明的非常重要的變量被汙染的問題，由此引出的BUG一般是非常難排查的，非常影響團隊的開發效率。即便使用命名空間等一些常用方式也難以避免。那ES 6給出解決方法了嗎？答案當然是肯定的。ES6推出的const關鍵字就是用於聲明不可修改的一些常量。舉個栗子：

const a=12; //聲明一個常量a

a=13; //修改常量a

console.log(a); //打印常量a

執行結果：

出現錯誤提示，常量a不能修改。

由於const聲明的常量不能修改，因此聲明的常量最好有初始值（沒有初始值的常量相當於沒用的常量）。另外，跟let一樣，const聲明的常量也不允許重複聲明。舉個栗子：

const a = 12;

const a = 13;

console.log(a);

執行結果：

出現錯誤提示，常量a不能重複聲明。

至此，ES6的let、const就介紹到這裏，若有不足之處，歡迎指正！

點擊查看公眾號文章