栈的输出_基础面试27：什么是栈和队列？什么是单线程和异步?什么是事件环

栈和队列

在计算机内存中存取数据，基本的数据结构分为栈和队列。

栈(Stack)是一种后进先出的数据结构，有时候也管栈叫做“堆栈”，但是“堆”又是另一种复杂的数据结构，和栈完全是两码事。栈的特点是操作只在一端进行，一般来说，栈的操作只有两种：进栈和出栈。第一个进栈的数据总是最后一个才出来。

队列(Queue)和栈类似，但它是先进先出的数据结构，插入数据的操作从队列的一端进行，而删除的操作在另一端。

在JavaScript中，函数的执行就一个典型的入栈与出栈的过程：

function fun1() {  function fun2() {  function fun3() {  console.log('do it'); } fun3(); } fun2();}fun1();

在程序执行时，首先将fun1，fun2，fun3依次入栈，而在调用函数时，是先将fun3调用(出栈)。

单线程和异步

在javascript这门语言中程序是单线程的，只有一个主线程，这是为什么？最初javascript的设计是跑在浏览器中的脚本语言，如果设计成多线程，两个线程同时修改DOM那以谁的为准呢？所以javascript为单线程，在一个线程中代码会一句一句向下走，直到程序跑完，若中间有较为费时的操作，那也只能等着。

单线程的设计使得语言的执行效率很差，为了利用多核心CPU的性能，javascript语言支持异步代码，当有较为费时的操作时，可将任务写为异步执行，当一个异步任务还没有执行完时，主线程会将异步任务挂起，继续执行后面的同步代码，之后再回过头来看，如果有异步任务运行完了再执行它。

这种执行代码的方式其实很符合我们生活中的很多场景，比如小明同学下班回家了，他很渴，想烧水泡茶，如果是同步的执行方式那就是烧水，在水没开时小明像个傻子似的等着，等水开了再泡茶；若是异步执行，小明先开始烧水，然后就去干点别的事，比如看会电视、听听音乐，等水烧开了再去泡茶。明显第二种异步方式效率更高。

常见的异步操作都有哪些？有很多，我们可以罗列几个常见的：

Ajax

DOM的事件操作

setTimeout

Promise的then方法

Node的读取文件

我们先来看一段代码：

因为setTimeout函数延时了1000毫秒执行，因此先输出1和3，而2是过了1000毫秒之后再输出，这很合逻辑。

我们稍稍改动一下代码，将setTimeout的延时时间改为0：

为什么延时了0毫秒还是最后输出的2？再来看一段代码：

以上三段代码，如果你能正确的写出结果，并且能说明白为什么这样输出，说明你对javascript的事件环理解的很清楚，如果讲不出来，我们就一起聊聊这里面发生了什么，其实很有意思。

javascript是怎么执行的？

一开始先简单聊了聊基本的数据结构，它和我们现在说的事件环有什么关系么？当然有，首先要明确的一点是：javascript代码的执行全都在栈里，不论是同步代码还是异步代码，这个一定要清楚。

而代码我们大体上分为了同步代码和异步代码，其实异步代码还可以再分为两类：宏任务和微任务。先这么认为：宏，即是宏观的、大的；微即微观的、小的。

javascript是解释型语言，它的执行过程是这样的：

1. 从上到下依次解释每一条js语句
2. 若是同步任务，则压入一个栈(主线程)；如果是异步任务，就放到一个任务队列里
3. 开始执行栈里的同步任务，直到将栈里的所有任务都走完，此时到栈底了，栈清空了。
4. 回过头看异步队列里如果有异步任务完成了，就生成一个事件并注册回调，压入栈中
5. 再返回第3步，直到异步队列都清空，程序运行结束

看图：

通过以上的步骤可以看到，不论是同步还是异步，只要是执行的时候都是要在栈里执行的，而一遍又一遍的回头检查异步队列，这种执行方式 就是所谓的“事件环”。

明白了javascript的执行原理，我们就不难理解之前的第二段代码，为什么setTimeout为0时会最后执行，因为setTimeout是异步代码，必须要等所有的同步代码都执行完，才会执行异步队列。即使setTimeout执行得再快，它也不可能在同步代码之前执行。

浏览器中的事件环

聊了这么多，没有说宏任务和微任务的话题呢，上面说了，异步任务又分为微任务和宏任务，那它们又是一个怎样的执行机制呢？

注意！微任务和宏任务的执行方式在浏览器和Node中有差异，有差异！重要的事我们多说几遍，以下我们讨论的是在浏览器的环境里。

在浏览器的执行环境中，总是先执行小的、微任务，再执行大的、宏任务，回过头再看看第三段代码，为什么Promise的then方法在setTimeout之前执行？其根本原理就是因为Promise的then方法是一个微任务，而setTimeout是一个宏任务。

最后来一个大考，以下代码的运行结果是什么：

Chrome跑一下：

今天到这里，欢迎关注