1.var、let、const簡介

        ECMAScript 變量是松散類型的，意思是變量可以用于保存任何類型的數(shù)據(jù)。每個變量只不過是一個用于保存任意值的命名占位符。有三個關鍵字可以聲明變量：var、let、const。其中 var 在ECMAScript 的所有版本中都可以使用，而 const 和 let 只能在ECMAScript 6 及更高版本中使用。

var 聲明

         var 關鍵字在定義變量中定義和使用中不嚴格。

1.定義單個變量和同時定義多個變量，在定義多個變量時用逗號隔開。兩者不賦值操作。

<script>
    var userName;
    var age,address,phone;
    console.log(userName)
    console.log(age)
    console.log(address)
    console.log(phone)
</script>

        顯然這樣輸出的值為 undefined 類型。 

 2.定義單個變量和同時定義多個變量，在定義多個變量時用逗號隔開。兩者賦值操作。

<script>
    var userName = 'sa'
    var age = 18,address = '南昌',phone = '19238824523'
    console.log(userName)
    console.log(age)
    console.log(address)
    console.log(phone)
</script>

 3.var重復聲明變量和賦值

        在 ECMAScript 中 var 關鍵字聲明的變量可以重復聲明，但是賦值操作會覆蓋前面已經給變量賦的值。值不僅可以改變數(shù)據(jù)也可以改變相關的數(shù)據(jù)類型。

<script>
 var userName = 'sa'
 console.log(userName)
 var userName = 77  // 這邊也可以省略var
 console.log(userName)
</script>

4.var 聲明的作用域問題

        var聲明的全局變量全局作用域會掛載到 window 對象上，可以使用window. 的形式訪問該變量，或者直接使用變量名的方式。在函數(shù)體內部的用var聲明的變量是局部變量，當省略 va r時，當前變量會定義為全局變量，但是當我要得到這個變量的值時，我們需要先執(zhí)行一下函數(shù)。

<script>
    // 定義函數(shù)，測試兩個變量是否在函數(shù)體外部可以使用
    function test(){
        var msg = '這是局部變量'
        message = '這是全局變量'
 
    }
    test()
    console.log(window.message)
    console.log(message)
    console.log(msg)
</script>

        輸出結果如下：message 可以獲得，但是 msg 不行。關鍵問題在于，使用 var 聲明的變量會成為包含它在函數(shù)的局部變量。在一個函數(shù)內部定義了一個變量，就意味著該變量將在函數(shù)退出時被銷毀。

 5.var 聲明提升

        “提升”，也就是把所有的變量聲明都拉到函數(shù)作用域的頂部。此外，反復多次使用 var 聲明同一個變量也沒有問題。

<script>
    // 定義函數(shù)，測試變量提升
    function test(){
        console.log(msg)
        var msg = '變量'
        console.log(msg)
    }
    test()
</script>

        正常的我們會認為，變量未定義先使用，會報一個 ~~ is not defined 的錯誤。但是 var 存在變量提升的行為，以上代碼等同于：

 function test(){
        var msg
        console.log(msg)
         msg = '變量'
        console.log(msg)
    }
    test()

兩者的輸出結果都是如下：

let 聲明

        let和var的作用差不多，但是有著非常重要的區(qū)別。最明顯的區(qū)別就是，let 聲明的范圍是塊作用域，而 var 聲明的范圍是函數(shù)作用域。

        代碼塊由一個左花括號（ { ）和一個右花括號（ } ）標識結束。

1.簡單示意 let 和 var 的區(qū)別

    // let 和 var 的作用域區(qū)別
if (true) {
    var username = 'sa'
    let msg = 'ss'
}
    console.log(username)
    console.log(msg)

        在當前代碼中，let 定義的 msg 只作用與 if 的代碼塊中，在外部無法使用 msg 該變量。

 2. let 不可以重復聲明變量，var 可以重復聲明變量

<script>
var userName
var userName
let msg
let msg
</script>

        這里提示 msg 重復定義：

3.將 let 和 var 混合重復定義一個變量

<script>
var userName
let userName
 
let msg
var msg
// 這邊將會報一個重復定義的錯誤
 
</script>

 當然，JavaScript 引擎會記錄用于變量聲明的標識符及其所在的塊作用域，因此嵌套使用相同的標識符不會報錯，因為同一個塊中沒有重復聲明。

<script>
let age = 20
console.log(age) // 20
if (true) {
    let age = 18
    console.log(age) // 18
}
</script>

4.let 聲明的變量不會在作用域中被提升

