ES6（二）

1、重点内容

1.1 箭头函数

语法：(参数)=>{函数体}

目的：为了在使用回调函数的时候更便捷

let fn = () => {
            console.log('fn');
        }
fn()

注意：

​ 1、声明一个无参无返的箭头函数

​ 函数体只有一句话可以省略{}不写

 let fn1 = () => console.log('fn1');
fn1()

​ 2、声明一个无参有返的箭头函数

​ 函数体只有一句话可以省略return不写

 let fn2 = () => 'fn2'
 console.log(fn2());

​ 3、声明一个有参数无返回值的箭头函数

​ 参数只有一个可以省略（）不写

let fn4 = b => console.log(b);
fn4(3)

​ 4、声明一个有参有返回值的箭头函数

​ 注意点同上

let fn3 = a => a
console.log(fn3(4));

​ 5、声明一个多个参数，多行代码的箭头函数

​ 不能省略

let fn5 = (x, y) => {
            var sum = x + y
            console.log(sum);
        }
fn5(4, 6)

​ 6、声明一个有返回值箭头函数,函数体只有一句话并且返回的是一个对象

​ 不可以省略

let fn6 = (n, m) => {
            return { g: n, h: m }
        }
console.log(fn6(4, 5));

​ 7、箭头函数中使用arguments(不可以使用),可以使用rest参数

let fn7 = (...rest) => {
            console.log(rest);
        }
fn7(1, 5.5, 3)

1.2 统计this指向问题

​ 1、指向window的this

​ 全局打印this全局函数中打印this在全局调用 定时器(因为是window中的方法)

​ 2、指向事件源(在事件中使用)

​ 3、对象中的方法里面使用this ,遵循对象.方法 的调用this指向该对象

​ 4、箭头函数中的this,没有固定的作用域(没有写之前没有固定,一旦写了之后就固定在当前的外层)，指向外层作用域

​ (let关键字将变量挂载到script中)

1.3 Promise状态方法

Promise 是异步编程的一种解决方案

一个 Promise 对象 有以下几种状态：

• pending: 初始状态，既不是成功，也不是失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

Promise的回调函数中有两个参数，这两个参数也是函数

resolve(): 此方法调用表示这个Promise是成功状态，状态由pending->fulfilled

reject(): 此方法调用表示这个Promise是失败状态，状态由pending->rejected

特点：
1、状态不受外界干扰
2、一旦改变就会凝固，不会再次改变状态

        /* 
            Promise Object Number
            搭配new关键字使用
        */
        let p1 = new Promise((resolve,reject)=>{
            // resolve();
            reject()
        })
        console.log(p1);

1.4 Promise解决回调地狱

回调地狱弊端：不易维护 不易拓展（ajax不断访问）

​ 1、ajax请求几次数据，声明几次Promise()内置构造函数

​ 2、利用then()方法链式调用函数

在链式调用中下一次的.then方法，会作用于上一次.then里面返回的对象，假如没有返回对象，会作用到.then方法返回的Promise中（是这个promise对象内部调用resolve时候的实际参数）

         // 未封装Promise写法
        let p1 = new Promise((resolve, reject) => {
            $.ajax({
                url: 'http://kumanxuan1.f3322.net:8809/travels/query',
                success(res) {
                    resolve(111)
                },
                error(err){
                    reject(err)
                }
            })
        })
        let p2 = new Promise((resolve, reject) => {
            $.ajax({
                url: 'http://kumanxuan1.f3322.net:8809/travels/query',
                success(res) {
                    resolve(222)
                }
            })
        })
        let p3 = new Promise((resolve, reject) => {
            $.ajax({
                url: 'http://kumanxuan1.f3322.net:8809/travels/query',
                success(res) {
                    resolve(333)
                }
            })
        })
        p1.then(res => {
            console.log(res);
            return p2;
        }).then(res => {
            console.log(res);
            return p3
        }).then(res => {
            console.log(res);
        })

       // 封装多重请求的Promise
       function myPromise(url) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url,
                    success(res) {
                        resolve(url)
                    }
                })
            })
        }
        let p1 = myPromise('http://kumanxuan1.f3322.net:8809/travels/query')
        let p2 = myPromise('http://kumanxuan1.f3322.net:8809/strategies/themes')
        let p3 = myPromise('http://kumanxuan1.f3322.net:8809/index/banners/travel')
        // 倒序打印(可以控制请求顺序)
        p3.then(res => {
            console.log(res);
            return p2
        }).then(res => {
            console.log(res);
            return p1
        }).then(res => {
            console.log(res);
        })

1.5 Promise方法

​ all()方法: 可以将多个Promise对象打包处理（数组形式），会按照数组传参的顺序执行，只能打包处理成功的 有一个失败就直接失败了

​ race()方法: 是哪个快返回谁（不论成功或失败）

​ then()方法：第一个参数表示成功的Promise对象结果，第二个参数表示失败的异常

        p1.then(res => {
            console.log(res);
        }, err => {
            console.log(err);
        })

​ catch()方法：捕获所有异常情况

1.6 异步代码同步化

​ async 修饰函数

​ await 等待，后面一般跟着一个异步操作

​ (上述是语法糖 外面包裹了一层糖衣里面本质还是Promise的.then的执行)

​ 当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句

      async function asyncFn(){
            let res1 = await P1
            let res2 = await P2
            console.log('函数内的普通打印');
            console.log(res2);
            let res3 = await P3
            console.log(res3);
      }

2、需要理解的内容

2.1 定时器第三个参数

​ 及以后的参数是给定时器中的回调函数传的实参

2.2 map方法

​ map()方法: 处理数组的数据将数据按照自己想要的返回（以数组或其他的形式返回）

 let ret = arr.map(item => item * 2)
 console.log(ret);