====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
前端面试重点突破 [2021/12/22 13:35] 若愚 |
前端面试重点突破 [2021/12/28 18:04] (当前版本) 若愚 |
||
---|---|---|---|
行 1: | 行 1: | ||
- | # 大厂前端面试重点突破 | + | - [Promise与微任务,你真的懂吗?](https:// |
+ | - [微任务终极考验,一文讲解async/ | ||
+ | - [宏任务与微任务大厂面试题集合](宏任务与微任务) | ||
- | ## 系列1: 宏任务微任务 | ||
- | > 考察事件循环、任务队列、和setTimeout、Promise结合,以输出结果顺序的方式来考察 | ||
- | |||
- | #### 范例1 | ||
- | 来自[面经](https:// | ||
- | |||
- | ```javascript | ||
- | async function async1(){ | ||
- | console.log(' | ||
- | await async2() | ||
- | console.log(' | ||
- | } | ||
- | |||
- | async function async2(){ | ||
- | console.log(' | ||
- | } | ||
- | |||
- | console.log(' | ||
- | |||
- | setTimeout(function(){ | ||
- | console.log(' | ||
- | },0) | ||
- | |||
- | async1() | ||
- | |||
- | new Promise(function(reslove){ | ||
- | console.log(' | ||
- | resolve() | ||
- | }).then(function(){ | ||
- | console.log(' | ||
- | }) | ||
- | |||
- | console.log(' | ||
- | ``` | ||
- | |||
- | #### 范例2 | ||
- | 来自[面经](https:// | ||
- | |||
- | ```javascript | ||
- | const pro = new Promise((resolve, | ||
- | const innerpro = new Promise((resolve, | ||
- | setTimeout(() => { | ||
- | resolve(1); | ||
- | }, 0); | ||
- | console.log(2); | ||
- | resolve(3); | ||
- | }); | ||
- | innerpro.then(res => console.log(res)); | ||
- | resolve(4); | ||
- | console.log(" | ||
- | }) | ||
- | pro.then(res => console.log(res)); | ||
- | console.log(" | ||
- | ``` | ||
- | |||
- | #### 范例3 | ||
- | 来自[这里](https:// | ||
- | |||
- | ```javascript | ||
- | console.log(' | ||
- | setTimeout(() => { | ||
- | console.log(' | ||
- | Promise.resolve().then(() => { | ||
- | console.log(' | ||
- | setTimeout(() => { | ||
- | console.log(' | ||
- | }) | ||
- | }).then(() => { | ||
- | console.log(' | ||
- | }) | ||
- | }, 0) | ||
- | console.log(' | ||
- | ``` | ||
- | |||
- | #### 范例4 | ||
- | [题目出处](https:// | ||
- | |||
- | ```javascript | ||
- | |||
- | function arr(){ | ||
- | setTimeout(function(){ | ||
- | console.log(' | ||
- | },0) | ||
- | async function async1(){ | ||
- | console.log(' | ||
- | await async2(); | ||
- | console.log(' | ||
- | } | ||
- | async function async2(){ | ||
- | console.log(' | ||
- | } | ||
- | async1(); | ||
- | new Promise(function(resolve, | ||
- | console.log(' | ||
- | resolve(); | ||
- | }).then(function(e2){ | ||
- | console.log(' | ||
- | }) | ||
- | console.log(' | ||
- | } | ||
- | ``` | ||
- | |||
- | #### 范例5 | ||
- | [题目出处](https:// | ||
- | ```javascript | ||
- | setTimeout(_ => console.log(1)) | ||
- | new Promise(resolve => { | ||
- | resolve() | ||
- | console.log(2) | ||
- | }).then(_ => { | ||
- | setTimeout(_ => console.log(3)) | ||
- | console.log(4) | ||
- | Promise.resolve().then(_ => { | ||
- | console.log(5) | ||
- | }).then(_ => { | ||
- | Promise.resolve().then(_ => { | ||
- | console.log(6) | ||
- | }) | ||
- | }) | ||
- | }) | ||
- | console.log(7) | ||
- | ``` | ||
- | |||
- | |||
- | #### 范例6 | ||
- | [题目出处](https:// | ||
- | ```javascript | ||
- | console.log(1); | ||
- | setTimeout(() => { | ||
- | | ||
- | | ||
- | console.log(3) | ||
- | }); | ||
- | }); | ||
- | new Promise((resolve, | ||
- | | ||
- | | ||
- | }).then(() => { | ||
- | | ||
- | }) | ||
- | setTimeout(() => { | ||
- | | ||
- | }) | ||
- | console.log(7); | ||
- | ``` | ||
- | |||
- | #### 范例7 | ||
- | [题目出处](https:// | ||
- | ```javascript | ||
- | setTimeout(() => { | ||
- | console.log(1) | ||
- | }, 0); | ||
- | new Promise((res)=> | ||
- | console.log(2); | ||
- | }).then(()=> | ||
- | console.log(4) | ||
- | }) | ||
- | console.log(3) | ||
- | ``` | ||
- | |||
- | #### 范例8 | ||
- | [题目出处](https:// | ||
- | ```javascript | ||
- | const a = () => { | ||
- | new Promise((resolve) => { | ||
- | resolve(1) | ||
- | console.log(' | ||
- | }).then(() => { | ||
- | console.log(' | ||
- | }) | ||
- | } | ||
- | a() | ||
- | console.log(' | ||
- | ``` | ||
- | |||
- | #### 范例9 | ||
- | [题目出处](https:// | ||
- | ```javascript | ||
- | new Promise((resolve, | ||
- | reject(1) | ||
- | }).catch(() => { | ||
- | console.log(2); | ||
- | }).then(() => { | ||
- | console.log(3) | ||
- | }, (v) => { | ||
- | console.log(v) | ||
- | }) | ||
- | console.log(4) | ||
- | ``` | ||
- | |||
- | #### 范例10 | ||
- | [题目出处](https:// | ||
- | ```javascript | ||
- | async function async1() { | ||
- | console.log(' | ||
- | await async2(); | ||
- | console.log(' | ||
- | } | ||
- | async function async2() { | ||
- | console.log(' | ||
- | return new Promise((resolve, | ||
- | | ||
- | | ||
- | }) | ||
- | } | ||
- | console.log(' | ||
- | setTimeout(function() { | ||
- | console.log(' | ||
- | }, 0); | ||
- | async1(); | ||
- | new Promise(function(resolve) { | ||
- | console.log(' | ||
- | resolve(); | ||
- | }).then(function() { | ||
- | console.log(' | ||
- | }).then(function() { | ||
- | console.log(' | ||
- | }); | ||
- | console.log(' | ||
- | ``` | ||
- | |||
- | #### 范例11 | ||
- | [题目出处]() | ||
- | ```javascript | ||
- | ``` |