由一道简单的js面试题发起的一系列追问
导语:由一道简单的JS面试题发起的一系列追问,看看你能答对几个?
不起眼的开始本文将从一道简单的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面试题开始,进行了一系列的追问,想一想你能答对几个追问呢?如果又不会的,记得回去查漏补缺,学习响应的知识。
本文内容由快快网络小洁整理编辑!