理解let並 const在JavaScript ES6中(1)

cenfeng發表於2019-07-18

兩種新的方法來定義變數 let 和  const

var 傳統上 ,關鍵字 是我們在JavaScript中定義變數的方式。 然而,在JavaScript ES6中,增加了兩個新的關鍵字,這些關鍵字更好地代表了儲存的資料型別,從而使它們更容易除錯,更不容易出錯。 他們是:

  • 常量

首先要了解關於 let 和  const 的是,他們是塊作用域,相比 var ,這是功能範圍的。 這意味著它們是定義它們的最近的塊(花括號)的 var 本地 ,而 對於整個函式是區域性的,或者如果在函式外定義則是全域性的。 稍後會詳細介紹。

之間的區別 let ,並 const  就在於,前者應該被用來認為有可能發生變化的變數,同時 const ,顧名思義,你知道資料將保持不變。 實際上,嘗試在設定 const 之後 重置其 值將導致錯誤。

let關鍵字

用於 let 在變數持有的資料發生變化時宣告變數,類似於 var

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >讓myage = 39</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
if new Date()。getFullYear == 2018){</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     myage = 40</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font>

正如您所看到的,一旦我使用了變數定義 let ,我可以通過使用新值再次引用它來更新其值,而不 let 在其前面新增關鍵字。

與之不同 var ,您不能  let 在塊內多次 定義同一個 變數:

1
2
3
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >讓myage = 39</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
讓myname = '喬治' </font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
let myage = 40 // SyntaxError:已經宣告瞭識別符號myage</font></font>

這有助於防止在宣告變數後意外覆蓋變數,這種情況經常發生 var

如上所述, let 是塊作用域,這意味著它在塊(花括號)中可用(它包括內部塊),但不在它之外:

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > if true ){ //新塊</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     讓myname = '喬治' </font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
console.log(myname) //語法錯誤,myname未定義</font></font>

相比之下,如果我們使用了var關鍵字:

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > if true ){ //新塊</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     var myname = 'George' </font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
console.log(myname) //記錄'George'</font></font><font></font>

使用時 var ,變數的範圍限定為函式,或者在上面的示例之外,變數到視窗物件本身。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69933200/viewspace-2651011/,如需轉載,請註明出處,否則將追究法律責任。

相關文章