总结promise与事件循环的几个面试题

🌲五🌲一🌳劳🌳动🌳节🌴快🌴乐🌴

废话不多说，直接开怼

1.先拿个简单的练练手

请说出他们的打印结果

function do1() {
    console.log("任务1");
    console.log(abc); //故意犯错
}
function do2() {
    console.log("任务2");
}
function do3() {
     console.log("任务3");
}
function do4() {
    console.log("任务4");
}

var p = new Promise((resolve,reject)=>{ resolve()})
p.then(do1)
 .then(do2)
 .then(do3)
 .catch(do4);

面的代码的执行结果是：任务1, 任务4。 解析： 第一步：由于p的状态是resolved,所以p.then(do1)中，do1函数会执行，输出任务1，同时由于这里有段错误代码，所以p1的状态就是rejected。

第二步：由于p1的状态是rejected，所以p1.then(do2) 就不会执行do2，同时p2的状态也是rejected。

第三步：对p3的分析也是如此。

第四步：p3的状态是rejected，所以会执行do4。

2.稍微增加以下难度

请在规定的地方写代码，使源代码在两秒后执行

function sleep(time){
    // 请写出你的代码
}

sleep(2000).then(()=>{
    console.log("后续操作")
})
console.log(2);

代码解析：

 //需求  在两秒后执行代码
   function sleep(time) {//由于sleep是一个函数,此处可以设置形参time
      var t = new Promise((resolved, rejiect) => {//这是一步操作,根据执行的结果,调用resolved和rejiect
        setTimeout(() => {//创建一个定时器
          resolved()//调用resolved()的运行结果
        }, time )
      })
      return t //这里必须要返回,否则报错
    }
    sleep(2000).then(() => {
      console.log("后续操作")
    })
    console.log(2)

3. 难度拉满

请说出输出结果

function increment(value) {
    return value + 1;
}
function doubleUp(value) {
    return value * 2;
}
function output(value) {
    console.log(value);// => (1 + 1) * 2
}
var p = Promise.resolve(1);
p.then(increment)
 .then(doubleUp)
 .then(output)

拆分 之后，分析如下：

// 状态：resolved; promiseValue: 1
var p = Promise.resolve(1); 

// p的状态是resolved; 
// 在执行then的第一个参数，即increment时
// 把p的 promiseValue 1 传入
// increment执行后的返回值就是2
// p1的状态是resolved,promiseValue是2 
var p1 = p.then(increment); 

// p1的状态是resolved; 
// 在执行then的第一个参数，即doubleUp时
// 把p1的promiseValue 2传入
// doubleUp执行后的返回值就是4
// p2的状态是resolved,promiseValue是4
var p2 = p1.then(doubleUp); 

// p2的状态是resolved,promiseValue是4
// 在执行then的第一个参数，即output时
// 把p2的promiseValue传入，就是4
var p3 = p2.then(output) ;

事件循环的来两个

说出他们的答应结果：

1.

console.log(1)

setTimeout(function() {
  console.log(2)
}, 0)

const p = new Promise((resolve, reject) => {
  resolve(1000)
})
p.then(data => {
  console.log(data)
})

console.log(3)

代码解析: ● 先执行同步代码 ● 遇到宏任务，放入队列 ● 遇到微任务，放入微任务队列 ● 执行栈为空 ○ 将微任务入栈执行 ● 所有的微任务完成之后，取出宏任务队列来执行 由解析图可知,输出代码为:1,3,1000,2

2

console.log(1)
setTimeout(function() {
  console.log(2)
  new Promise(function(resolve) {
    console.log(3)
    resolve()
  }).then(function() {
    console.log(4)
  })
})

new Promise(function(resolve) {
  console.log(5)
  resolve()
}).then(function() {
  console.log(6)
})
setTimeout(function() {
  console.log(7)
  new Promise(function(resolve) {
    console.log(8)
    resolve()
  }).then(function() {
    console.log(9)
  })
})
console.log(10)

根据问题1的解析图可以画出循环流程图: 解析如图所示，三条线代表着三次循环 异步任务，又可以细分为宏任务和微任务，微任务回比宏任务先执行， 所以第二次循环会先走promise.then 当微任务走完再循环一次,重新走定时器里的代码 所以输出的结果是:1,5,10,6,2,3,4,7,8,9