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 的特点

1. let的作用域在最近的 {} 之间
2. let不能重复声明【。。就算用var也不会有人重复声明把^_^】
3. 使用let声明的变量在块级作用域内能强制执行更新变量【看mdn最后一个for循环例子】
4. 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部分

<ul>

    <li>导航1</li>

    <li>导航2</li>

    <li>导航3</li>

    <li>导航4</li>

    <li>导航5</li>

    <li>导航6</li>

</ul>

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了:)