美团前端面试小结

美团是我自学前端以来第一次去现场的面试，在网上搜了一下以往的面经，普遍反映说美团面试超级高效，都是技术面，这次去真的是体验到了。一共面了三轮，每轮都差不多一个小时，都要写代码。
一面主要是考察对CSS、JavaScript基本知识的掌握，数据结构算法也会问。总之就是对考察基本功啦。
二面就没那么细了，稍微宏观一点，有一种考察你对前端有没有sense的感觉，比如在怎么实现一个模块，有哪些方法、注意事项啥的，当然也会写代码。
三面应该是Boss级别的吧，各种问题啊，兴趣爱好未来规划啥的，感觉有点像了解你这个人的性格和美团契合不了。前面说了都是技术面嘛，最后还是要写代码的。
由于自己才学两个月，心里超级没底啊，很紧张的说。住同学那儿离得远，买了袋奥利奥心想那边有没有快餐啥的到了再去吃午饭，事实证明我想多了，导致每轮面到后面我都感觉到胃在收缩啊，无法思考啊妈蛋，然后面完休息的10来分钟狂吃奥利奥，，，好囧，，，以后一定要吸取教训，吃得饱饱的去。
噢噢，虽然最后还是没有通过面试，但是美团绝对是我目前所有面试中收获最多的一次，觉得很有必要记录一下。当当当，干货来了：

一面

一面是个和我年纪差不多的萌萌哒小哥，啊哈哈，一看到他那么年轻，瞬间有种同龄人的亲切感，没那么紧张了。
不过小哥虽然看起来稚嫩，也是绝不废话，干净利索地在纸上记录他提的问题还有我的回答，不一会儿就记了好多。一面就主要是考察前端的基础还有算法。。。（小哥问我算法和数据结构了解得怎么样，我好心虚，说只了解基本的排序啥的）。

好了开说问题：
1.一个浮动的div后面又跟了一个div，在页面上是怎么布局的：
分别讨论了这几种情况：
（1）前一个div有宽度和高度，后一个div有高度宽度没有设置。
我勒个去一开始答错了，说没有个宽度那应该是条竖线吧，小哥笑了笑说display你有了解么，说了一通，他问display:block是啥意思，又blalala，小哥说那块元素是啥，我说会占满整行，小哥就说那为啥那个会是竖线呢。好丢人啊。。。这么基础的。
（2）后面一个div中间有很多文字，会怎么显示。
（3）下面的图怎么实现：

2.怎么实现焦点轮播图
除了给序号绑定事件之前用属性记录外，还能用什么。。。闭包的理解差到爆啊。

3.绑定事件都有哪些方法，你为什么要用onclick这种方式
4. 事件捕获的应用场景，那事件冒泡有用过吗，什么时候需要用到事件冒泡。然后出了一道题：
<\ul id=’list’>
<\li><\li> ….有n多个
<\ul>
要实现点击一个li就能显示它内部文本。
我写了个最普通的在li上绑定事件，小哥说那要是li是动态增长的呢。你获取li集合是之前的了，我说那用事件冒泡，给ul绑定点击事件，事件处理程序中再重新获取它下面的li，动态给每个li 绑定事件，小哥说那你的这个ul只是给li绑定了事件，但是这次就不能触发li上的事件了呀，然后又讨论到怎么知道点击到哪个li，小哥说可以用event对象，它应该是有个属性吧，，，但是不知道。。。
查了一下可以用event对象的属性target或者是srcElement，他们都指向最具体的那个目标元素：

var list=document.getElementById("list");    list.onclick=function(ev){        var oEvent=ev||event;        var target=oEvent.target||oEvent.srcElement;        alert(target.innerHTML);    }

事件会冒泡到ul上，ul上绑定了onclick事件，事件处理程序中是输出具体目标元素的innerHTML内容。这样，即便时li数目动态增长了，也不会出现之前所说的问题。

5.写了个归并排序。期间还把数组给写错了，new Array()，小哥说这个在java中是接口，不能new。

6.分析各种排序算法的复杂度，最优和最差。快速排序的复杂度为毛是O(nlogn)。
应该还有问别的问题，有点想不起了。。。然后小哥收拾桌上的纸说你在这儿等一下，我就眼前一亮，啊哈原来一面过了呀，前面有好几个写代码的都写得不好，很多错，小哥一直在引导我思考，哪儿错了，该怎么改。最后小哥还跟我说厕所该怎么走，太贴心了呀，小哥好人一生平安。

