ES6指北【1】——let、const

tain335 發布于2019-08-01 18:35 / 753人閱讀

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

1.如何學習ES6 1.1 js的學習順序

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

ES5沒學好就別想學好ES6

1.2 邊學邊用

學了就要用

2.變量聲明的方式

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

2.0 塊級作用域 {}

看mdn

2.1 a = 1 會聲明一個全局變量嗎？

    var a

    function fn1() {
        var a
        fn2

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

    fn1()

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

2.2 var 的問題

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

    fn()

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

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

2.3 let 2.3.1 let的由來

下面我我們來寫段代碼
目的是只暴露一個全局變量 blues
用var來寫
1.需要一個立即執行函數 2.需要一個函數把a包起來

    (
        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 的特點

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

let不能重復聲明【。。就算用var也不會有人重復聲明把^_^】

使用let聲明的變量在塊級作用域內能強制執行更新變量【看mdn最后一個for循環例子】

let的臨時死區【temp dead zone】—— 如果你在 let a 之前使用a，報錯

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

test

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

// answer:a is not defined

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

2.4 const

const和let一樣，只有一個區別 —— 只有一次賦值機會，且必須在聲明的時候就賦值
const:英文意思常量 —— 固定一個值

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

用const的情況

    {
        const PI = 3.1415926
    }

3.let的擴展

用let解決for循環中onclick問題

HTML部分


    導航1
    導航2
    導航3
    導航4
    導航5
    導航6

JS部分

先看用var來寫

    var liTags = document.querySelectorAll("li")

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

mdn的寫法

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

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

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

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

4.永遠別再用var了:)

GPU云服務器云服務器指北入坑指北 Lets Let

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51845.html

ES6指北【1】——let、const

摘要：如何學習的學習順序以此類推沒學好就別想學好邊學邊用學了就要用變量聲明的方式上面兩個是的語法，下面兩個是的語法塊級作用域看會聲明一個全局變量嗎顯然當聲明了全局變量后，是無法再聲明全局變量的，只能對其賦值結論含義不明的問題下面的代碼不會執 1.如何學習ES6 1.1 js的學習順序 ES5 -> ES6 -> ES7 -> ES8 以此類推 ES5沒學好就別想學好ES6 1.2 邊學邊用 ...

張春雷 2019-08-26 11:45 評論0 收藏0
ES6指北【3】——5000字長文帶你徹底搞懂ES6模塊

摘要：模塊什么是模塊什么是模塊化玩過游戲的朋友應該知道，一把裝配完整的步槍，一般是槍身消音器倍鏡握把槍托。更重要的是，其它大部分語言都支持模塊化。這一點與規范完全不同。模塊輸出的是值的緩存，不存在動態更新。 1.模塊 1.1 什么是模塊？什么是模塊化？玩過FPS游戲的朋友應該知道，一把裝配完整的M4步槍，一般是槍身+消音器+倍鏡+握把+槍托。如果把M4步槍看成是一個頁面的話，那么我們可以...

ygyooo 2019-08-23 10:52 評論0 收藏0
ES6指北【6】——詳談解構賦值【附贈練習題】

摘要：指北詳談解構賦值附贈練習題一何謂解構賦值基本概念首先我們看一下給的定義解構賦值語法是一個表達式，這使得可以將值從數組或屬性從對象提取到不同的變量中從定義中，我們可以發現解構賦值的作用是對變量進行賦值主要通過兩個方面實現這個作用數組將數組中的 ES6指北【6】——詳談解構賦值【附贈練習題】一、何謂解構賦值？ 1. 基本概念首先我們看一下MDN給的定義解構賦值語法是一個 Javasc...

sorra 2019-08-23 11:33 評論0 收藏0
ES6指北【4】——ES6的函數參數處理，超乎你想象

摘要：參數搭配的變量是一個數組，該變量將多余的參數放入數組中。從上面的概念中，我們至少可以知道如下三個信息語法變量。一、函數的默認參數值 1. ES6之前，我們如何實現函數默認參數 1.1 方式一：使用邏輯運算符【||】 function test(x) { x = x || 默認值 // 使用||設置默認值 console.log(x) } test() // 默認值但這樣...

Pandaaa 2019-08-23 11:01 評論0 收藏0
ES6指北【2】—— 箭頭函數

摘要：箭頭函數基本語法函數語法具名函數匿名函數三句話第一句話聲明第二句話聲明匿名函數第三句話把匿名函數賦值給箭頭函數語法特點只能做賦值，不能做聲明第一種寫法完全寫法不省略參數個數，不省略函數體花括號參數個數函數體內語句個數第二種寫法省略參數括號參 1.箭頭函數基本語法 1.1 ES3 函數語法 // 具名函數 function xxx(arg1, arg2) { console.lo...

DobbyKim 2019-08-22 14:57 評論0 收藏0