简答题

一、谈谈你是如何理解JS异步编程的，EcentLoop、消息队列都是做什么的，什么是宏任务，什么是微任务？

• JS 异步编程：
  • 解答：
           JavaScript语言的执行环境是单线程，单线程是指一次只能完成一个任务，如果有多个任务，则需要排队，等待前一个任务完成后，才能开始后一个任务。基于这种原因而产生了两种执行任务的模式：同步模式和异步模式，且随着JavaScript面临的需求要来越多，它可以运行在浏览器、服务器上等，为了满足这些需求，使得JavaScript的规模和复杂性也在持续增长，所以JavaScriptd中的异步编程也在不断地调整，往更友好的方向发展，JavaScript异步编程经历了回调函数、Promise、生成器函数Generator、以及现在Async/Await等几个发展阶段。
           在第一阶段使用的是回调函数，它是最基本的异步操作方式，以Ajax请求最为常见,它是最简单、容易理解和实现的异步编程；但是不利于代码的阅读和维护，各部分之间高度耦合，使得程序结构混乱，流程难以追踪，每个任务只能指定一个回调函数，不能使用try catch捕获错误，不能直接return，且极易出现回调地狱导致的调式困难，以及控制反转导致的一系列信任问题

ajax(urlA, () => {
    // 处理逻辑
    ajax(urlB, () => {
        // 处理逻辑
        ajax(urlC, () => {
            // 处理逻辑
        })
    })
})

       在第二阶段引入了Promise，它是ES6推出的一种异步编程的解决方案。Promise是承诺的意思，这个承诺在未来某个时刻会有一个确定的答复，该承诺有三种状态：等待中（pending）、完成（resolved）、拒绝（rejected）。Promise是个构造函数，接受一个函数作为参数。作为参数的函数有两个参数：resolve和reject，分别对应完成和拒绝两种状态。我们可以选择在不同时候执行resolve或reject去触发下一个动作，执行then方法里的函数。Promise实现了链式调用，每次调用then之后返回的都是一个Promise对象，如果在then使用了return，return返回的值会被Promise.resolve()包装。它很好的解决了回调函数中的回调地狱，解决了控制反转导致的信任问题，将代码的执行主动权拿了回来；但是Promise一旦状态从等待改变为其他状态就不再可变了,还有如果不设置回调函数，Promise内部抛出的错误。

new Promise((resolve, reject) => {   
    console.log('new Promise');   
    resolve('success'); }) 
    console.log('end');

       第三阶段使用生成器函数Generator，它是一种特殊的函数，其最大的特点是控制函数的执行。可以让我们用同步的方式写代码，可以分步执行并得到异步操作的结果，能够知晓异步操作的过程，以及切入修改异步操作的过程。但是需要手动去控制next(...)，将回调成功的返回数据送回JavaScript的主流程中；

function *foo(x) {
  let y = 2 * (yield (x + 1));
  let z = yield (y / 3);
  return (x + y + z);
}
let it = foo(5);
console.log(it.next());   // => {value: 6, done: false}
console.log(it.next(12)); // => {value: 8, done: false}
console.log(it.next(13));// => {value: 42, done: true}

       最新阶段的Async/Await异步处理编程，其中async函数返回一个 Promise 对象，就是将函数返回使用Promise.resolve()，和then处理返回值一样，可以使用then方法添加回调函数。await后边一般跟Promise对象，async函数执行遇到await后，等待后面的Promise对象的状态从pending变成resolve后，将resolve的参数返回并自动往下执行直到下一个await或结束。它解决了Generator需要手动控制next(...)执行的问题。但它存在一个缺陷是如果多个异步代码没有依赖性却使用了await会导致性能降低。

async function test() {
    console.log('1')
}
console.log(test)   // Promise {<resolve>: "1"}

       整个异步过程都是通过内部的消息队列和事件循环实现的
       每个阶段的突破都是为了解决现有阶段的技术问题，异步编程的发展也是一个循序渐进的过程。

