这一道前端开发面试题火了!数千名程序员都在思考它

原创 智云编程 随笔 资讯 105阅读 7 天前 举报

金三银四,技术论坛上诸如:阿里、头条、腾讯….面经层出不穷,朋友圈很多小伙伴都在找工作也遇到了各种各样的麻烦。本文希望那些在准备面试的过程中蕉绿的童鞋别僵化了自己的思维,以自己曾经遇见到一道面试题为引,用自己对待问题的想法行文,天马行空,从僵硬的知识点中跳脱出来一起思考,内容简单易懂。

题目简析

我们观察fucArr每一个子项都具有如下结构:

接收一个方法 next
有一个计时器,计时器回调方法体内对应着相应的输出
输出结束调用next方法。

他们的差异就是:计时器时间逐个减少。

直接循环调用 3 个方法肯定是不可取的。为了能按序输出,函数的执行过程应该是上一个函数console之后, 再执行下一个函数,而接收的这个next参数就是执行下一个方法的关键。因为是头到尾依次调用,我们就把fucArr称之为一个队列。

思路一、

我们假象自己是个编译器,然后把执行的过程进行单步拆解。

fucArr 是做先执行等待队列第一个,等待中的函数队列为原函数队列的slice(1);
等待next执行后,然后又执行等待函数队列的第一个函数,等待中的函数队列为原函数队列的slice(1);

听着是不是很像一个递归的过程,没错,那我们先用递归来实现一下

思路二、

现在我们从递归的思路中跳脱出来,换种思路继续思考.....

上一个函数执行到某个时机触发了下一个函数的执行。

也就是说上一个函数 trigger,下一个函数才开始执行。

根据描述 trigger 实际上做的就是触发等待队列的第一个函数的执行,因此我们可以如下定义。

那么 trigger何时进行调用呢?很显然, 上一个函数式通过next去触发下一个函数调用,因此trigger应该就是函数接收的next,我们为了方便参数绑定需要重构一下咱们的等待队列函数。当然不要忘了,首次执行要手动trigger一下喔。

其实做参数绑定还有一种更优雅一点的方式,bind,所以大家注意咯,bind不单单能绑定this喔。

我们可以稍微改动一下:

都9102年了,既然是前端面试那肯定少不了Promise 的对吧,那我们可不可以掺入一些Promise的元素在里面呢?答案是必然的。

根据Promise的特性,当本身状态改变,去触发then里的方法(这里不要深究这句话,意思了解就好)。是resolve作为本身状态改动的方法。那状态改变是去做什么事呢?好的,没错trigger。那何时状态改变呢?上一个函数next调用的时候。

redux的思路、

现在继续清空上面的思路,不要被干扰。

首先给applymidd(以下简称amw)一个简单的定义,amw是接收若干个函数作为参数,最终会返回一个函数,这个函数调用,会按照顺序,依次执行前面作为参数传入的函数。为了不把问题复杂化,请接收我的误导引导,不要怀疑。

以下是作为参数传入的函数要求的结构以下称a结构:

a结构在第一次调用时,会返回一个方法,第二次调用时返回第二个方法,我们先来看源码的一个操作过程。

首先是一层循环调用,使得函数体变为b结构:

这样做是为了以闭包的形式在 dosomething中能够使用到middlewareApi

根据b结构我们可以稍稍改变下原题 :

变题相对于多了一个参数传递的过程,实际上我们需要顺序执行的其实是结构c:

这些关键还是要如何构建每个函数接收的参数next

我们做如下假设,当fucArr只有一个函数时 返回的就应该是:

fucArr有两个函数时返回:

当有三个函数的时返回:

仔细观察返回函数的结构发现,所有的函数都是接受上一个函数调用后的返回值(以下称模式1),最后一个函数接收的是一个空函数。我们尝试构建模式1:

pre+ next + 遍历,这三个关键词没错,就是reduce。因此:

所以最终形态是

总结

其实还可以聊下expresskoa中间件compose的思路,但是没有必要(汪汪大笑.gif)。本文主旨也不是灌输这个题目的解法,只是希望大家将来在面试和工作中遇到问题尝试着用自己构建的知识体系去解决积极面对,最后祝小伙伴们找工作顺利。

原文:https://juejin.im/post/5c8610a7f265da2de970b3ab

自己是从事了五年的前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有?

没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助那些想学习前端,却又不知道怎么开始学习的朋友。

如果你依然在编程的世界里迷茫,不知道自己的未来规划,可以加入web前端学习交流群:784783012 里面可以与大神一起交流并走出迷茫。新手可免费领取学习资料,看看前辈们是如何在编程的世界里傲然前行不停更新最新的教程和学习方法(详细的前端项目实战教学视频),有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复