前端 每日一道面试题（4）

hello 还是熟悉的味道 。 面试，你准备好了吗？

接下来看题 说出打印结果 并解释说明

new Promise(function(resolve,reject){
    console.log("A");
    resolve()
}).then(function(){
    new Promise(function(resolve,reject){
        console.log("B")
        resolve();
    })
    .then(function(){
        console.log("C")
    })
    .then(function(){
        new Promise(function(resolve,reject){
            console.log("D");
            resolve();
        })
        .then(function(){
            console.log("E")
        })
        .then(function(){
            console.log("F");
        })
        console.log("G");
    });
    console.log('H')
})
.then(function(){
    console.log("I")
})
​
new Promise(function(resolve,reject){
    console.log("J");
    resolve();
    
})
.then(function(){
    console.log("k")
})
.then(function(){
    console.log('L')
})

解释：

注：下文中的轮次主要是为了方便大家理解

\

首先，我们来看最外层的两个new Promise，里面的同步语句会先执行，所以最先打印出来的是A和J。
因为每个Promise都会产生一个微任务，所以最外层的两个Promise的第一个then会进入到第一轮的微任务当中，下面我们来看单独看这两个then。
第一个Promise的第一个then里面又new了一个新的Promise，这个新的Promise产生一个微任务，本轮的微任务已经在执行当中了，所以这个微任务会被派到下一个微任务队列的第一位，还是先执行里面的同步语句，打印B和H，之后运行第二个Promise的第一个then，打印K。
第一轮微任务执行完毕，开始第二轮微任务，先执行第三个Promise的第一个then，打印C，继续执行第一个Promise的第二个then，打印I，最后执行第二个Promise的第二个then，打印L。
第三轮微任务开始，执行第三个Promise的第二个then。这个then里面又new了一个新的Promise，同理，新的Promise（第四个）产生的微任务放入到下一轮的第一个执行，此时执行同步语句，打印D和G。
第四轮微任务开始，执行第四个Promise的第一个then，打印E。
第五轮微任务开始，执行第四个Promise的第二个then，打印F。
所以，最后结果：
​A J B H K C I L D G E F
​

为了更直观的查看，把执行后的代码在发一遍

AJ  //第一轮的宏任务执行结果
BH  //第一轮 微任务里面的宏任务
K  //第一轮 微任务 执行的结果
CIL  //第二轮微任务 执行结果
DG   //第三轮微任务
E   //第四轮微任务
F  //第五轮微任务
​
​
​
​
new Promise(function(resolve,reject){
    console.log("A"); //1
    resolve()
}).then(function(){
    new Promise(function(resolve,reject){
        console.log("B")  //3
        resolve();
    })
    .then(function(){
        console.log("C")  //6
    })
    .then(function(){
        new Promise(function(resolve,reject){
            console.log("D"); //9
            resolve();
        })
        .then(function(){
            console.log("E") //11
        })
        .then(function(){
            console.log("F");  //12
        })
        console.log("G");  //10
    });
    console.log('H')  //4
})
.then(function(){
    console.log("I")  //7
})
​
new Promise(function(resolve,reject){
    console.log("J");  //2
    resolve();
    
})
.then(function(){
    console.log("k") //5
})
.then(function(){
    console.log('L')  //8
})

​最后，喜欢的记得点赞收藏哟！！！
​

有什么疑问，也欢迎评论区指出来~~~