搜索
写经验 领红包
 > 娱乐

由一道简单的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面试题开始,进行了一系列的追问,想一想你能答对几个追问呢?如果又不会的,记得回去查漏补缺,学习响应的知识。

本文内容由快快网络小洁整理编辑!