在JavaScript的异步编程中，Promise和事件循环是核心概念。它们共同构成了JavaScript非阻塞I/O操作的基础。本文将通过一系列面试题来探讨这些概念，帮助你在面试中游刃有余。
事件循环
事件循环是JavaScript运行时环境的一部分，它不断地检查调用栈和事件队列，以执行任务。进入事件队列的函数主要有以下几种：
setTimeout和setInterval的回调：宏任务（macro task）- Promise的
then函数回调：微任务（micro task） requestAnimationFrame的回调：宏任务（macro task）- 事件处理函数：宏任务（macro task）
面试题解析
- 下面代码的输出结果是什么
const promise = new Promise((resolve, reject) => {
console.log(1);
resolve();
console.log(2);
})
promise.then(() => {
console.log(3);
})
console.log(4);
// 1
// 2
// 4
// 3
- 下面代码的输出结果是什么
const promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(()=>{
console.log(2)
resolve();
console.log(3);
})
})
promise.then(() => {
console.log(4);
})
console.log(5);
// 1
// 5
// 2
// 3
// 4
- 下面代码的输出结果是什么
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
const promise2 = promise1.catch(() => {
return 2;
})
console.log('promise1', promise1)
console.log('promise2', promise2)
setTimeout(() => {
console.log('promise1', promise1)
console.log('promise2', promise2)
}, 2000)
// Promise {<pending>}
// Promise {<pending>}
// Promise {<fulfilled>: undefined}
// Promise {<fulfilled>: undefined}
- 下面代码的输出结果是什么
async function m(){
const n = await 1;
console.log(n);
}
// function m() {
// return Promise.resolve(1).then(n => {
// console.log(n)
// })
// }
m();
console.log(2);
// 0 2 1
- 下面代码的输出结果是什么
async function m(){
const n = await 1;
console.log(n);
}
(async ()=>{
await m();
console.log(2);
})();
console.log(3)
console.log(3);
// 3 1 2
- 下面代码的输出结果是什么
async function m1(){
return 1;
}
async function m2(){
const n = await m1();
console.log(n)
return 2;
}
async function m3(){
const n = m2();
console.log(n);
return 3;
}
m3().then(n=>{
console.log(n);
});
m3();
// 微队列 , f(n)
console.log(4);
// Promise {<pending>}
// Promise {<pending>}
// 4
// 1
// 3
// 1
- 下面代码的输出结果是什么
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
// 1
- 下面代码的输出结果是什么
var a;
var b = new Promise((resolve, reject) => {
console.log('promise1');
setTimeout(()=>{
resolve();
}, 1000);
}).then(() => {
console.log('promise2');
}).then(() => {
console.log('promise3');
}).then(() => {
console.log('promise4');
});
a = new Promise(async (resolve, reject) => {
console.log(a);
await b;
console.log(a);
console.log('after1');
await a
resolve(true);
console.log('after2');
});
console.log('end');
// promise 1
// undefined
// end
// promise2
// promise3
// promise4
// Promise{pending}
// after1
- 下面代码的输出结果是什么
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout
