不起眼的开始

本文将从一道简单的Javascript面试题开始，逐渐深入，看看这个过程中你是不是掌握了所有的内容。

Javascript面试

我们直接从简单的代码开始，看看它的运行结果是什么？

代码1

上面的题目很简单，只要对作用域，闭包，异步执行等知识有了解，应该会很快说出答案，在本地测试后，输出的答案如下。

答案

追问1

如果我们需要用箭头->表示前后输出有一秒的间隔，那么最终输出的答案会是下面的结果1还是结果2呢？

结果1. 5 -> 5 -> 5 -> 5 -> 5 -> 5

结果2. 5 -> 5, 5, 5, 5, 5

如果你对Javascript的定时器有所了解的话，会很快知道结果2是正确的。

在循环时设置定时器，几乎是同时生效的，一般情况下，这5个定时器会在同一秒内执行，结果会立即输出，因此结果2是正确的。

追问2

如果我期望输出以下的结果，该怎么做呢？

5 -> 0, 1, 2, 3, 4

• 定义输出函数
  

有的同学可能会很容易想到通过定义一个专门的输出函数来执行。

答案1

• 立即执行函数
  

但是，如果熟悉闭包的同学可能会觉得这种方案比较low，他们会想到利用立即执行函数来解决闭包产生的问题，于是会给出以下答案。

答案2

上面的答案利用了立即执行函数来解决闭包造成的问题，是一种比答案1略好的方法。

• let
  

如果熟悉ES6语法的同学又会想到以上两种方法对于代码的改动都比较大，如果使用ES6的let命令会可能会更加容易，于是他们有了以下代码。

let

首先，我们要确定的是，上述代码在运行中会报错，因为let是块级作用域，i只存在于循环体内部，最后一句i并未定义，在直接输出时会报错。

但是既然能够想到用let命令去做，说明对ES6有一定的了解，很不错。

追问3

如果对于上面的问题，觉得太简单了，那进行下面一个问题。

需要输出的形式如下，每隔一秒输出一个数字，该如何实现？

0 -> 1 -> 2 -> 3 -> 4 -> 5

可能会有很多同学想到使用如下简单粗暴的方案去做。

答案1

对于以上的方案，虽然能实现这个简单的需求，但是并不能算面试时的一个加分项。

如果考虑到异步执行后的操作，上面的代码就会显得很吃力，那该怎么办呢？

• ES6的Promise

如果你对ES6的Promise有所了解，会很容易想到使用Promise去实现。

ES6的Promise

追问4

既然掌握了ES6的Promise，我们可以更加追求代码的极致，使用ES7的async和await。

这里给出使用async和await的解决方案。

ES7的async和await

总结

本篇文章从一个简单的Javascript面试题开始，进行了一系列的追问，想一想你能答对几个追问呢？如果又不会的，记得回去查漏补缺，学习响应的知识。