首頁 > web前端 > 前端問答 > 詳細分析使用let宣告變數的優勢

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

WBOY
發布: 2022-08-09 16:25:49
轉載
1148 人瀏覽過

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

詳細分析使用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.變數作用域

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

##循環體中let實作原理:詳細分析使用let宣告變數的優勢

你們會問,那使用var之前是怎麼樣的? 詳細分析使用let宣告變數的優勢

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

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

let的出現,透過上述例子,可以說很好彌補了var現存的缺陷,我們可以把let看成完美的var,或是對var的修整和升級,優化。 詳細分析使用let宣告變數的優勢

【相關推薦:javascript影片教學

web前端###】###

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

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板