狗哥题目现在越来越飘逸
一接电话,电话背景声模糊之极,犹如在美军中东战场前线战壕深处,白人大叔,寒暄了两句开始问问题:
假设有个 animalFetcher(‘g’, function(result) { console.log(results) });
animalFetcher 第一个parameter可以看成是一个User input,第二个parameter是一个callback function,可以在console.log()里面显示出results
然后有几个Fetcher function跟这个animalFetcher一样,求问:
fetchAll = combineFetchers([fruitFetcher, animalFetcher, mineralFetcher]);
fetchAll(’‘g’’, function(results) {console.log(results)})
如何在这个fetchAll的function里面,显示出所有fetchers results的合集,
并请讨论,如果有几千个fetchers的话,怎么优化?从前端和后端角度。
byd6540
(比亚迪)
11 November 2018 15:19
2
fetchAll = combineFetchers([animalFetcher, fruitFetcher, mineralFetcher]);
fetchAll(4, function (res) {console.log(res);});
function combineFetchers (arr) {
var list = [];
return function (input, func) {
arr.forEach(function (ele) {
ele(input, function (res) {list.push(res);});
});
func(list);
}
}
function animalFetcher (userInput, callback) {
var result = userInput + 1;
callback(result);
}
function fruitFetcher (userInput, callback) {
var result = userInput + 2;
callback(result);
}
function mineralFetcher (userInput, callback) {
var result = userInput + 3;
callback(result);
}
这是我的理解,模拟了Fetcher函数,不知楼主用到什么更好的方法。
非常感谢提供的题型,很有收获。
另外请问楼主如何优化?前端和后端?
补充内容 (2018-7-13 11:29):
另外再请问楼主,这是Google Front End什么level的问题?new grad? 这电面大概给多长时间?
0572C
(豆豆)
11 November 2018 15:21
3
[mw_shl_code=javascript,true]fetchAll = combineFetchers([animalFetcher, fruitFetcher, mineralFetcher …
感谢分享答案,但是这个答案还是有点问题,你假设了animalFetcher, fruitFetcher和mineralFetcher是同步方法,而这些fetch方法是异步的话,那么在console.log输出list的话,会是一个空的数组。
把以上的fetch方法改成异步的,可以在这里运行一下:https://repl.it/@NormanXin/FetchAllBug
正确的版本:https://repl.it/@NormanXin/FetchAll
更简练优雅的promise版本:https://repl.it/@NormanXin/FetchAllPromise
优化策略:
前端:
在用户使用看见或使用数据之前考虑进行prefetch;
如果callback中数据处理逻辑比较复杂费时,考虑使用web worker多线程对fetch数据进行处理;
fetch到的数据浏览器端cache起来
后端:
重构API,提供能将多个request合并在一起的API;
请求量较大数据结果,放在in memory cache里;
请求量较大的话,考虑增加server数量或消息队列;
欢迎各位前端或后端大神继续补充。
这道题现在想起来,其实可以看成是考察面试者怎么读code和问问题的能力,有很多问题需要你问面试官才能知道怎么写。
这道题面试角度感觉是从code review的角度切入的
这道题其实有点迷惑性,刚开始我也问了很多问题,归纳下来就是:
fetcher里面是不是生成了一个result?
fetcher的第二个callback function是不是可以更改?
其实归纳下来就是,animalFetcher(userInput, callback)
然后现在有:
fruitFetcher(userInput, callback)
animalFetcher(userInput, callback)
mineralFetcher(userInput, callback)
问写一个fetchAll function,然后在fetchAll(useInput, function (results) {console.log(results)})的results里面得到三个fetcher的results combined。
这道题如果像我问的这么直白的话,基本就是5分钟搞定。但如果按照面试官这么问,就会有迷惑性
[mw_shl_code=javascript,true]fetchAll = combineFetchers([animalFetcher, fruitFetcher, mineralFetcher …
我的答案跟你基本是一样的,其实这道题很简单,考察的就是对JS里面Callback的理解和运用,当然还有分析问题的能力,因为全程面试小哥基本不怎么提示,你问问题他会回答。
优化方面:
前端的话,我想到的就是讲requests分批处理,可以将UI设计的暂时显示一部分项目,让用户先看那些处理完毕的fetchers,随着得到的results越来越多,再在接下来的页面上进行显示。
后端的话,我感觉答得不太好,大致思路也是分批处理,讲了一下运用Load Balancer将fetchers分到不同服务器处理。
其实我希望如果地里有前端大神,可以讲一下这个优化上面的问题,面试两次被问到,我觉得这个问题是看面试者有没有足够经验用不同方法优化,答案并不是固定的。
我面的是普通的Front End Software Engineer,是谷歌Recruiter Team直接找我的,面向的估计是在职,需要工作经验,时间45分钟。
byd6540
(比亚迪)
11 November 2018 15:26
8
感谢楼主的回复。
还有个小问题想请教楼主:请问这类JS的面试题,在哪里有比较全面的练习呢?
我是18 new grad,对前端非常热爱。平时都是用JS刷Leetcode上面的算法,但是没找到很多这类JS的题。
不知道楼主是如何准备前端面试的?
非常感谢
其实是这样,根据以往经验,面试官会根据你的简历来问问题,如果你简历上前端项目不是很多的话,就很有可能会问你一些算法题目,因为有可能面试官也不知道怎么问一个New Graduate。
但如果你的简历上面是那种做过一些有趣的前端项目,面试官就会从你的项目经历中想到一些他觉得有必要考你的地方,所以就会问这种题目。我觉得我的个人简历上会引导面试官问一些项目上的问题,基本上我最近的电面,都没有直接问到算法,都是这种实际项目中出现的问题。
但也不代表不考算法或者数据结构,因为前端很大一部分工作是处理接收到的数据,面试官问你怎么处理数据的时候就是问你算法。但会比Leetcode更加贴近实际。也会看你如何思考问题,反正即使卡住了,你也要把自己想到哪里说出来。
我觉得如果是刚毕业,可以自己跟着Udemy上的一些课程来做东西。比如最新的几个前端架构(Angular, React,Vue)跟着做一遍。然后自己想一个比较好的小题目(我通常是写Todo List,比较有代表性),自己写一遍,你就会遇到很多你以前不知道的问题,然后去网上查。
平时多注意总结,我用Evernote总结了一些重要的点需要反复记忆,我比较笨,所以每次面试前都快速过一遍。可以去Medium上面读点技术文章,我发现最近这个对我帮助很大,慢慢你就会对这类面试问题有感觉。
我觉得如果我是面试官,如果看到你做过挺多项目,我会倾向问你一些小细节,看你是怎么处理的,然后问你一个需要处理数据的题目,变向考你算法。
不知道这些有没有帮到你,有什么不懂的可以问我。
1 Like