• EventLoop、消息队列：
  • 解答：
           事件循环机制和消息队列的维护是由事件触发线程控制的，事件触发线程是由浏览器渲染引擎提供的，它会维护一个消息队列
           EventLoop是事件循环，主要负责监听调用栈（执行栈）和消息队列（任务队列），一旦调用栈中所有的任务都结束了，事件循环就会从消息队列中取出第一个回调函数，然后压入到调用栈中，一旦消息队列中发生了变化，事件循环就会监听到
           消息队列：消息队列是类似队列的数据结构，遵循先入先出(FIFO)的规则。如果把调用栈理解为正在执行的工作表，那么消息队列则可以理解成待办的工作表，JS引擎会先做完调用栈中所有的任务，然后通过事件循环从消息队列中再取一个任务出来继续执行，以此类推，整个过程随时可以往消息队列中再去放任务，这些任务在消息队列中会排队等待事件循环
           事件循环机制：
               1.JS引擎线程会维护一个执行栈，同步代码会依次加入执行栈中，然后依次执行并出栈
               2.JS引擎线程遇到异步函数，会将异步函数交给相应的WebApi,并继续执行后面的任务
               3.WebApi会在条件满足的时候，将异步对应的回调加入到消息队列中，等待执行
               4.执行栈为空时，JS引擎线程会去取消息队列中的回调函数（如果有的话），并加入到执行栈中执行
               5.完成后出栈，继续执行4的操作，直至消息队列中的回调函数为空，以上便是事件循环的机制
• 宏任务、微任务
  • 解答：
           在JS中，有两类任务队列：宏任务队列（macrotask）和微任务队列（microtask），宏任务可以由多个，微任务只有一个
    • macrotask：主代码块、setTimeout、setInterval、setImmediate、I/O、UI rendering等（可以看到，事件队列中的每一个事件都是一个 macrotask，现在称之为宏任务队列）
    • microtask：Promise、process.nextTick、Object.observer等

       每次执行栈执行的代码即是一个宏任务，包括任务队列(宏任务队列)中的，因为执行栈中的宏任务执行完后会去取任务队列（宏任务队列）中的任务加入执行栈中
       在执行宏任务时遇到Promise等，会创建微任务（.then()里面的回调），并加入到微任务队列队尾；微任务必然是在某个宏任务执行的时候创建的，而在下一个宏任务开始之前，浏览器会对页面重新渲染。同时，在上一个宏任务执行完成后，渲染页面之前，会执行当前微任务队列中的所有微任务。
       执行机制
           1.执行一个宏任务（执行栈中没有就从消息队列中获取）
           2.执行过程中如果遇到微任务，就将微任务添加刀微任务的任务队列中
           3.宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
           4.当前宏任务执行完毕，开始检查渲染，然后GUI接管渲染
           5.喧渲染完毕后，JS引擎线程继续，开始下一个宏任务（从宏任务队列中获取）

代码题

一、将下面异步代码使用Promise的方式改进

异步代码.png
解答：使用Promise的方式改进实现如下：

// 使用Promise改进setTimeout异步代码
new Promise((resolve, reject) => {
    resolve('hello')
}).then(value => {
    return value + ' ' + 'lagou' // value = hello 
})
.then(value => {
    return value + ' ' + 'I ♥ U'  // value = hello lagou 
})
.then(value => {
    console.log(value)   // hello lagou I ♥ U
})

二、基于以下代码完成四个练习

代码1-题目.png
代码2-题目.png

练习1：使用组合函数fp.flowRight()重新实现下面这个函数

练习1-题目.png
解答：fp.flowRight()重新实现如下：

//练习1
let isLastInstock = fp.flowRight(fp.prop('in_stock') , fp.last)
console.log(isLastInstock(cars)) //false   即最后一条数据的in_stock属性值为fase

练习2：使用fp.flowRight()，fp.prop()，fp.first()获取第一个car的name

解答：获取第一个car的name实现如下：

// 练习2
let getFirstCarName = fp.flowRight(fp.props('name'), fp.first)
console.log(getFirstCarName(cars))  //[ 'Ferrari FF' ]

练习3：使用帮助函数_average()重构averageDollarValue,使用函数组合方式实现

练习3-题目.png
解答：重构averageDollarValue实现如下：

let averageDollarValue = fp.flowRight(_average,fp.map(car => car.dollar_value))
console.log(averageDollarValue(cars))  //790700