二面

二面的面试官有程序员的某种典型形象哈哈，自行脑补。他好像有点忙的样子，我在想题的过程中他就在看手机，，到后面又说了好几次上一轮面试的时间没太控制好balalala，小哥回去不会挨批吧。。。不太考基础了，考了对前端的认识，还有一些功能上的整体设计这种。

1.为啥要做前端，前端喜欢那些方面，我说了交互、界面啥的，他就立马问你见过哪些交互做得好的，哪些网站的界面做得漂亮，我说了禅意花园，他说你有看那本书吗，为什么不看，然后又说他们有个网站上面有很多作品你可以去看看。

2.给一个输入框，下面要动态给出提示词，怎么实现，大概分几个板块。我用了keyup事件。面试官又说如果用户输入v,vi,v,vivi,via。。。应该什么时候获取输入框中的文本发送给服务器不会发送太多请求。我说了个延迟多久才发送，好像不太合理的样子。。。。他又说怎么实现输入拼音或首写字母提示框中能出现可能的汉字。。这个真不知道，面试官说有个拼音库的东西。。。

3.用户注册表单，作为前端你应该做怎样的设计，应该考虑什么防范因素：
我说了恶意代码，他说这个数据库那边会考虑；
我又说应该考虑什么时候把用户输入的数据异步发送过去验证；
他问我如果返回了用户名已被注册，怎么防止别人破解出密码（暴力破解）。我没答出来，面试官说限制输入次数，，验证码啥的。。。

4.编程题：
一个int类型的数据只能存储16位的正整数，即范围是10^16-1.问怎么求任意大的数的阶乘。编程。
我说转成字符串拆分，他说思路对的。后面的运算法则那块儿就想不下去了。面试官又降低了难度，说只允许个位数相乘，那怎么求解两位数相乘。。。艾玛当时好饿呀，觉得已经无法思考了，面试官说你现在可能已经晕了，回去再想吧，囧。。。

表示第二轮面试应该要有挺多开发经验才能答，对于我这种小白真心是招架不住。面试官还问我你在这儿实习了准备怎么学前端，怎么和其他人竞争留下来，啊啊啊啊，好忧桑，觉得自己那么菜，我还是说了点自己准备怎么学。他又问我有什么优点，技术类非技术的都可以说。

三面

答得不好都能进三面我还是很意外的，也很开心呀。心想三面应该是走过场吧，后来证明我想错了。美团三轮都是技术~~~三面应该是部门主管那种boss级别的level吧，果然面试官气场很强啊，有种霸道总裁的犀利和严肃哈哈，虽然穿了个程序员标配→_→大裤衩但是丝毫没有削弱那种气场，一遇到气场强的人我就怂，面试过程中真的是一直很怂~

1.怎么自学前端的，都有哪些方式，我说了知乎、csdn，他问我知乎账号是啥，我一直是浏览器记住密码或者用邮箱登陆的，真的不太记得了。。。不会以为我在撒谎吧。
2.关注哪些技术人、非技术人（崇拜的人）
3.影响最深的三本书非技术类、技术类
4.有想过进其他传统行业吗
5.职业规划五年，有想做产品经理吗
6.考虑的工作地点
7.为毛没实习过。。。囧。。。我能说以前没开窍，很不喜欢写代码，不想做程序员么。
8.为什么不找人内推。。。
9.为啥不想做研究，导师有推荐工作吗，有考虑做移动端的开发吗，安卓，ios。。。
10.问了我前端哪块儿比较熟，可以选方向闯关。。。艾玛，我说JavaScript。
他问那==和===有啥区别，那[]===[]和[]==[]会返回什么。他说你先别急着说答案，可以自己先分析。我就说等号两头的[]是两个不同的对象，应该会返回false，他反问了你觉得是false？瞬间搞的我没底，又想了下，回来后自己查的确是返回false的，这是压力面么，，还是怪自己掌握得不透彻。
11.primitive value都有哪些类型，我说有null，他呵呵了，我又说null是空对象，那应该是引用类型吧，他没肯定，说typeof null返回的是object，但是应该在不久的将来规定会返回null。我记得我看的书上说null是primitive的呀。。。
12.然后这都回答不出来，他就不问JavaScript了，说出道编程题你给做，用什么语言都行：
一个老师一学期的课表，用数字来表示这个周有没有课，有课的周记为1，没课的周为0。然后给定一个数字，可能是十进制的，要输出老师的哪些周有课，哪些没课。比如：11100101输出形式按以下方式：
1~3：”yes”,2~4:”no”,5:”yes”,6:”no”,7:”yes”
我说了下思路，他问了toStirng()里面的参数都可以是哪些，40可以吗，为什么不可以。下面是我写得代码，不知道有没有更简单的方法：

