詳細分析使用let宣告變數的優勢

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了使用let聲明變數的好處，ES6不僅引入了let關鍵字用於解決變數聲明的問題，同時引入了塊級作用域的概念，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

使用Let宣告變數

ES6不僅引入了let關鍵字用於解決變數宣告的問題，同時引入了區塊級作用域的概念。

區塊級作用域：

程式碼執行時遇到花括號{<!-- -->會建立一個區塊級作用域、花括號}結束，銷毀區塊級作用域。

   let a = 123;//全局作用域定义
   
   {
   	let a = 456;//然后定义块级作用域
   	console.log(a)//使用的时块级作用域中的a
   }
   console.log(a)//使用的全局作用域中的a

有了块级作用域之后它的使用范围跟函数一样被限制在了里面
这样更符合常规语言的逻辑，几乎所有的语言都是这样的，但是因为JS以前有变量提升导致了以前很混乱
现在有了"let"之后有效的改善了这样的局面

全域變數掛載到全域物件：全域物件污染問題

let a = 123;console.log(a)//输出undefined

而用var宣告賦值的話則會掛載到全域
只是這麼一個改動我們都無法拒絕使用Let

允許重複的變數宣告：導致資料被覆寫的問題

let宣告變數不允許目前作用域範圍內重複聲明

變數提升？ ：怪異資料存取閉包問題

• 使用let不會有變數提升，因此不能再定義let之前使用它
• 底層實作上，let宣告的變數實際上也會有提升，但是，提升後會將其放入“暫時性死區”，如果存取的變數位於暫時性死區，則會報錯Cannot access 'a' before initialization
• #當程式碼執行到該變數的宣告語句時，會將其從暫時性死區移除

在循環中let會做特殊處理

• 在循環中用let聲明的循環變量，會特殊處理，每次進入循環體，都會開啟一個新的作用域，並且將循環變數綁定到該作用域（每次循環使用的是一個全新的循環變數）
• 再循環中使用let 宣告循環變量，再循環結束後會被銷毀

//这时我绑定了10个按钮让咋们在点击时输出对应的ifor (let i = 1; i 

• 使用let時就不會像var#一樣在同一個作用域下修改的同一個i了
  具體見我寫過的JS用var宣告變數的不足,裡面有詳細提到輸出時會有什麼問題

• 在此時let會建立10個作用域看起來用的是同一個i但實際上使用的是不同的i。

範例如下：

#為什麼要使用let去取代var?

#因為var沒有區塊級作用域的限制，容易造成變數污染。

下面我們來看幾個在let沒出現之前，沒有區塊級作用域時會帶來的問題。

1.變數作用域

#2.沒有區塊層級作用域的if語區塊

這看起來好像沒什麼，但我們如果場景時這樣呢？

為什麼會這樣？我們只是在if語句區塊外面的修改了name，卻影響了整個if語句的輸出。

3.沒有區塊級作用域的for語區塊

我們可以看出，無論我們點擊哪個按鈕，輸出的都是第五個按鈕點擊，為什麼會這樣？因為這就跟我們在循環體內用var定義有關。

在沒有區塊級作用域之前，我們是透過閉包來解決這種尷尬的，因為閉包有自己的函數作用域。

使用了let後，我們只需要做出細微的改變，將迴圈體中var變成let，就可以避免使用閉包這種難度大的語法。

##循環體中let實作原理：

你們會問，那使用var之前是怎麼樣的？

ES5之前因為if和for都沒有塊級作用域的這樣一個概念，所以在很多具體的應用場景，我們都必須去借助於function的作用域來解決應（調）用外面變數的的問題。

ES6家庭中，加入了let和(const)，讓if和for語句有了區塊級作用域的存在（原先的var並沒有區塊級作用域的概念）。

let的出現，透過上述例子，可以說很好彌補了var現存的缺陷，我們可以把let看成完美的var，或是對var的修整和升級，優化。

【相關推薦：javascript影片教學、

web前端###】###

以上是詳細分析使用let宣告變數的優勢的詳細內容。更多資訊請關注PHP中文網其他相關文章！