练习4：使用flowRight写一个sanitizeName()函数，返回一个下划线连接的小写字符串，把数组中的name转换为这种形式，例如:sanitizeName（["Hello World"]) => ["hello_world"]

练习4-题目.png
解答：使用flowRight写一个sanitizeName()函数实现如下：

// 练习4
let _underscore = fp.replace(/\W+/g, '_')

//先遍历数组把里面字符串转成小写，在遍历数组将非单字字符转换成下划线
let sanitizeName1 = fp.flowRight( fp.map(_underscore), fp.map(fp.toLower))
//遍历数组中使用fp.flowRight组合函数，先转换成小写，再将非单字字符转换成下划线
let sanitizeName2 = fp.flowRight( fp.map(fp.flowRight(_underscore, fp.toLower)))
console.log(sanitizeName2(["Hello World",'LaGou Study']))  //[ 'hello_world', 'lagou_study' ]

三、基于下面提供的四个代码，完成后续的四个练习

代码1-题目.png
代码2-题目.png
代码3-题目.png

练习1：使用fp.add(x,y)和fp.map(f,x)创建一个能让functor里的值增加的函数ex1

练习1-题目.png
解答：让functor里的值增加的函数实现如下：

// 练习1
let ex1 = () => {
    return fp.map(fp.add(1), maybe.map(x => x)._value)
}
console.log(ex1())  //[ 6, 7, 2 ]

练习2：实现一个函数ex2，能够fp.first获取列表的第一个元素

练习2-题目.png
解答：获取列表的第一个元素实现如下：

//练习2
let xs = Container.of(['do', 'ray', 'me', 'fa', 'so', 'la', 'ti', 'do'])

let ex2 = () => {return fp.first(xs.map(x => x)._value)}
console.log(ex2())  //do

练习3：实现一个函数ex3，使用safeProp和fp.first找到user的名字的首字母

练习3-题目.png
解答：使用safeProp和fp.first找到user的名字的首字母实现如下：

// 练习3
let safeProp = fp.curry(function (x, o){
    return Maybe.of(o[x])
})
let user = {id: 2, name: 'Albert'}
let ex3 = () => {
    return fp.first(safeProp(Object.keys(user).indexOf('name'),Object.values(user))._value)
}
console.log(ex3()) //A

练习4：使用MayBe重写ex4，不要有if语句

练习4.png

// 练习4
let ex4 = function (n) {
    if(n){
        return(parseInt(n))
    }
}

let ex5 = n =>{
    return Maybe.of(n)._value 
}

let ex6 = n =>{
    return !!n? Maybe.of(n)._value : undefined
}
console.log(ex4(''))
console.log(ex5(''))
console.log(ex6(''))
注：ex5的写法会在空字符串和null的时候导致输出和ex4,ex6不一样

四、手写实现MyPromise源码

要求:尽可能还原Promise中的每一个API，并通过注释的方式描述思路和原理

MyPromise源码（myPromise.js)

/*由于这个状态频繁使用，为了使用这个常量时编辑器有代码提示并能够复用，故把它定义为常量*/
const PENDING = 'pending'  //等待
const FULFILLED = 'fulfilled'  //成功
const REJECTED = 'rejected'  //失败

class MyPromise{
    //构造函数  ==》 立即执行执行器  ==》 指的是传递过来的回调函数
    constructor(executor) {

        // 执行器错误处理 当执行器中代码在执行过程中发生错误的时候，这个时候就让promise状态变成失败
        try{
            executor(this.resolve, this.reject)
        }catch (e) {
            //捕获执行器的错误
            this.reject(e)
        }
    }

    /*状态是每个promise对象独有的，故因该把状态属性定义为实例属性*/
    status = PENDING   //promise状态  ===》 默认值为等待

    //由于每个promise对象都有自己成功之后的值，都有自己失败的原因，故应该把这两个属性定义为实例的属性
    value = undefined  //成功之后的值
    reason = undefined //失败后的原因

    //由于then方法可能会被多次调用，联想到数组能够同时存储多个函数 故在这里将属性定义为数组
    successCallback = [] //成功回调
    failCallback = []    //失败回调

