记一次XX前端面试

作者:shiyangzhaoa 原文链接

前因，没有比摸鱼有趣的事了

距离自己被外派(俗称外包)出去，已经过了快五个月，工作的话，很闲。人啊，一定保持好的习惯，懒惰是会上瘾，日常摸鱼，怀疑人生，我是谁，我在哪，我要干什么。

中午吃饭的时候，收到了boss直聘的一条消息，XX发来一个信息，是一个前端职位，问我是否感兴趣，讲道理，我还是很诧异的，一是我BOSS直聘上的简历很久没更新了，二是我的在线简历写的一塌糊涂，连项目介绍都没有，我猜应该是HR手点错了，发错消息了。

思考了一会，想着试试吧，就点了感兴趣，一天过去了，我看没回，emmm，果然点错了。结果后来又联系我，希望我把简历发给她，我一想，还有戏，晚上的时候草草写了一份简历递了过去。然后又一天过去了，接着又过去了一天，我想，差不多凉了。谁知道后来又联系了我，问我下周有没有时间去面试，我靠，那天可是星期五啊，我啥都木有准备，面试不是直接翻船，而且下周这边的项目还要上线，问星期五可以不？两天过去了，我想，差不多凉了吧，后面又回了了，说可以，邮件已经发到我邮箱了。我掐指一算，还有四天，赶紧将自己的switch、3DSLL收了起来，开始准备面试，然后自己给自己出面试题。
过程

自己给自己出面试题是个艰难的过程，就像自己和自己下象棋一样。花了好几天做了个总结，将自己记录过的难点和自己想理解的东西做了个总结。除了排序的话，其他都是自己写的，整个过程也碰到些麻烦，改了很多次。我把这些放在了GitHub上，我用了我老婆的照片，各位别介意。这些问题，有的我给了详细的解题过程，喜欢的话点个star吧。后期遇到一些有趣的东西我也会在上面更新的。

我会在最后分析一些问题的解题过程。

姿势
面试过程

讲道理，XX的大楼，感觉还不错。来的有点早，在下面找了个奶茶店，一边疯狂喝水，一遍思考人生。然后到点了，就上去了，面试是在8楼，讲道理，还是有点紧张的，毕竟一年没准备过面试了，心里还是很玄的。进去以后，和其他面试的小伙伴分配到一个房间了，过了一会，有人拿了面试题过来，给了隔壁的小伙伴。。。我偷偷瞄了一眼，是 爪哇。过了一会又过来了，拿了两份面试题，一份给了我，一份给了另一个小伙伴，都是前端的。面试题总共三页还是四页，都是基础，拿起笔 pia pia 就写了起来，过了一会就交了，刚交就想起来自己一道题做错了，感觉很难受。。。小插曲：旁边面 爪哇 的小伙伴用手机疯狂百度，笔试过程没人管的，我是老实人，不干这事
一面

面试官感觉人不错，拿着我的面试题和简历到外面去了，我赶紧和他说我一道题做错了，并说了正确答案。面试官表示他还没看面试题，然后过了一遍，不好意思，我好像全做对了。。。刚开始就随便问了问this，严格模式和非严格模式下执行函数的this。

干货，整个过程都是用笔写的

我提了，说面试题目太简单了（现在想想的确这样说不好），然后面试官就说，那我给你出个不简单的，flatten的实现，我一想，这个我好像写过，拿起笔，啪啪啪就写起来了。过

问了我知不知道最近网上的快排事件，我说知道，就让我写了，我用的是最常用的3while写法，写到一半他就没让我写了，我写的和书上的一毛一样。。。然后又让我说出归并排序的原理，这个没有让我写了，我就直接说了，就是切成两个数组，巴拉巴拉，具体自己上网查询。过

知道immer.js吗，Mobx作者弄的一个不可变数据，知道的不多，就随便说了说，然后又让我说明了immutable.js的数据更新原理，和react的tree diff有点像，巴拉巴拉将自己知道说了。过

KOA中间件原理，卧槽，这个我读过源码，还分析过，就是通过compose组合中间件，巴拉巴拉。过

获取所有文件和文件夹。这个就是个树结构，因为我记不清fs APi的使用了，就问能不能用dom树去代替，面试官说可以，这个我写过。。。巴拉巴拉，面试官说，能不能不用递归，用while+广度+深度还是啥，我靠，我懵了，虽然我知道广度优先，深度优先，但我特么没写过啊，有点紧张，抓着笔思考了会人生，面试官看我这样，就向我解释了下。卒