<script>
function test() {
    console.log(age)
    let age = 20
}
test()
</script>

         let 聲明的變量不會在作用域中被提升是和 var 一個很重要的區(qū)別。所以 let 聲明變量，必須要先聲明后使用，否則報錯。 

        在解析代碼時，JavaScript 引擎也會注意在塊后面的 let 聲明，只不過在此之前不能以任何方式來引用未聲明的變量。在 let 聲明之前的執(zhí)行瞬間被稱為“暫時性死區(qū)”，在此階段引用任何后面才聲明的變量都會拋出 ReferenceError。

5.let的全局聲明不會成為 window 對象的屬性（ var 聲明的變量則會）

<script>
var msg = '我是var聲明的變量'
let mess = '我是let聲明的變量'
console.log(window.msg)
console.log(window.mess)
</script>

 6.條件聲明

        在使用 var 聲明變量時，由于聲明會被提升，JavaScript 引擎會自動將多余的聲明在作用域頂部合并為一個聲明。因為 let 的作用域是塊，所有不可能檢查是否已經使用了 let 聲明過同名變量，同時也就不可能在沒有聲明的情況下使用它。

錯誤示范如下：

<script>
    // 當前聲明兩個變量
    var msg = '我是var聲明的變量'
    let mess = '我是let聲明的變量'
</script>
<script>
    var msg = 'sa' // 這里沒問題，var 存在變量提升聲明來處理
    let mess = 'ss' // 當之前聲明了變量mess，這里將報錯，let 不存在變量提升
</script>

<script>
let mess // 當前只聲明了一個 let 變量
</script>
<script>
  if (typeof mess === 'undefined'){
      let mess
  }
  mess = 'sa' // mess 被限制在 if {} 作用域塊中，當前賦值為全局賦值
  console.log(mess) // sa
  try {
      console.log(age)
  }
  catch (error) {
      let age
  }
  age = 20  // age 被限制在 catch {} 作用域塊中，當前賦值為全局賦值
  console.log(age) // 20
</script>

 注：條件聲明比較難以理解，這是一種反模式。這會讓我們的程序變得更加難理解。

7.for循環(huán)中的 let 聲明

        當我們在用 var 時，for循環(huán)定義的迭代變量會滲透到循環(huán)體外部。

for (var i = 0; i < 6; i++) {
    setTimeout(() => {
        console.log(i) },0) //  這將打印六個 6
}

        這種原因的出現(xiàn)情況是因為由于 var 聲明的變量不存在塊級作用域在退出循環(huán)時，迭代變量保存的是導致循環(huán)退出的值：6。在之后執(zhí)行超時邏輯時，所有的 i 都是同一個變量，最終導致輸出的值相同。

        使用 let 聲明 i 時：

for (let i = 0; i < 6; i++) {
    setTimeout(() => {
        console.log(i) },0) //  這將打印六個 6
}

        當使用let 聲明變量時，JavaScript 引擎在后臺會為每一個迭代循環(huán)聲明一個新的迭代變量，每個 setTimeout 引用的都是不同的變量實例，所以輸出的值不同也就是我們期望中的值，也是循環(huán)執(zhí)行過程中每一個迭代變量的值。

        在我們對dom節(jié)點使用for循環(huán)綁定事件時，一般也是用 let 聲明迭代變量。

const 聲明

         const 的行為和 let 基本相同，唯一一個重要的區(qū)別就是它在聲明變量的同時必須初始化變量，且嘗試修改 const 聲明的變量會導致運行時錯誤。

1.const 聲明的變量不允許修改

<script>
const age = 20
age = 30
</script>

 2.const 也是不可重復聲明

<script>
const age = 20
const age = 30
</script>

 3.const 聲明的作用域也是塊

<script>
if (true) {
    const age = 30
}
console.log(age)
</script>

4.const 中注意的點

         const 聲明限制只適用于它指向變量的引用。換句話說，如果 const 變量引用的是一個對象，那么修改這個對象內部的值不違反 const 的限制。引用未發(fā)生改變就行。

例如：修改了對象中 name 的值但不會報錯。

const student = {
    name: 'sa',
    age: 18,
    address: 'shanghai'
}
student.name = 'saa'
console.log(student.name) // 輸出saa

        如果你想用const 聲明一個不會被修改的 for 循環(huán)變量，那也是可以的。也就是說，每次迭代只是創(chuàng)建一個新變量。這對 for-in 和 for-of 循環(huán)都是有意義的。

例如：

for (const key in { a: 1, b: 2, c: 3 }){
    console.log(key)
}

 總結

在我們日常使用變量聲明時，遵循一下幾點：

        1.不使用 var

        2.const 優(yōu)先，let 次之

到此這篇關于Javascript 中 var 和 let 、const 的區(qū)別以及具體使用效果的文章就介紹到這了,更多相關js中var和 let 、const 區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論