    //定义为箭头函数的目的：将来在直接调用某个普通函数时，这个函数的this指向是window或者undefined,为了能让this的指向为类的实例对象即promise对象，故而使用箭头函数
    resolve = value => {

        //为了确保状态确定后就不可更改，需加以判断
        //如果状态不是等待，阻止程序向下执行
        if(this.status !== PENDING) return

        //将状态更改为成功
        this.status = FULFILLED

        //将传递过来的值进行赋值 ==》 保存成功后的值
        this.value = value

        //判断成功回调是否存在 如果存在 则调用并传递相应的参数
        //数组中存储了多个回调函数，我们需要循环遍历这个数组，并在循环的过程中调用这个回调函数
        //当数组的长度不为0时，就继续执行循环体中的代码
        //考虑到需要从前往后执行，故调用数组的shift方法，把前面的回调函数弹出来
        while(this.successCallback.length) this.successCallback.shift()()
    }

    reject = reason => {

        //为了确保状态确定后就不可更改，需加以判断
        //如果状态不是等待，阻止程序向下执行
        if(this.status !== PENDING) return

        //将状态更改为失败
        this.status = REJECTED

        //将传递过来的值进行赋值 ==》 失败后的原因
        this.reason = reason

        //判断失败回调是否存在 如果存在 则调用并传递相应的参数
        //数组中存储了多个回调函数，我们需要循环遍历这个数组，并在循环的过程中调用这个回调函数
        //当数组的长度不为0时，就继续执行循环体中的代码
        //考虑到需要从前往后执行，故调用数组的shift方法，把前面的回调函数弹出来
        while(this.failCallback.length) this.failCallback.shift()()
    }

    //then要被定义在原型对象中，并接受成功回调和失败回调两个参数
    then (successCallback, failCallback){

        //在调用then方法不传递任何参数的时候，要将最先的成功状态依次传递给有回调函数的then方法
        successCallback = successCallback? successCallback : value => value
        failCallback = failCallback? failCallback : reason => {throw reason}

        //then要实现链式调用，then方法必须返回promise对象，上一个回调的返回值传递给下一个then成功的回调
        let promise2 = new MyPromise((resolve, reject)=>{

            //判断状态并调用对应的回调函数并传递相应的参数
            if(this.status === FULFILLED){

                //由于promise2还没被实例完，在实例过程中获取不到，故使用异步实现，让同步代码先实现，再来执行异步代码，这时候就能获取到promise2
                setTimeout(()=>{

                    //then方法中的回调函数在执行过程中报错，这个错误要在下一个then的reject中捕获到
                    try{
                        let x = successCallback(this.value)
                        resolvePromise( promise2, x, resolve, reject)
                    }catch (e) {
                        //捕获then回调的错误
                        reject(e)
                    }
                }, 0)
            }else if(this.status ===REJECTED){

                //由于promise2还没被实例完，在实例过程中获取不到，故使用异步实现，让同步代码先实现，再来执行异步代码，这时候就能获取到promise2
                setTimeout(()=>{

                    // then方法中的回调函数在执行过程中报错，这个错误要在下一个then的reject中捕获到
                    try{
                        let x = failCallback(this.reason)
                        resolvePromise( promise2, x, resolve, reject)
                    }catch (e) {
                        //捕获then回调的错误
                        reject(e)
                    }
                }, 0)
            }else{

                //说明当前状态等待，但不知是调用成功还是失败的回调
                //故将成功回调和是失败回调存储起来
                this.successCallback.push(() => {
                    successCallback()
                    setTimeout(()=>{
                        try{
                            let x = successCallback(this.value)
                            resolvePromise( promise2, x, resolve, reject)
                        }catch (e) {
                            //捕获then回调的错误
                            reject(e)
                        }
                    }, 0)
                })
                this.failCallback.push(() => {
                    setTimeout(()=>{
                        try{
                            let x = failCallback(this.reason)
                            resolvePromise( promise2, x, resolve, reject)
                        }catch (e) {
                            //捕获then回调的错误
                            reject(e)
                        }
                    }, 0)
                })
            }
        });
        return promise2
    }

    //无论当前这个promise对象最终的状态是成功还是失败，finally中的这个回调函数始终都会执行一次e
    //在finally方法的后面可以链式的调用then方法拿到当前这个promise对象返回的结果
    finally (callBack){
        //如何得到当前promise对象的状态  ==》 this.then方法可以
        return this.then(value=>{
            //在finally中return了一个promise对象
            return MyPromise.resolve(callBack()).then(()=>value)
        },reason=>{
            return MyPromise.resolve(callBack()).then(()=> {throw reason})
        })
    }

