JavaScript异步相关面试题

异步的话讲到这里算是大结局了,这篇文章是针对已经学完前面几个系列的异步知识的朋友并且希望可以检验一下学习成果或者正在求职的朋友。

不过还有一个常考的知识点没讲,因为下面检验大家异步的学习情况会用到,所以还是简单给大家讲一下!

宏任务和微任务

我们先看看一组代码

console.log(100);  //1
setTimeout(() =>{
     console.log(200);//4
})
Promise.resolve().then(() =>{
     console.log(300)//3
})
console.log(400);//2

1、2步执行结果大家应该都没有问题了,3、4的执行结果就是宏任务和微任务的区别

在这里就不详细讲了,已经学废的老油条就记住以下几点,未接触过的萌新小白就要去了解下宏任务和微任务的概念和区别再回来看看!

重点笔记:

1.宏任务有:setTimeout、setInterval、Ajax、Dom等(由浏览器规定)

2.微任务有:Promise、async-await等(由ES6语法规定)

3.先执行微任务,再执行宏任务。

4.微任务执行在DOM渲染前,宏任务执行在DOM渲染后

概念题

一、描述event loop 机制(可以画图)

二、Promise的三种状态有什么,是如何变化的?

三、宏任务有哪些?微任务有哪些?

场景题

注意:先自己思考,做完再看答案,答案都在所有题目的后面!

A类:Promise 与 then 和 catch相关面试题

第一题:控制台打印?

 Promise.resolve().then(()=>{
     console.log('a')
 }).catch(()=>{
     console.log('b')
 }).then(()=>{
     console.log('c')
 })

第二题:控制台打印?

 Promise.resolve().then(()=>{
     console.log('a')
     throw new Error('err1')
 }).catch(()=>{
     console.log('b')
 }).then(()=>{
     console.log('c')
 })

第三题:控制台打印?

Promise.resolve().then(()=>{
    console.log('a')
    throw new Error('err1')
 }).catch(()=>{
     console.log('b')
 }).catch(()=>{
     console.log('c')
 })

B类:async/await相关面试题

第四题:控制台打印?

async function fn(){
    return 100
}
(async function(){
    const a = fn();
    const b = await fn(); 
    console.log(a);
    console.log(b);
})()

第五题:控制台打印?

(async function(){
    console.log('go')
    await fn()
    const a = await 100;
    console.log(a);
    const b = await Promise.resolve(200)
    console.log(b)
    const c = await Promise.reject(300)
    console.log(c)
    console.log('end');
})()
function fn(){
    console.log(666)
}
console.log(777);

C类:综合考察(大boss题)

async function async1(){
    console.log('A');
    await async2()
    console.log('B')
} 

async function async2(){
    console.log('C')
} 
  
console.log('D')

setTimeout(()=>{
    console.log('E')
},0)

async1();

new Promise(function(resolve){
    console.log('F');
    resolve()
}).then(function(){
    console.log('G')
})

console.log('H')

答案:

1.a c

2.a b c

3.a b

4.Promise对象  100

5.

6.  D  A  C  F  H  B  G  E

 题解:

第1、2、3题:

1.then和catch函数执行完代码块以后,如果没有抛出错误,都是返回一个resolve状态的Promise对象。

2.如果没有抛出错误,catch函数不执行

第4题:

await相当于Promise的then

第5题:

1.匿名函数调用自己,打印:go

2.await fn()先执行await后面的语句,调用fn函数,打印:666

3.await后面的所有代码都封装成一个异步函数,所以先执行同步任务的代码,打印:777

4.接着往下执行,打印:200

5.await相当于Promise的then(),无法执行下面的代码,所以报错,代码阻塞。

第6题:

1.函数定义先不管它,打印:D

2.调用async1(),打印:A

3.await async2(),先执行await后面的语句,调用async2(),打印:C

4.初始化Promise,打印:F(注意:初始化Promise时,传入的函数被立即执行)

5.打印:H

(所有的同步代码块执行完毕)

6.先按顺序执行微任务,打印:B

7.打印:G

8.执行宏任务,打印:E


在这里异步的知识给大家讲完了,当然异步的知识肯定不止那么少的,列举的都是收集回来的常考内容,创作不易,小弟在这里希望大家动动发财小手点点赞和关注!!!

今天你学废了吗?

 

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码

)">
< <上一篇
下一篇>>