1.1 let和const是什么？

用来声明变量或声明常量
1. let代替var，声明变量
2. const声明常量constant
什么是变量，什么是常量？
1. var、let 声明的就是变量，变量一旦初始化之后，还可以重新赋值
2. const声明的就是常量，常量一旦初始化，就不能重新赋值了，否则就会报错

    var username = 'Alex'
    let age = 18;
    const sex = 'male'
    console.log(username,age,sex);

    username = 'ZS'
    age = 28;
    console.log(username,age);
    sex = 'female'

1.2 const

const就是为了那些一旦初始化就不希望重新赋值的情况设计的
const 的注意事项：
1. 使用const声明常量，一旦声明，就必须立即初始化，不能留到以后赋值
2. const声明的常量，允许在不重新赋值的情况下修改它的值
3. 不知道用什么的时候就用const

    // let 错
    let sex = "male";
    sex = "famale"
    console.log(sex);


    const sex = "male";
    sex = "famale"
    console.log(sex);

    // 不可以
    const sex;
    const sex = 'male'

    // 基本数据类型(不)
    const sex = "male"
    sex = "female"

    //引用数据类型
    const person = {username:'Alex'};
    // person = {}; //报错
    person.username = 'ZhangSan';
    console.log(person);

1.3 let、const、var的区别

重复声明
1. 已经存在的变量或常量，又声明了一遍
2. var允许重复声明，let、const不允许

    var a = 1;
    var a = 2;
    console.log(a);

    let a = 1;
    let a = 2;
    console.log(a);

    // 例子
    function func(a) {
        let a = 1;
        func();
    } //报错

变量提升
1. var 会提升变量的声明到当前作用域的顶部
2. 养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用

     var a;
    console.log(a);
    a = 1;
    console.log(a);

    // let const 不存在变量提升
    console.log(a);
    let a = 1;

暂时性死区
1. 只要作用域内存在let、const,他们所声明的变量或常量就自动"绑定"这个区域，不再受到外部作用域的影响
2. let、const存在暂时性死区

    let a = 2;
    function func(){
        console.log(a);
        let a = 1
    } // 报错
    func();

window 对象的属性和方法
1. 全局作用域中，var声明的变量，通过function声明的函数，会自动变成window对象的属性或方法
2. let、const不会

    var age = 18;
    function add(){}
    console.log(window.age);
    console.log(window.add === add);

    let age = 18;
    const add = function(){}
    console.log(window,age);
    console.log(window.add === add);

1.4 let、const的应用

    <button class="btn">0</button>
    <button class="btn">1</button>
    <button class="btn">2</button>
    
    const aBtn = document.querySelectorAll(".btn")
    for(var i = 0;i<aBtn.length;i++){
        aBtn[i].addEventListener('click'),
        function(){
            console.log(i);
        },
        false
    }

1.5 块级作用域

var 没有块级作用域

    for(var i=0;i<3;i++){
        // console.log(i);
    }
    console.log(i);

let/const有块级作用域

    for(let i = 0;i<3;i++){
        // console.log(i);
    }
    console.log(i);

作用域链（内层作用域=>外层作用域=>全局作用域）

    function func(){
        for(let i = 0;i<3;i++){
            console.log(i);
        }
    }
    func();
    console.log(i);

// 有哪些有块级作用域
    {
        let age = 18;
        console.log(age);
    }
    console.log(age);

作用域就三个：全局，函数，块级

    // for(){}
    // while(){}
    // do{}while()
    // if(){}
    // switch(){}
    // {}
    // function(){}

2.1 模板字符串

认识模板字符串

    const username1 = 'alex'
    const username2 = `alex`
    console.log(username1,username2);

模板字符串与一般字符串的区别（和其他东西一起使用的时候，使用模板字符串，方便注入）

    const person = {
        username:'Alex',
        age:18,
        sex:'male'
    }
    // 字符串
    // const info = '我的名字是:'+
    // person.username+'性别:'+
    // person.sex +'今年'+
    // person.age+'岁了'
    // console.log(info);

    const info = `我的名字是：${person.username},性别：${person.sex},今年${person.age}岁了`
    console.log(info);

2.2 模板字符串的注意事项

    // 输入多行字符串 (一般字符串)
    const info = "第一行\n第二行"
    console.log(info);

    // 模板字符串
    const info = `第一行
    第二行`
    console.log(info);
    模板字符串中，所有的空格，换行或缩进都会被保留在输出之中

    // 输出`和\等特殊字符
    const info = `\`\\\'`
    console.log(info);

    // 模板字符串的注入
    // ${}
    const username = 'alex'
    const person = {age:18,sex:'male'}
    const getSex = function(sex){
        return sex === 'male'?'男':'女'
    }
    const info = `${username},${person.age},${getSex(person.sex)}`
    console.log(info);
    // 只要最终可以得出一个值的就可以通过模板字符串${}注入到模板字符串中