    //用于当前promise对象失败的情况，如果没有传递失败的回调函数，则会被catch捕获到
    catch(failCallback){
        return this.then(undefined, failCallback)
    }

    // all方法是用来解决异步并发问题的，它允许我们按照异步代码调用的顺序得到异步执行的结果
    // all的返回值也是一个promise对象，在后面可以链式对用then方法
    // 在all中的promise对象都是成功的，那么all最后的结果也是成功，如果有一个失败，那么结果就是失败的
    // 通过类调用，故为静态方法,该方法接收一个数组作为参数
    static all (array){
        let results = []
        let index = 0

        return new MyPromise((resolve, reject) => {
            function addData(key, value) {
                results[key] = value
                index++
                // 针对异步情况下，判断index的值和数组的长度相等，说明数组中所有的内容都执行完了，从而而决定是否调用resolve回调函数
                if(index === array.length){
                    resolve(results)
                }
            }

            //循环该数组
            for(let i = 0; i < array.length; i++){
                let current = array[i]
                if(current instanceof MyPromise){
                    //promise对象，若成功的话将成功的值添加到数组中，若有一个失败的话失败的话则将失败的原因通过reject回调
                    current.then(value => addData(i, value), reason => reject(reason))
                }else{
                    //普通值 则直接添加到数组中
                    addData(i, array[i])
                }
            }

        })
    }

    //如果是普通值，则创建一个promise对象，被将这个值包裹在promise对象中，然后把创建出来的promise对象作为resolve方法的返回值，才能在后面链式调用then方法
    //如果是promise对象，则原封不动的将这个promise对象再作为resolve方法的返回值，所以才能在后面调用then方法，通过then方法的成功回调拿到这个promise对象的返回值
    static  resolve (value){
        if(value instanceof  MyPromise) return value
        return new MyPromise(resolve => resolve(value))
    }
}

//判断 x 值时普通值还是promise对象
//如果是普通值，直接调用resolve
//如果是promise对象 查看promise对象返回的结果
//再根据promise对象返回的结果 决定调用resolve 还是调用reject
function resolvePromise(promise2, x, resolve, reject){
    //相等表示自己返回自己（Promise对象自返回），这时应该调用reject回调函数
    if(promise2 === x){
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if( x instanceof  MyPromise){
        //promise对象
        x.then(resolve,reject)
    }else{
        //普通值
        resolve(x)
    }
}

//导出当前类
module.exports = MyPromise;

测试代码（index.js)

/**
 * 了解promise原理及原理代码实现
 * 1.Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行 故放在promise类的构造器中
 * 2.Promise 中有三种状态 分别为 成功(fulfilled) 失败(rejected) 等待(pending)
 *  pending -> fulfilled
 *  pending -> rejected
 ** 一旦状态确定就不可更改
 * 3.resolve和reject函数是用来更改状态
 * resolve:fulfilled
 * reject:rejected
 * 4.then方法内部做的事情就是判断状态 如果状态成功 调用成功的回调函数 如果状态失败 调用失败的回调函数 then被定义为原型对象当中
 * 5.then成功回调有一个参数 表示成功之后的值 then失败回调有一个参数 表示失败的原因
 **/
//导向MyPromise
const MyPromise = require('./myPromise')

//创建promise对象    resolve  reject 两个函数参数
let promise = new Promise((resolve, reject) => {
    //把状态变成成功 参数为成功后的值
    resolve()

    //把状态编程失败  参数为失败的原因
    reject()
})

//需实现promise的then方法，要先了解其中传递两个回调函数及其含义
//调用then方法时，首先要去判断promise状态，成功的话则调用成功回调函数，失败的话则调用失败回调函数
//由于then能被任意一个promise对象调用，故应该将它定义在原型对象中
//then成功回调有一个参数(value) 表示成功之后的值 then失败回调有一个参数(reason) 表示失败的原因
promise.then(value=>{},reason=>{})


