ES6學習let&const

前端coder發表於2019-02-16

為什麼會出現let和const

為什麼要出現let和const呢？肯定是var不好（var：呵呵！）。
var存在的問題：
1.變數宣告提升
2.可重複定義
3.全域性變數掛載到window上。
這些是js在設計時候的缺點，容易在開發中導致很多錯誤。全域性變數掛載到window上不同意查詢，而且容易覆蓋。
閉包也是非常頭疼的問題，下面例子本來是想列印1,3,5的，然兒會輸出10,10,10。

    var arr = []
    for (var i = 0;i <10;i++) {
        arr[i] = function() {
            console.log(i)
        }
    }
    arr[1]() // 10
    arr[3]() // 10
    arr[5]() // 10
複製程式碼

如果使用let就會解決閉包問題，輸出1,3,5

    let arr = []
    for (let i = 0; i < 10; i++) {
        arr[i] = function () {
            console.log(i)
        }
    }
    arr[1]() // 1
    arr[3]() // 3
    arr[5]() // 5
複製程式碼

因為var存在這些缺點，所以就出現let來彌補這些缺點了。

let的優點:

1.不會出現宣告提升 2.不可重複定義 3.加強作用域的控制 4.配合{}可以實現塊級作用域:

    if () {
        // 塊級作用域
    }
    while () {
        // 塊級作用域
    }
    for () {
        // 塊級作用域
    }
    switch () {
        // 塊級作用域
    }
複製程式碼

宣告不能提升

    {
        let a =10
        {
            //在裡面可以訪問外面let的變數
            console.log(a) // 10
        }
    }
複製程式碼

let會產生臨時性死區，臨時性死區，只要在塊級作用域中let變數，就不會訪問外面同名變數。解決辦法為重新設定個變數名。

    {
        let a = 10
        {
            //臨時性死區，只要在塊級作用域中let變數，就不會訪問外面同名變數。解決辦法為重新設定個變數名。
            console.log(a) //報錯，a沒有被定義
            let a = 20
        }
    }
複製程式碼

下面例子會幫助大家加深對let的理解。（能不能加深我也不知道，呵呵！）

因為setTimeout是非同步載入當函式執行時i就已經變成10了，所以會輸出10個10

    for(var i = 0;i<10;i ++) {
        setTimeout(() => {
            console.log(i) //輸出10個10
        }, 0);
    }
複製程式碼

如果var改成let就可解決這個問題。

    for(let i = 0;i<10;i ++) {
        setTimeout(() => {
            console.log(i) //輸出0,1,2...,9
        }, 0);
    }
複製程式碼

function形參相當於 var，裡面不可用let重複宣告，可以用var。

    function na(a,b) {
        let a = 10 //報錯，形參相當於var a
    }
    na()
複製程式碼

const講解：

const 是宣告一個常量，宣告之後不可被改變，開發中推薦使用const > let > var(別用var了，哈哈)

    const PI = 3.14
    const PI = 111 // 報錯，不可改變
複製程式碼

const儲存常量的值不會被改變,但是儲存常量值對應的空間的值可以被改變

    const arr = {}
    arr.name = 'bb'
    console.log(arr) //{name: "bb"}
    arr.name = 'cc'
    console.log(arr) //{name: "cc"}
複製程式碼

const除了不可被改變，其他的和let用法相同。\

有錯誤歡迎指出，謝謝觀看。

廣告：
作者github：github.com/webxukai
作者gitee：gitee.com/webxukai
作者微信：e790134972
作者QQ:我想你應該知道了！
作者QQ郵箱：同上，呵呵！

相關文章