2.3 模板字符串的应用

    <p>学生信息表</p>
    <ul id="list">
        <li style="list-style: none;">信息加载中</li>
    </ul>

    // 数据
    const student = [
        {
            username:'Alex',
            age:18,
            sex:'male'
        },
        {
            username:'Zhangsan',
            age:28,
            sex:'male'
        },
        {
            username:'LiSi',
            age:20,
            sex:'female'
        },
    ]
    const list = document.getElementById("list");
    let html = '';
    for(let i = 0;i<student.length;i++){
        html += `<li>我的名字是：${student[i].username},${student[i].sex},
            ${student[i].age}</li>`
    }
    list.innerHTML = html;

3.1 箭头函数

认识箭头函数(参数及函数体部分之间用箭头连接)

    const add = (x,y)=>{
        return x + y
    }
    console.log(add(1,1));

箭头函数的结构
1. const/let 函数名 = 参数 => 函数体 ()=>{}
如何将一般函数改写成箭头函数

    function add(){}
    const add = function(){}

声明形式 ---->函数表达式形式

    const add = function(){}
    const add = ()=>{}

3.2 箭头函数的注意事项

单个参数(x) 单个参数可以省略圆括号

    const add = (x)=>{
        return x + 1
    }

无参数或多个参数不能省略圆括号

    const add = ()=>{
        return 1 + 1;
    }
    console.log(add());// 无

    const add = (x,y)=>{
        return x + y;
    }
    console.log(add(1,1));

单行函数体(单行函数体可以同时省略{}和return)

    const add = (x,y)=>{
        return x + y;
    }
    const add = (x,y) => x + y
    console.log(add(2,1));

多行函数体不能化简

    const add = (x,y) => {
        const sum = x + y;
        return sum;
    }

单行对象

    const add = (x,y) => {
        return {
            value:x+y
        }
    }

如果箭头函数返回单行对象，可以在{}外面加上()，
让浏览器不再认为那是函数体的花括号

    const add = (x,y) => ({
        value:x+y
    })
    console.log(add(1,7));

3.3 this指向1

 // 1. 全局作用域中的this指向
    console.log(this); // window

 // 2. 一般函数(非箭头函数)中的this指向
    function add(){
        console.log(this);
    }
    add()

    function add(){
        console.log(this);
    }
    // add()
    
    const calc = {
        add:add
    };
    calc.add() // 例1/calc

    document.onclick = function(){
        console.log(this);
    }
    document.onclick();// 例2

    function Person(username){
        this.username = username;
        console.log(this);
    }
    const p = new Person('Alex')

只有在函数调用的时候this指向才确定，不调用的时候，不知道指向谁
this指向和函数在哪调用没关系，只和谁在调用有关系

3.4 this指向2

箭头函数中的this指向：箭头函数没有自己的this

    const calcn = {
        add:()=>{
            console.log(this);
        }
    }
    calcn.add() //window

    function add(){
        console.log(this);
    }
    const calc = {
        add:add
    }
    calc.add() // add:f

    const calc = {
        add:function(){
            const adder=() =>console.log(this);
            adder()
        }
    }
    calc.add() // add:f
    
    // const addFn = calc.add;
    // addFn()  // window

3.5 不适用箭头函数的场景

作为构造函数（箭头函数没有this）

    const Person = () => {};
    new Person();

需要this指向调用对象的时候

    document.onclick = function(){
        console.log(this);
    }
    document.addEventListener('click',()=>{
        console.log(this);//window
    },false)

需要使用arguments的时候(剩余参数)

    function add(){
        console.log(arguments);
    }
    add(1,2,3,4,5);
    const add = () => {
        console.log(arguments);
    }

3.6 箭头函数的应用

    <button id="btn">开始</button>
    <span id="result">0</span>
    
    const btn = document.getElementById("btn");
    const result = document.getElementById("result");
    const timer = {
        time : 0,
        start:function(){
            btn.addEventListener('click',()=>{
                setInterval(()=>{
                    console.log(this);
                    // this.time++;
                    // result.innerHTML = this.time
                },1000)
            },false)
        }
    }
    timer.start();

es6

1.1 let和const是什么？

1.2 const

1.3 let、const、var的区别

1.4 let、const的应用

1.5 块级作用域

2.1 模板字符串

2.2 模板字符串的注意事项

2.3 模板字符串的应用

3.1 箭头函数

3.2 箭头函数的注意事项

3.3 this指向1

3.4 this指向2

3.5 不适用箭头函数的场景

3.6 箭头函数的应用