面试官说：“那我问你一个哲学的问题，为什么有数据结构这种东西？”哇，这是啥，巴拉巴拉扯了一通，大致就是物以类聚，人以群分，先人积累下来的经验，这些让我们更方便处理数据啥的。尬

对函数式编程了解多少，对算法了解多少。我函数式懂的不多，函数式编程还是比较难的，什么y组合子，听着就晕。算法就随便说了些，动态规划树啊啥的。面试官问我是怎样学习算法的，我就说自己平时会在知乎看些相关的文章。然后面试官就说想我这样零散的看并不能获得太大提高，应该有组织的去看。关于函数式，他向我推荐了Haskell，说我只需要看看基本就可以了，然后再去看redux就会好很多。懵

又问了很多，然后问我想了解什么，其实我知道XX的技术栈的，所以就说了些，表示有很大的兴趣。

其他问题就不一一列举了，他还问我看了关于node的什么书籍，我张口差点说了《九浅一深nodejs》。。。我已经记不清楚是谁带的头了

总结：面试官和我说，人的知识结构是T字型的，底下的都是基础知识，只有基础知识弄好才能学习更广的知识，然后说了我基础不太好。。。我一想，完蛋，这下真凉了，我的认知里，基础是最重要的。
二面

一面面试官把我带回去了，让我等一会，过了一会，二面面试官来了，继续和面试官一起出去。二面问的问题就是舒服多了。

因为我在简历中写了用了react和vue，就问了我两者有什么不同。我就说了更新策略啊，react通过setState手动批量更新，vue是Object.defineProperty去监听属性变化。然后还有什么slot和this.props.children这样。

关于redux的一些问题，熟悉redux一般不会有太大问题。

就是一些杂碎的问题，为啥想离职，关于离职，多从自身找问题，别说公司咋的咋的，很不好。

又问了些，然后问我想知道什么，我balala说了一些，然后问面试是不是结束了，然后他说是，结果下个星期出来，我一听，这下真凉了，好歹有个三面人事面吧。。。

最后面试官把我带了回去，也没说让我走，等了半个小时，我想大概挂了，就找了别的员工问了下是不是自己可以走了，然后问了人事，说把我忘了。。。以为二面面试官把我送走了，准备打电话和我通知的。然后人事说让我放心，给了口头offer，正式offer下个星期给我，然后就是和说要准备什么，让我看邮件。总体面试效率比较高了。
结局

还算满意吧，表现的的确不太好，但也算把自己学的东西说出来了。结局也是好的，顺利拿到offer。
解析，补充一些小东西，具体看源码

扁平化数组，flatten已经进入规范，在MDN上的Array可以查到该方法，记住一点，能用reduce的都用reduce，数组运算，你的下次运算结果需要用到上次运算的结果，都可以用reduce。

const flatten = (arr) => arr.reduce((a, b) => {   
    if (Array.isArray(b)) {     
        return a.concat(flatten(b));     // 该项是数组，连接 递归调用的结果，否则直接连接  
     }  
 return a.concat(b); 
}, []); 

深克隆

需要注意的坑就是typeof null、typeof RegExp('test')、typeof newDate()、typeof new Boolean(true)、typeof new String('t')、typeof new Number(1)为object，数组和对象也要区分开，具体看源码。

求一个页面多少dom节点

原理和flatten一样，都是递归，看源码

求dom树结构

这个个人觉得挺重要的，也很有趣，看源码，也是递归

求一颗dom树的最大深度 原理是递归一次，就说明向下走了一层，记录最大值，比较，结束后返回

const getDomDepth = (node) => {   
 let max = 1;  
 void function fn(d, m) {     
     m++;     
    Array.from(d.children).forEach(n => {       
        if (n.children.length) {        
             fn(n, m);      
         } else {         
            if (max < m)  max = m;       
        }     
    })  
 }(node, 1);   return max; } 

看源码->看源码->看源码，帮忙点star ==，遇到不理解的在issues里面提出来，倒数第二题我还没写，因为当晚去看react的东西了，今天又去了前端千人峰会（一个人）。晚点补充。

这些东西也不算简单，如果感到疑惑也没什么，分析出来只是希望能帮助大家理解一些东西，与君共勉，加油～