function schedule(num){        var scheStr=num.toString(2); //'11100101001'        console.log(scheStr);        var flag={            value:'',            count:0            };        for(var i=0;i<scheStr.length;i++){            if(flag.value=="" || (scheStr[i]==flag.value)){ //某个字符和前一个相同                flag.value=scheStr[i];                flag.count=1+flag.count;            }else if(scheStr[i]!=flag.value){   //和前一个不同,输出之前的并将当前字符的值存入value，更改count值              showResult(i,flag.value,flag.count);              flag.count=1;              flag.value=scheStr[i];            }            //i进行到最后一个字符没有下一个字符来触发，应该输出最后的结果            if(i==scheStr.length-1){                  showResult(i,flag.value,flag.count);            }        }    }    function showResult(index,value,count){        if(value=='1'){            count>1?console.log((index-count+1)+'~'+index+': yes') : console.log(index+':yes');        }else if(value=='0'){            count>1?console.log((index-count+1)+'~'+index+': no') : console.log(index+':no');        }       }

12.面到上面一道题都5点多了，他又我出了道怎么把一个矩阵按斜线的方向打出来，让做完后发给他好后续安排：

    1  2  3  4    5  6  7  8    9  10 11 12

即 4 3 8 2 7 12 1 6 11 5 10 9.
木有思路呀，，网上查了下，改了个代码：

function printMatrixBySlash(arr){       var rows=arr.length;          var cols=arr[0].length;       var Min=Math.min(rows,cols); //限制了斜线中元素个数增长的上限       var lines=rows+cols-1;//斜线数目       var len=0,r=0,c=0;        //求每条斜线的起始坐标、长度即可       for(var i=0;i<lines;i++){           len=Math.min(Math.min(i+1,Min),rows+cols-1-i);           r=Math.max(0,i-(cols-1));           c=Math.max(0,cols-i-1);           var res=[];           for(var j=0;j<len;j++){               res[j]=arr[r+j][c+j];           }           var p=document.createElement("p");           p.innerHTML=res.join(" ");           result.appendChild(p);       }     }   //测试    var arr=[[1,2,3,23],            [4,5,6,56],            [7,8,9,13]           ];   var orgMatrix=document.getElementById("orgMatrix");   var para=document.createElement("p");   for(var i=0;i<arr.length;i++){       para.innerHTML=para.innerHTML+arr[i].join(" ")+"</br>";   }   orgMatrix.appendChild(para);   var result=document.getElementById("result");   printMatrixBySlash(arr); 

蓝后我就坐公交回同学那儿了，两个多小时，又累有饿，腿都快断了。
后记：题发了好几天还是没有回应，我就在知乎上提问说美团面试一般多久给结果，后来很快就收到邮件，就是最后一个面试官发来的！说在知乎上看到我的提问了，特地来回复我，，，木有被录取，但是会帮我问其他部门招不招，，虽然希望不大，但还是很感谢他。

不得不再说一次，这次美团面试真的是收获很大，美团优秀的面试官和他们高效的面试过程给我的印象很深刻。再总结一下吧：

1.相对于直接给出答案，面试官更看重你的分析过程，所以尽量要给人家说清楚你的思考过程，即便不能得到最后答案，也要让别人看到你是会思考的。

2.对于回答错误的题，在面试官的引导下（好的面试官是会引导你思考的），你要发现并解决问题，这样人家会觉得你具有可塑性，具有解决问题的能力，即便是目前所掌握的技术还不好

3.要对自己的学习过程有充分的理解，多种途径学习，通过问你的怎么自学前端的可以考察你的学习能力

4.对职业有明确的规划，才能走得更远，对企业来说他们也会认为你有稳定性

5.既然要做技术，视野就要开阔，多浏览博客、论坛啥的，关注一些牛人

经过美团的面试，不再怕当面写程序了，以前对这个超级恐惧的，现在觉得即便是你从来没有见过的题目，经过思考也是会有思路的，再次感谢面试官的引导呀~~~~好啦，这篇面试小结就写到这儿吧，继续努力，希望以后有实力进优秀的大公司。