5.18 es6新增及动画效果

# ES6的新增
1. 新增的声明关键字：let和const
    - let和const
        1. 没有提升
        2. 不允许重复声明
        3. 块级作用域
        4. 暂时性死区
        5. 全局变量，不会绑定window
    - const
        1. 不允许修改地址，可以改变值
            - 作为常量使用
            - 注意：复杂数据和一般数据的区别
2. 箭头函数
    - 基础语法
        ```js
        var sayHello = (name)=>"hello"+name;
        sayHello("张三");
        ```
    - 特点
        0. 类似于无名函数，只能作为值使用
        1. 没有自己的this
        2. 有且只有一个参数时，可以省略小括号
        3. 有且直接返回数据时，可以省略花括号和return
        4. 当，有且直接返回对象时，并，省略花括号和return时，需要将对象使用小括号括起来
        5. 语义化不好，伤害了代码的可读性
        6. 不能new
        7. 小范围的作为返回值，参数，值使用，比较方便
3. 函数的默认参数
    - 在函数定义时的小括号中，可以给形参赋值，赋的这个值，就是当前参数的默认值
    ```js
    function fn(a="456"){
        // a = a || "123";
        console.log(a);
    }
    fn();
    fn("hello");
    ```

4. 解构赋值
    - 解开结构，单独赋值
    - 数组
        - 数组是数据的有序集合，所以在解构赋值时，变量之间有顺序，从左向右依次解析，没有了，就是undefined
        ```js
        var [a,b,c] = ["hello","world",123];
        ```
    - 对象
        - 对象是数据的无序集合，所以在解构赋值时，变量之间没有顺序，找到对象中的key 了，就赋值，没有找到就是undefined
        ```js
        var {name,sex,age} = {name:"张三",age:18,sex:1}
        ```
    - 字符，因为字符类似于数组
        - 字符也算是数据的有序集合，所以在解构赋值时，变量之间有顺序，从左向右依次解析，没有了，就是undefined
        ```js
        var [a,b,c] = "hello";
        ```

5. 模板字符串
    - 回顾单双引号字符串的特点
        - 不允许换行，如果要换行，必须每行都是完整的字符串，还得用+连接
    - 字符串的新的表达方式：反引号：`
        - 允许换行
        - 可以不用+号拼接，在反引号内，使用${}包裹变量
        - 也可以使用+号拼接，只是没必要了
    - 如：
        ```js
        var str = `<ul>
                    <li>"${name}"</li>
                    <li>'${name}'</li>
                    <li>${name}</li>
                    <li>${1+1}</li>
                    <li>${fn()}</li>
                    <li>${false ? "hello" : "wrold"}</li>
                </ul>`;
        console.log(str);
        var obox = document.getElementById("box");
        obox.innerHTML = str;
        ```
6. 展开运算符
    - ...
    - 展开运算符必须在能够接收多个数据的位置使用
        - 展开数组，要在能够接收多个数据时使用
            - 传参，合并数组
            ```js
            // 快速实现数组合并
            var arr2 = [2,3,4,arr];
            var arr2 = [2,3,4,...arr];
            console.log(arr2);
            // 函数的参数
            function fn(a,b,c){
                console.log(a,b,c)
            }
            fn(...[3,4,5]);
            ```
        - 展开对象，要在能够接收多个键值对时使用
            - 合并对象
            ```js
            var obj = {
                name:"admin",
                age:18
            }
            var obj2 = {
                sex:"男",
                ...obj
            }
            console.log(obj2);
            ```

7. 对象的简单写法
    - 当对象的value是变量，且key和这个变量重名时，可以缩写
    - 当对象的value是函数时，可以直接：函数名(){}
    ```js
    var name = "admin";
    var age = 18;
    var obj = {
        name,
        age,
        fn(){
            console.log(this.name)
        }
    }
    console.log(obj)
    obj.fn()
    ```

 

 

# DOM的高级应用 - 动画
0. 什么是动画
    - 谁，动起来，频率，步长，什么时候结束

1. 动画的要素
    - 运动源：正在运动的事物
    - 频率：每个单位时间
    - 步长：每个单位时间内做出来的改变
    - 停止条件：什么时候结束

2. 频率的限制
    - 人眼能识别的最少频率是24
        - 一秒钟切换连续的24张图片，就是动画
        - 毫秒数，多长时间切换一个效果
        - 时间越短，效果越好
        - 浪费的性能越多，页面也不一定能够响应
        - 20~40
        - 30

3. 动画
    - 简单动画-匀速动画
    - 缓冲动画-减速动画
        - 刹车
        - 请参考缓冲运动的封装过程