7.10 狗哥 JS 面试

Job Hunting Interview
, , , , , ,
1

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

假设有个 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的话，怎么优化？从前端和后端角度。
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? 这电面大概给多长时间？

3

感谢分享答案，但是这个答案还是有点问题，你假设了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数量或消息队列；

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

4

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

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

5

看不懂啊看不懂。谢谢

6

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

  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分钟搞定。但如果按照面试官这么问，就会有迷惑性

7

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

优化方面：

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

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

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

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

8

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

9

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

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

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

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

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

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

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

1 Like
10

楼主好赞 用心帮助大家！