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