前言

7.29晚，记录人生第一次面试。没什么经验，也没有做任何的准备工作，内心实际上是慌的一批，以为需要背很多的八股文，知道很多东西，但是自己知道自己几斤几两，甚至当面试官手搓了很多道题目出来，然后问：你了解异步吗，我开始想到的就是es6之前没有promise，以前为了解决这些异步问题就把需要执行的内容往回调函数中堆，当程序变得越来越大就形成了回调地狱的问题。面试官：不不不，不需要去背八股文，要不这样，我这里准备了9个题目，你随便挑一道来做。（这个面试官真的很温柔，人很好，不得不说，即便是后续我都答不上，他也耐心的教，给我屡）

最后面完，面试官说有什么问题想问他，我就问了一下能不能给我一些学习相关的建议，然后他就结合这一次的面试，因为我自己也感觉到自己的基础非常薄弱，他的建议就是要保持一颗积极学习的心，多看官方文档找答案，要找对方向，深挖为什么，如果没有找为什么的心就不太适合做这一行，然后陆陆续续谈了一些，计算机精度不足...等等

想总结的问题和知识点

第一次面试，从晚上九点54分持续到十一点13分，历时80分钟左右，其实中间讨论的问题很多，自感能力不足，但是感谢面试官耐心教导，个人认为我们需要做的是千万不要不懂装懂，今天也和一个面试官聊了会儿天，有些面试者令人一言难尽，这个世界上人外有人，天外有天，千万不要觉得你瞎说一个什么东西，能够含糊面试官，事实上你不知道的可能是对方是一个技术大牛，对方是xxx博士毕业...

保持虚心请教的态度，诚恳发言的同时要自信，即便你讨论的问题非常简单。

这次面试考了很多的知识点，但是我想拿出来聊一聊的还是有关promise问题，这似乎是面试必考内容之一，但是个人还是比较薄弱，因此总结一下知识点包括面试题分享给大家。

下面是一个非常完整且详细的关于promise相关考题，从知识点->做题，相信吃透这一篇，关于promise的问题就问题不大了。相关作者：@LinDaiDai_霖呆呆

事件循环机制Event Loop

• 一开始整个脚本作为一个宏任务执行

• 执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列

• 当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完

• 执行浏览器UI线程的渲染工作

• 检查是否有Web Worker任务，有则执行

• 执行完本轮的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空

大家如果对Web Worker不是很了解，我会出一篇有关react+Ai的小项目文章，里面会涉及到Web Worker的相关概念,现在可以暂且放掉这个问题。

微任务包括： MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术，比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。

宏任务包括：script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering。

这里的可以看到宏任务是包含script的，因此浏览器会首先执行一个宏任务，接下来我们的诸如setTimeout等任务会被放到下一轮的宏任务中执行。

Promise

promise基础：练手入门题

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
})
console.log('1', promise1);

过程：

• 大家应该知道promise有3个状态，pending（初始状态）、fulfilled（已完成）和 rejected（已失败）。状态一旦从 pending 变为 fulfilled 或 rejected 就不能改变。
• 通过resolve()就会从pending状态变为fulfilled状态，同理，通过reject()则会将pending状态编程rejected状态
• 那么这道题目中，首先是new了一个Promise但是这还不是微任务的范畴，还属于同步代码，那么首先就是执行构造函数中的内容，打印promise1，然后将这个promise实例赋值给promise1，然后代码来到第四行，打印1和promise1，注意这里的promise实例并没有被resolve，因此他还是属于pending状态。

结果：

'promise1'
'1' Promise{<pending>}

如果真的明白了，接下来这道题一定能够做出来，因此我不做分析，如果有需要可以看上面大佬的文章或者和我交流。

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

结果：

1 2 4 3

需要注意的点： promise.then()能否执行，要看这个实例对象的状态是否被resolve()进而改成fulfilled状态，只有改变状态了他才会执行。

题目：

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
  resolve('resolve1')
})
const promise2 = promise1.then(res => {
  console.log(res)
})
console.log('1', promise1);
console.log('2', promise2);

