進入前端領域工作將近兩年，看過學習過很多大牛的文檔和視頻，2018年也打算對學過的知識點給出一個小結式的輸出，從ES6開始吧。

ES6新增 let 命令，用途是用來聲明變量。一個新的事物被提出，總是有原因的，它能帶來什么？ES6之前是用 var 聲明變量，它有什么不足呢？

不足一：用來計數的循環變量泄露為全局變量。看半天文字，不如敲兩行代碼來的快：

var aa = []; for(var i=0;i<10;i++){aa[i] = function(){console.log(i);} } aa[8](); //10 不論是aa[5]()還是aa[6]()輸出都是10 復制代碼

上面代碼中，變量 i 是 var 聲明的，在全局范圍內都有效，所以每一次循環，新的 i 值都會覆蓋舊值，導致最后輸出的是最后一輪的 i 值。

如果把 for 里面的 var 換為 let，則 i 是 let 聲明的，當前的 i 只在本輪循環有效，所以每一次循環的 i 其實都是一個新的變量，則aa[8] ()輸出的就是8，aa[5] ()輸出的就是5。這就引出了塊級作用域的概念。

塊級作用域的簡單理解：任何一對花括號（{ }）中的語句都屬于一個塊，在花括號里面用 let 定義的所有變量在花括號外都是不可見不可用的。為了更好理解，再來一個例子：

function f1(){let n=5;if(true){let n=10;}console.log(n); } f1(); //輸出5 表示外層代碼塊不受內層代碼塊的影響 復制代碼function f2(){var n=5;if(true){var n=10;}console.log(n); } f2();//輸出10 表示內層變量會覆蓋外層變量 復制代碼

不足二：用 var 聲明的變量存在變量提升

什么是變量提升？

變量提升是指將函數及變量的聲明將被提升到函數最頂部。

變量可以先使用再聲明，也就是變量可以先使用再聲明。舉個例子：

var a=1; (function(){console.log(a); var a=2; })() //undefined 復制代碼

原因：代碼塊（函數內）里面聲明并定義了一個變量 a，導致變量提升了，實際代碼的執行順序如下：

var a=1; (function(){var a;console.log(a); a=2; })() //undefined 聲明了a，但是還沒有定義，所以是undefined 復制代碼

如果用 let，會報錯，提醒你使用之前先聲明

let a=1; (function(){console.log(a); let a=2; })() //"error" "Use before declaration (line 25)" 復制代碼

上述兩點看懂后，對 var 和 let 會有一個比較清晰的認識，下面再簡單介紹一下 const 命令：它是用來聲明常量，一旦聲明，其值就不能改變。

不可修改

const name = '小花'; name = '小草'; //error 復制代碼

2.只在塊級作用域內起作用，不存在變量提升，先聲明后使用，和let關鍵字一樣

3.不可重復聲明同一個變量，聲明后必須賦值

如果常量是一個對象，如何處理，這是一個重點

const Person = {"name": "小花" }; Person.name = "小草"; Person.age = 18; console.log(Person); //{ name: "小草”,， age: 18} 復制代碼

是不是很奇怪，不是說常量的值是不能改變的嗎？為什么 Person 的 name 被改了？

對于這種復合類型的變量，變量名不指向數據，而是指向數據所在的地址。const 命令只是保證變量名指向的地址不變，并不保證該地址的數據不變。

參考資料：

1.《ES6標準入門》 阮一峰 著

2.微信公眾號---web前端教程

轉載于:https://juejin.im/post/5a5614886fb9a01caa206e0b

總結

以上是生活随笔為你收集整理的ES6之let和const的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。