├── README.md └── 面试题积累 ├── 20200515 面试题.png ├── 20200517面试题.md ├── 20200517面试题1.png ├── 20200518面试题.md ├── 20200518面试题.png ├── 20200519-1.png ├── 20200519.md ├── 20200519.png └── 20200520问题汇总.png /README.md: -------------------------------------------------------------------------------- 1 | # fed-e-interview 2 | 每天的面试题和每天的问题汇总，后期会给这两部分分开 3 | 4 | 训练营一期资料整合至：https://github.com/lagoufed/fed-e-001 5 | -------------------------------------------------------------------------------- /面试题积累/20200515 面试题.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-interview/9baae73d34ddbc2dfe93a79f4ed57ff4ce8d9ca9/面试题积累/20200515 面试题.png -------------------------------------------------------------------------------- /面试题积累/20200517面试题.md: -------------------------------------------------------------------------------- 1 | **20200517面试题** 2 | ------------- 3 | 阅读下面代码，我们只考虑浏览器环境下的输出结果，写出它们结果打印的先后顺序，并分析出原因，小伙伴们，加油哦！ 4 | 5 | ```js 6 | 1 console.log("AAAA"); 7 | 2 setTimeout(() => console.log("BBBB"), 1000); 8 | 3 const start = new Date(); 9 | 4 while (new Date() - start < 3000) {} 10 | 5 console.log("CCCC"); 11 | 6 setTimeout(() => console.log("DDDD"), 0); 12 | 7 new Promise((resolve, reject) => { 13 | 8 console.log("EEEE"); 14 | 9 foo.bar(100); 15 | 10 }) 16 | 11 .then(() => console.log("FFFF")) 17 | 12 .then(() => console.log("GGGG")) 18 | 13 .catch(() => console.log("HHHH")); 19 | 14 console.log("IIII"); 20 | ``` 21 | 22 | **答案：** 23 | 24 | 浏览器下 输出结果的先后顺序是 25 | 26 | ```js 27 | AAAA 28 | CCCC 29 | EEEE 30 | IIII 31 | HHHH 32 | BBBB 33 | DDDD 34 | ``` 35 | 36 | 答案解析：这道题考察重点是 js异步执行 宏任务 微任务。 37 | 38 | 39 | 40 | 一开始代码执行，输出`AAAA`. 1 41 | 42 | 第二行代码开启一个计时器t1(一个称呼)，这是一个异步任务且是宏任务，需要等到1秒后提交。 43 | 44 | 第四行是个while语句，需要等待3秒后才能执行下面的代码,这里有个问题，就是3秒后上一个计时器t1的提交时间已经过了，但是线程上的任务还没有执行结束，所以暂时不能打印结果，所以它排在宏任务的最前面了。 45 | 46 | 第五行又输出`CCCC` 47 | 48 | 第六行又开启一个计时器t2（称呼），它提交的时间是0秒（其实每个浏览器器有默认最小时间的，暂时忽略），但是之前的t1任务还没有执行，还在等待，所以t2就排在t1的后面。（t2排在t1后面的原因是while造成的）都还需要等待，因为线程上的任务还没执行完毕。 49 | 50 | 第七行`new Promise`将执行promise函数，它参数是一个回调函数，这个回调函数内的代码是同步的，它的异步核心在于resolve和reject，同时这个异步任务在任务队列中属于微任务，是优先于宏任务执行的，(不管宏任务有多急，反正我是VIP)。所以先直接打印输出同步代码`EEEE`。第九行中的代码是个不存在的对象，这个错误要抛给reject这个状态，也就是catch去处理，但是它是异步的且是微任务，只有等到线程上的任务执行完毕，立马执行它，不管宏任务（计时器，ajax等）等待多久了。 51 | 52 | 第十四行，这是线程上的最后一个任务，打印输出 `IIII` 53 | 54 | 我们先找出线程上的同步代码，将结果依次排列出来：AAAA CCCC EEEE IIII 55 | 56 | 然后我们再找出所有异步任务中的微任务 把结果打印出来 HHHH 57 | 58 | 最后我们再找出异步中的所有宏任务，这里t1排在前面t2排在后面（这个原因是while造成的），输出结果顺序是 BBBB DDDD 59 | 60 | 所以综上 结果是 AAAA CCCC EEEE IIII HHHH BBBB DDDD 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /面试题积累/20200517面试题1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-interview/9baae73d34ddbc2dfe93a79f4ed57ff4ce8d9ca9/面试题积累/20200517面试题1.png -------------------------------------------------------------------------------- /面试题积累/20200518面试题.md: -------------------------------------------------------------------------------- 1 | **20200518面试题** 2 | 3 | 阅读下面代码，我们只考虑浏览器环境下的输出结果，写出它们结果打印的先后顺序，并分析出原因，小伙伴们，加油哦！ 4 | 5 | ``` 6 | 1 async function async1() { 7 | 2 console.log("AAAA"); 8 | 3 async2(); 9 | 4 console.log("BBBB"); 10 | 5 } 11 | 6 async function async2() { 12 | 7 console.log("CCCC"); 13 | 8 } 14 | 9 console.log("DDDD"); 15 | 10 setTimeout(function () { 16 | 11 console.log("FFFF"); 17 | 12 }, 0); 18 | 13 async1(); 19 | 14 new Promise(function (resolve) { 20 | 15 console.log("GGGG"); 21 | 16 resolve(); 22 | 17 }).then(function () { 23 | 18 console.log("HHHH"); 24 | 19 }); 25 | 20 console.log("IIII"); 26 | ``` 27 | 28 | **答案：** 29 | 30 | 浏览器下 输出结果的先后顺序是 31 | 32 | ```ts 33 | DDDD 34 | AAAA 35 | CCCC 36 | BBBB 37 | GGGG 38 | IIII 39 | HHHH 40 | FFFF 41 | ``` 42 | 43 | 答案解析：这道题考察重点是 js异步执行 宏任务 微任务. 44 | 45 | 这道题的坑就在于 async中如果没有await，那么它就是一个纯同步函数。 46 | 47 | 这道题的起始代码在第9行，输出`DDDD` 48 | 49 | 第10行计时器开启一个异步任务t1（一个称呼），这个任务且为宏任务。 50 | 51 | 第13行函数`async1`执行，这个函数内没有await 所以它其实就是一个纯同步函数，打印输出`AAAA`, 52 | 53 | 在`async1`中执行`async2`函数，因为`async2`的内部也没有await，所以它也是个纯同步函数，打印输出`CCCC` 54 | 55 | 紧接着打印输出`BBBB`。 56 | 57 | 第14行new Promise执行里面的代码也是同步的,所以打印输出`GGGG`,resolve()调用的时候开启一个异步任务t2（一个称呼），且这个任务t2是微任务，它的执行交给then()中的第一个回调函数执行，且优先级高于宏任务（t1）执行。 58 | 59 | 第20行打印输出`IIII`,此时线程上的同步任务全部执行结束。 60 | 61 | 在执行任务队列中的异步任务时，微任务优先于宏任务执行，所以先执行微任务 t2 打印输出 ` HHHH`,然后执行宏任务 t1 打印输出 `FFFF` 62 | 63 | 所以综上 结果输出是 DDDD AAAA CCCC BBBB GGGG IIII HHHH FFFF -------------------------------------------------------------------------------- /面试题积累/20200518面试题.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-interview/9baae73d34ddbc2dfe93a79f4ed57ff4ce8d9ca9/面试题积累/20200518面试题.png -------------------------------------------------------------------------------- /面试题积累/20200519-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-interview/9baae73d34ddbc2dfe93a79f4ed57ff4ce8d9ca9/面试题积累/20200519-1.png -------------------------------------------------------------------------------- /面试题积累/20200519.md: -------------------------------------------------------------------------------- 1 | **20200519 async await** 2 | 3 | 1. 问题1 4 | 5 | ```js 6 | async function t1() { 7 | let a = await "lagou"; 8 | console.log(a); 9 | } 10 | t1() 11 | ``` 12 | 13 | 问题解析 14 | 15 | `await`是一个表达式，如果后面不是一个promise对象，就直接返回对应的值。 16 | 17 | 所以问题1可以理解为 18 | 19 | ```js 20 | async function t1() { 21 | let a = "lagou"; 22 | console.log(a);//lagou 23 | } 24 | t1() 25 | ``` 26 | 27 | 2. 问题2 28 | 29 | ```js 30 | async function t2() { 31 | let a = await new Promise((resolve) => {}); 32 | console.log(a);// 33 | } 34 | t2() 35 | ``` 36 | 37 | 问题解析 38 | 39 | `await`后面如果跟一个promise对象，await将等待这个promise对象的resolve状态的值value，且将这个值返回给前面的变量，此时的promise对象的状态是一个pending状态，没有resolve状态值，所以什么也打印不了。 40 | 41 | 3. 问题3 42 | 43 | ```js 44 | async function t3() { 45 | let a = await new Promise((resolve) => { 46 | resolve(); 47 | }); 48 | console.log(a);//undefined 49 | } 50 | t3() 51 | ``` 52 | 53 | `await`后面如果跟一个promise对象，await将等待这个promise对象的resolve状态的值value，且将这个值返回给前面的变量，此时的promise对象的状态是一个resolve状态，但是它的状态值是undefined，所以打印出undefined。 54 | 55 | 4. 问题4 56 | 57 | ```js 58 | async function t4() { 59 | let a = await new Promise((resolve) => { 60 | resolve("hello"); 61 | }); 62 | console.log(a);//hello 63 | } 64 | t4() 65 | ``` 66 | 67 | `await`后面如果跟一个promise对象，await将等待这个promise对象的resolve状态的值，且将这个值返回给前面的变量，此时的promise对象的状态是一个resolve状态，它的状态值是hello，所以打印出hello。 68 | 69 | 5. 问题5 70 | 71 | ```js 72 | async function t5() { 73 | let a = await new Promise((resolve) => { 74 | resolve("hello"); 75 | }).then(() => { 76 | return "lala"; 77 | }); 78 | console.log(a);//lala 79 | } 80 | t5() 81 | ``` 82 | 83 | `await`后面如果跟一个promise对象，await将等待这个promise对象的resolve状态的值，且将这个值返回给前面的变量，此时的promise对象的状态是一个resolve状态，它的状态值是hello，紧接着后面又执行了一个then方法，then方法又会返回一个全新的promise对象，且这个then方法中的返回值会作为这个全新的promise中resolve的值，所以最终的结果是lala。 84 | 85 | 6. 问题6 86 | 87 | ```js 88 | async function t6() { 89 | let a = await fn().then((res)=>{return res}) 90 | console.log(a);//undefined 91 | } 92 | async function fn(){ 93 | await new Promise((resolve)=>{ 94 | resolve("lagou") 95 | }) 96 | } 97 | t6() 98 | ``` 99 | 100 | 问题解析 101 | 102 | `async`函数执行返回一个`promise`对象,且`async`函数内部的返回值会当作这个promise对象resolve状态的值 103 | 104 | ```js 105 | async function fn() { 106 | return "la"; 107 | } 108 | var p = fn(); 109 | console.log(p); //Promise {: "la"} 110 | //__proto__: Promise 111 | //[[PromiseStatus]]: "resolved" 112 | //[[PromiseValue]]: "la" 113 | ``` 114 | 115 | 116 | 117 | 首先考虑 `fn()` 执行返回一个promise对象，因为fn执行没有返回值，所以这个promise对象的状态resolve的值是undefined，且将这个undefined当作下一个then中回调函数的参数，所以打印的结果是undefined 118 | 119 | 7. 问题7 120 | 121 | ```js 122 | async function t7() { 123 | let a = await fn().then((res)=>{return res}) 124 | console.log(a); 125 | } 126 | async function fn(){ 127 | await new Promise((resolve)=>{ 128 | resolve("lagou") 129 | }) 130 | return "lala" 131 | } 132 | t7() 133 | 134 | ``` 135 | 136 | 首先考虑 `fn()` 执行返回一个promise对象，因为`fn()`执行有返回值lala，所以这个promise对象的状态resolve的值是lala，且将这个lala当作下一个then中回调函数的参数，所以打印的结果是lala。 137 | 138 | **注意细节** 139 | 140 | - async函数执行的返回结果是一个promise对象，这个函数的返回值是这个promise状态值resolve的值 141 | 142 | - await后面如果不是一个promise对象，将直接返回这个值 143 | 144 | - await后面如果是一个promise对象，将会把这个promise的状态resolve的值返回出去。 145 | 146 | 以上没有考虑reject状态。 -------------------------------------------------------------------------------- /面试题积累/20200519.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-interview/9baae73d34ddbc2dfe93a79f4ed57ff4ce8d9ca9/面试题积累/20200519.png -------------------------------------------------------------------------------- /面试题积累/20200520问题汇总.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-interview/9baae73d34ddbc2dfe93a79f4ed57ff4ce8d9ca9/面试题积累/20200520问题汇总.png --------------------------------------------------------------------------------