过程：

• 首先毋庸置疑，打印p1，然后改变状态，并且能够通过.then拿到承接的值r1
• 代码进入第五行，发现是一个微任务，加入微任务队列
• 代码来到第八行，打印1和p1实例，p1实例为一个promise对象状态为resolved，值为r1
• 代码来到第九行，打印2和p2实例，p2实例也是一个promise对象，但是状态时pending
• 最后同步代码执行完毕，检查微任务队列是否为空，因此执行p1.then，发现状态为resolved，因此打印承接值res，即：r1

promise结合setTimeout

题目：

const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log("timerStart");
    resolve("success");
    console.log("timerEnd");
  }, 0);
  console.log(2);
});
promise.then((res) => {
  console.log(res);
});
console.log(4);

过程：

• 从上至下，先遇到new Promise，执行该构造函数中的代码1

• 然后碰到了定时器，将这个定时器中的函数放到下一个宏任务的延迟队列中等待执行

• 执行同步代码2

• 跳出promise函数，遇到promise.then，但其状态还是为pending，这里理解为先不执行

• 执行同步代码4

• 一轮循环过后，进入第二次宏任务，发现延迟队列中有setTimeout定时器，执行它

• 首先执行timerStart，然后遇到了resolve，将promise的状态改为resolved且保存结果并将之前的promise.then推入微任务队列

• 继续执行同步代码timerEnd

• 宏任务全部执行完毕，查找微任务队列，发现promise.then这个微任务，执行它。

结果：

1
2
4
"timerStart"
"timerEnd"
"success"

promise的.then .catch .finally

看两道题先

题目1：

const promise = new Promise((resolve, reject) => {
  reject("error");
  resolve("success2");
});
promise
.then(res => {
    console.log("then1: ", res);
  }).then(res => {
    console.log("then2: ", res);
  }).catch(err => {
    console.log("catch: ", err);
  }).then(res => {
    console.log("then3: ", res);
  })

结果：

catch:  error
then3:  undefined

题目2：

Promise.resolve(1)
  .then(res => {
    console.log(res);
    return 2;
  })
  .catch(err => {
    return 3;
  })
  .then(res => {
    console.log(res);
  });

结果：

1
2

题目3： 本来不打算放题目的，但是这道题好像还挺有必要拿出来看一下，照理说我们的.then里面应该是接收一个回调函数，但是这里给到的是一个数值，一个promise对象，因此发生了值透传，直接传到最后一个函数身上，因此最终结果打印1.

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

小结：

• Promise的状态一经改变就不能再改变。

• .then和.catch都会返回一个新的Promise。

• catch不管被连接到哪里，都能捕获上层未捕捉过的错误。

• 在Promise中，返回任意一个非 promise 的值都会被包裹成 promise 对象，例如return 2会被包装为return Promise.resolve(2)。

• Promise 的 .then 或者 .catch 可以被调用多次, 但如果Promise内部的状态一经改变，并且有了一个值，那么后续每次调用.then或者.catch的时候都会直接拿到该值。

• .then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获。

• .then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。

• .then 或者 .catch 的参数期望是函数，传入非函数则会发生值透传。

• .then方法是能接收两个参数的，第一个是处理成功的函数，第二个是处理失败的函数，再某些时候你可以认为catch是.then第二个参数的简便写法。

• .finally方法也是返回一个Promise，他在Promise结束的时候，无论结果为resolved还是rejected，都会执行里面的回调函数。

async/await

题目：

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
async1();
console.log('start')

答案：

'async1 start'
'async2'
'start'
'async1 end'

• 可以理解为：紧跟着await后面的语句相当于放到了new Promise中，下一行及之后的语句相当于放在Promise.then中。

来看看我昨天碰到的面试题吧

题1：

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()

console.log(4);

分析：

