ES6指北【1】——let、const

張春雷發(fā)布于2019-08-26 11:45 / 1694人閱讀

摘要：如何學(xué)習(xí)的學(xué)習(xí)順序以此類推沒學(xué)好就別想學(xué)好邊學(xué)邊用學(xué)了就要用變量聲明的方式上面兩個(gè)是的語法，下面兩個(gè)是的語法塊級作用域看會(huì)聲明一個(gè)全局變量嗎顯然當(dāng)聲明了全局變量后，是無法再聲明全局變量的，只能對其賦值結(jié)論含義不明的問題下面的代碼不會(huì)執(zhí)

1.如何學(xué)習(xí)ES6 1.1 js的學(xué)習(xí)順序

ES5 -> ES6 -> ES7 -> ES8 以此類推

ES5沒學(xué)好就別想學(xué)好ES6

1.2 邊學(xué)邊用

學(xué)了就要用

2.變量聲明的方式

    a = 1
    var a = 1
    // 上面兩個(gè)是ES3的語法，下面兩個(gè)是ES6的語法
    let a = 1
    const a = 1

2.0 塊級作用域 {}

看mdn

2.1 a = 1 會(huì)聲明一個(gè)全局變量嗎？

    var a

    function fn1() {
        var a
        fn2

        function fn2() {
            a = 1
            console.log(window.a) // undefined
        }
    }

    fn1()

顯然當(dāng)var聲明了全局變量后，a = 1 是無法再聲明全局變量的，只能對其賦值
結(jié)論：a = 1 含義不明

2.2 var 的問題

    function fn() {
        if (true) {
            console.log(a) // undefined
        } else {
            // 下面的代碼不會(huì)執(zhí)行
            var a
            console.log(a)
        }
    }

    fn()

哪怕var沒有被執(zhí)行，變量也會(huì)被提升
也就是說 var聲明的變量沒有塊級作用域 , 而js程序員為了讓var有塊級作用域，通常使用的方式是立即執(zhí)行函數(shù)

所有的var建議寫在第一行 —— 《js語法精髓》

2.3 let 2.3.1 let的由來

下面我我們來寫段代碼
目的是只暴露一個(gè)全局變量 blues
用var來寫
1.需要一個(gè)立即執(zhí)行函數(shù) 2.需要一個(gè)函數(shù)把a(bǔ)包起來

    (
        function () {
            var a = 1

            window.blues = function () {
                console.log(a) // 1
            }
        }
    )()

用let來寫

    {
        let a = 1
        window.blues = function () {
            console.log(a) // 1
        }
    }
    blues()
    console.log(a) // a is not defined

let 的特點(diǎn)

let的作用域在最近的 {} 之間

let不能重復(fù)聲明【。。就算用var也不會(huì)有人重復(fù)聲明把^_^】

使用let聲明的變量在塊級作用域內(nèi)能強(qiáng)制執(zhí)行更新變量【看mdn最后一個(gè)for循環(huán)例子】

let的臨時(shí)死區(qū)【temp dead zone】—— 如果你在 let a 之前使用a，報(bào)錯(cuò)

    {
        let a = 1
        {
            console.log(a) // a is not defined
            let a = 2
        }
    }
    // 這培養(yǎng)了我們一個(gè)好習(xí)慣 —— 所有的變量聲明都要寫在前面

test

if (true) {
    let a = 1
} else {
    let a = 2
}
console.log(a) // ???

// answer:a is not defined

簡單理解let —— let就看它在哪個(gè)花括號里

2.4 const

const和let一樣，只有一個(gè)區(qū)別 —— 只有一次賦值機(jī)會(huì)，且必須在聲明的時(shí)候就賦值
const:英文意思常量 —— 固定一個(gè)值

    {
        const a = 1
        console.log(a) // 1
        a = 2
        console.log(a) // 報(bào)錯(cuò) —— Assignment to constant variable.[給常量賦值（是錯(cuò)的）]
    }

用const的情況

    {
        const PI = 3.1415926
    }

3.let的擴(kuò)展

用let解決for循環(huán)中onclick問題

HTML部分


    導(dǎo)航1
    導(dǎo)航2
    導(dǎo)航3
    導(dǎo)航4
    導(dǎo)航5
    導(dǎo)航6

JS部分

先看用var來寫

    var liTags = document.querySelectorAll("li")

    for (var i = 0; i < liTags.length; i++) {
        // 使用立即執(zhí)行函數(shù)，var j 就不會(huì)跑到外面去(不會(huì)被提升)
        (function () {
            var j = arguments[0]
            liTags[j].onclick = function () {
                console.log(j)
            }
        })(i)
    }

mdn的寫法

    for (let i = 0; i < liTags.length; i++) {
        // 注意i的作用域就在上面的 () 里
        // 不過for循環(huán)在使用let的時(shí)候自動(dòng)做了一個(gè)魔法
        // let j = i // js自動(dòng)加的

        // 過程是這樣的
        // 下面這3行代碼執(zhí)行之前 —— 塊里面的i = ()里面的i
        liTags[i].onclick = function () {
            console.log(i)
        }
        // 上面3行代碼執(zhí)行后 —— ()里面的i = 塊里面的i
    }

如果我的解釋你看不懂的話，希望你能看懂下面的代碼

    for (var _i = 0; _i < liTags.length; _i++) {
        let j = _i
        liTags[j].onclick = function () {
            console.log(j)
        }
    }

4.永遠(yuǎn)別再用var了:)