7.10 狗哥 JS 面试

狗哥题目现在越来越飘逸
一接电话,电话背景声模糊之极,犹如在美军中东战场前线战壕深处,白人大叔,寒暄了两句开始问问题:

假设有个 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)})

  1. 如何在这个fetchAll的function里面,显示出所有fetchers results的合集,
  2. 并请讨论,如果有几千个fetchers的话,怎么优化?从前端和后端角度。
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? 这电面大概给多长时间?

感谢分享答案,但是这个答案还是有点问题,你假设了animalFetcher, fruitFetcher和mineralFetcher是同步方法,而这些fetch方法是异步的话,那么在console.log输出list的话,会是一个空的数组。

把以上的fetch方法改成异步的,可以在这里运行一下:https://repl.it/@NormanXin/FetchAllBug
正确的版本:https://repl.it/@NormanXin/FetchAll
更简练优雅的promise版本:https://repl.it/@NormanXin/FetchAllPromise

优化策略:
前端:

  1. 在用户使用看见或使用数据之前考虑进行prefetch;
  2. 如果callback中数据处理逻辑比较复杂费时,考虑使用web worker多线程对fetch数据进行处理;
  3. fetch到的数据浏览器端cache起来

后端:

  1. 重构API,提供能将多个request合并在一起的API;
  2. 请求量较大数据结果,放在in memory cache里;
  3. 请求量较大的话,考虑增加server数量或消息队列;

欢迎各位前端或后端大神继续补充。

这道题现在想起来,其实可以看成是考察面试者怎么读code和问问题的能力,有很多问题需要你问面试官才能知道怎么写。

这道题面试角度感觉是从code review的角度切入的

看不懂啊看不懂。谢谢

这道题其实有点迷惑性,刚开始我也问了很多问题,归纳下来就是:

  1. fetcher里面是不是生成了一个result?
  2. 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分钟搞定。但如果按照面试官这么问,就会有迷惑性

我的答案跟你基本是一样的,其实这道题很简单,考察的就是对JS里面Callback的理解和运用,当然还有分析问题的能力,因为全程面试小哥基本不怎么提示,你问问题他会回答。

优化方面:

前端的话,我想到的就是讲requests分批处理,可以将UI设计的暂时显示一部分项目,让用户先看那些处理完毕的fetchers,随着得到的results越来越多,再在接下来的页面上进行显示。

后端的话,我感觉答得不太好,大致思路也是分批处理,讲了一下运用Load Balancer将fetchers分到不同服务器处理。

其实我希望如果地里有前端大神,可以讲一下这个优化上面的问题,面试两次被问到,我觉得这个问题是看面试者有没有足够经验用不同方法优化,答案并不是固定的。

我面的是普通的Front End Software Engineer,是谷歌Recruiter Team直接找我的,面向的估计是在职,需要工作经验,时间45分钟。

感谢楼主的回复。
还有个小问题想请教楼主:请问这类JS的面试题,在哪里有比较全面的练习呢?
我是18 new grad,对前端非常热爱。平时都是用JS刷Leetcode上面的算法,但是没找到很多这类JS的题。
不知道楼主是如何准备前端面试的?
非常感谢

其实是这样,根据以往经验,面试官会根据你的简历来问问题,如果你简历上前端项目不是很多的话,就很有可能会问你一些算法题目,因为有可能面试官也不知道怎么问一个New Graduate。

但如果你的简历上面是那种做过一些有趣的前端项目,面试官就会从你的项目经历中想到一些他觉得有必要考你的地方,所以就会问这种题目。我觉得我的个人简历上会引导面试官问一些项目上的问题,基本上我最近的电面,都没有直接问到算法,都是这种实际项目中出现的问题。

但也不代表不考算法或者数据结构,因为前端很大一部分工作是处理接收到的数据,面试官问你怎么处理数据的时候就是问你算法。但会比Leetcode更加贴近实际。也会看你如何思考问题,反正即使卡住了,你也要把自己想到哪里说出来。

我觉得如果是刚毕业,可以自己跟着Udemy上的一些课程来做东西。比如最新的几个前端架构(Angular, React,Vue)跟着做一遍。然后自己想一个比较好的小题目(我通常是写Todo List,比较有代表性),自己写一遍,你就会遇到很多你以前不知道的问题,然后去网上查。

平时多注意总结,我用Evernote总结了一些重要的点需要反复记忆,我比较笨,所以每次面试前都快速过一遍。可以去Medium上面读点技术文章,我发现最近这个对我帮助很大,慢慢你就会对这类面试问题有感觉。

我觉得如果我是面试官,如果看到你做过挺多项目,我会倾向问你一些小细节,看你是怎么处理的,然后问你一个需要处理数据的题目,变向考你算法。

不知道这些有没有帮到你,有什么不懂的可以问我。

1 Like

楼主好赞 用心帮助大家!