• 首先是碰到了三个函数，分别是m123，然后代码来到18行，m3的调用，此时为同步代码，优先执行，m3的执行，带来了m2的执行，m2的执行带来了m1的执行但是m1存在await要等待m1执行完毕才能接着往下执行，m1进入微任务队列，因此此时的m2还是一个Promise对象，并且状态为Pending，因此13行打印Promise<pending>
• m3随着return 3结束，那么此时18行的.then就会放入微任务队列，接着代码来到22行再次执行m3，还是一样的道理，再次打印了Promise<Pending>,然后return3，但是由于这里的m3执行之后没有.then因此也就不存在微任务队列的进入，但是他依然要awaitm1，m1再次进入微任务队列
• 24行打印4
• 同步代码执行结束，微任务队列执行m1 return 1，导致第六行的n等于1，打印1
• 微任务队列执行3，进入18行打印3
• 微任务队列执行最后一个m1，打印1

题2：

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'); 

结果：

promise1
undefined
end
promise2
promise3
promise4
Promise<Pending>
after1

es6的特性？展开运算符

... 是一个称为“扩展运算符”或“展开运算符”的特性。它有多种用途，其中最常见的是用于数组和对象的展开以及参数的传递。

1. 数组的展开

可以用于将数组的内容作为单独的元素插入到另一个数组中。

示例:

let arr1 = [1, 2, 3];
let arr2 = [0, ...arr1, 4, 5];
console.log(arr2); // 输出: [0, 1, 2, 3, 4, 5]

2. 对象的展开

可以用于将一个对象的属性合并到另一个对象中。

示例:

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出: { a: 1, b: 2, c: 3 }

3. 参数传递

可以用于将数组中的元素作为单独的参数传递给函数。

示例:

function sum(a, b, c) {
  return a + b + c;
}

let numbers = [1, 2, 3];
console.log(sum(...numbers)); // 输出: 6

4. 复制数组或对象

可以用于快速复制数组或对象。

示例:

let originalArray = [1, 2, 3];
let copiedArray = [...originalArray];
console.log(copiedArray); // 输出: [1, 2, 3]
let originalObject = { a: 1, b: 2 };
let copiedObject = { ...originalObject };
console.log(copiedObject); // 输出: { a: 1, b: 2 }

5. 构造新数组或对象

可以用于创建新数组或对象时添加部分现有数据。

示例:

let originalArray = [1, 2, 3];
let newArray = [...originalArray, 4, 5]; // 新数组: [1, 2, 3, 4, 5]
console.log(newArray);
let originalObject = { a: 1, b: 2 };
let newObject = { ...originalObject, c: 3 }; // 新对象: { a: 1, b: 2, c: 3 }
console.log(newObject);

类型判断

console.log(typeof null); // object

手撕promise

...

事情大概就是这么个事情，中间其实还有很多东西和问题没讲，大家可以自行补充拓展

小结

因为时间已经过去一天了，里面很多的细节已经开始慢慢记不清楚了...我现在的脑子里就只有：面试官真的好温柔，面对我问啥啥不会的情况下依然很有耐心叫我不要紧张，包括最开始我在介绍项目时，讲了一下后端的内容，我刚讲完一个点，会议突然结束，我以为我真的答的太烂面试官听不下去直接给我挂了，过了一分钟后面试官突然发了一个会议号过来。我：...我以为我答的太差你直接给我挂了。面试官：噢不好意思不好意思，hr不小心点到挂断了。。。

总的来说就是求职路上大家还是保持虚心态度请教，但是同时也要保持自信，敢于展示自己的能力，即便是一些基础内容，也可以多和面试官交流对话，或者问问题，多表达总好过两个人大眼瞪小眼了

通过这次面试主要是感觉到自己的基础非常薄弱，和面试官最后给我的建议一样，在学习的路上要学会深究，多钻研，这些框架都是用诸如js..等等写出来的只是做了封装，基础打牢以后，遇上不会的问题，多看官方文档，看看源码，底层实现逻辑。

这篇文章其实也不是想和大家分享面试知识点，个人感觉对实习生而言，对方也许不一定需要你能力非常强，只是需要你有一颗学习的心以及看你这个人的情商、人品、团队协作能力、遇上困难如何解决...