/** 1.类核心逻辑实现调用 **/
/*let promise1 = new MyPromise((resolve, reject) => {
    resolve('成功')

    // reject('失败')
})

promise1.then(value => {
    console.log(value)  // 成功
}, reason => {
    console.log(reason)  // 失败
})*/

/** 2.在Promise类中加入异步逻辑 **/
/*let promise2 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功')
    },2000)

    // reject('失败')
})

promise2.then(value => {
    console.log(value)  // 等待2s后输出成功
}, reason => {
    console.log(reason)  // 等待2s后输出失败
})*/

/** 3.实现then方法多次调用添加多个处理函数 **/
/*let promise3 = new MyPromise((resolve, reject) => {
    resolve('成功')

    // reject('失败')
})

promise3.then(value => {
    console.log(1)  // 1
    console.log(value)  // 成功
}, reason => {
    console.log(reason)  // 失败
})

promise3.then(value => {
    console.log(2)  // 2
    console.log(value)  // 成功
}, reason => {
    console.log(reason)  // 失败
})

promise3.then(value => {
    console.log(3)  // 3
    console.log(value)  // 成功
}, reason => {
    console.log(reason)  // 失败
})*/

/** 4./5.实现then方法的链式调用 **/
//后面then方法拿到的值实际上是上一个回调函数的返回值
/*let promise4 = new MyPromise((resolve, reject) => {
    resolve('成功')

    // reject('失败')
})
//测试4 then中返回值的情况
promise4.then(value => {
    console.log(value)  // 成功
    return 100
}).then(value => {
    console.log(value)
})
//测试5  then中返回promise情况
function other(){
    return new MyPromise((resolve, reject) => {
        resolve('other')
    })
}
promise4.then(value => {
    console.log(value)  // 成功
    return other()
}).then(value => {
    console.log(value)  // other
})*/

/** 6.then方法链式调用识别Promise对象自返回 **/
/*let promise6 = new MyPromise((resolve, reject) => {
    resolve('成功')
    // reject('失败')
})

let p6 = promise6.then(value => {
    console.log(value)
    return p6
})

p6.then(value => {
    console.log(value)  //成功
},reason => {
    console.log(reason.message)  //Chaining cycle detected for promise #<Promise>
})*/

/** 7.捕获错误及then链式调用其他状态代码补充 **/
// 执行器错误   then方法中的回调函数在执行过程中报错，这个错误要在下一个then的reject中捕获到
/*let promise7 = new MyPromise((resolve, reject) => {
    // throw new Error('executor error')
    // resolve('成功')
    reject('失败')
})

promise7.then(value => {
    console.log(value)  //成功
},reason => {
    console.log(reason.message)  //executor error
})

promise7.then(value => {
    console.log(value)  //成功
    throw new Error('then error')
},reason => {
    console.log(reason.message)  //executor error
    return 10000
}).then(value => {
    console.log(value)  // 成功  10000
    // throw new Error('then error')
},reason => {
    console.log('xxx')   //xxx
    console.log(reason.message)  //then error
})*/

/** 8.then中方法编程可选参数 **/

/*let promise8 = new MyPromise((resolve, reject) => {
    resolve('成功')
    // reject('失败')
})
promise8.then().then().then(value =>
    console.log(value) //成功  失败
)*/


function p1() {
    return new MyPromise((resolve, reject) => {
        setTimeout(() => {
            resolve('p1')
        }, 2000)
    })
}

function p2() {
    return new MyPromise((resolve, reject) => {
        // resolve('p2')
        reject('失败')
    })
}

/** 9.promise.all方法的实现 **/
/*MyPromise.all(['a', 'b', p1(), p2(), 'c']).then(result =>
    console.log(result)  // [ 'a', 'b', 'p1', 'p2', 'c' ]

)*/

/** 10.promise.resolve方法的实现 **/
/*MyPromise.resolve(100).then(value => console.log(value))
MyPromise.resolve(p1()).then(value => console.log(value))*/

/** 10.promise.finally方法的实现  **/
/*p2().finally(()=>{
    console.log('finally')
    return p1()
}).then(value=>{
    console.log(value)  // p2
},reason=>{
    console.log(reason)
})*/

/** 11.promise.catch方法的实现 **/
/*p2().then(value => console.log(value))
    .catch(reason => console.log(reason))*/