2017年前端面试总结（一）

2017年跳槽面试总结果（一）

2017年是一个不平凡的一年，特朗普就职了、英国退欧了、法国和德国大选了、中国十九大召开了……呵呵。。这些都不跟做一个技术的码农没有半毛钱关系好像，那还是说说咱们自己的事吧，今年前端界也是比往年有质的变化，几乎市场饱和了，各种培训机构，学校都似乎都 看好了这个新起的职业前端工程师，把一批批的‘人才’都送入了职场，再加上各种互联网这个行业在这一年的各种不景气，突然发现你现在公开一个简历。主动邀请你面试的公司，稀稀拉拉也就是去年的30%了。

这一年对我来讲也注定是一个折腾的年，自去年年中入职一家互联网公司以来，早九晚十甚至后半夜这样的日子已经奋战了一年半了快，兄弟实在是承受不了这种压力和折磨了，身边的一个个战友都倒下了，我也在想如果哪天我也躺下起不来了。这也有点太亏了，好歹不是为了国家革命不是为了人民幸福生活而献身的，是为了这一点能顾得上吃喝拉撒的臭钱而倒下的，那就不值得了。所以果断哥们走了，每次换工作之前我一直跟自己讲一句话，`哥们这次一定干到退休，不想换了，面试对我来讲虽然是过来人，可是不想折腾了，可能因为这就是为什么不得不承认自己老的原因吧。接下来还得面对现实接着面试跑折腾，咱们说说十一假期前这5天面试情况。和碰见的面试题和大家分享下吧

我是十一长假前一周的第二天开始更新简历的。第一天简历各种网站公开以后，心想我这早上8点打开了，到11点我电话估计又得打爆了，哥们干这行六七年了，不能说自己大牛一个可是一般的工作问题应付还是还没有问题，可能我太高估自己了吧，16年以前情况是这样的。简历一公开。电话几乎被打爆，一天百十来个电话都没有一点夸张。各种拒绝小企业和初创企业，但是剩下的面试机会也排了一周之多，第天发邮箱里的邀请函邮件都有六七页要处理。我这心里想到这个往年的情景还乐着呢。。擦了。我就等到了下午4点了。居然只有二家公司给我打电话邀请面试，我顿时傻眼了。这是什么情况可能十一不是换工作的时期吧。只是这么安慰自己了。接着我就投吧。晚上海投30家。第二天毅然接到二三个电话。好吧，我认了，把眼前的这些公司把握好吧。第一天面试开如是一家大数据公司也C轮了做的产品还可以创业公司于是就去了，先给一个二页的笔试题让做。题如下：

 css部分： 1.如何垂直div(尽量多) 2.em与rem的相同点和不同点 js部分： 3.跨域问题的解决方案有哪些? 4.写出下面的运行结果：

var bar=0;var obj={    bar:1,    foo:function(){        console.log(this.bar);    }};var obj2={    bar:2,    foo:obj.foo};var obj3={    bar:3,    foo:function(){        return obj.foo;    }};var tempF=obj2.foo;obj.foo();obj2.foo();obj3.foo()();tempF();

1. 已知两个div, div1左上和右下的坐标，判断是否重叠？
   

1)简述过程

2）并填充程序
function Point (x,y){
this.x=x;
this.y=y;
}
//return true or false to indicate overlap or not

function is_overtap(l1,r1,l2,r2){

}
然后做完了这些题以后。接着又来了技术人员开始问这些问题如下。
1. vue.js 工作原理
2. vue.js react.js angular.js 优劣性
3. requir.js sea.js 区别，实现原理
4. js模板引擎原理
5. vueX工作原理
6. vue.js开发过程中组件化是怎么化分的？
7. 通过 emiton能实现的数据传递为何要用 vuex来实现？
8. webpack比起以往构建工具的优势？
9. 面相对象的模式

面题分析：

一：如何垂直div(尽量多)
这个题的答案就比较多了如下：
固定宽度高度居中方法：

通过定位

position: absolute;left: 50%;top: 50%;width:200px;height:100px;margin-left:-100px;margin-top:-50px;

通过line-height;

height:20px;line-height:20px

不固定高宽div居中方法如下：
1. 通过inline-block / vertical-align 结合

 .parent{        text-align:center; } .children{    display: inline-block;     vertical-align: middle;}

1. 可以用table布局方法

.parent{    display:table;}.children{   display: table-cell;   text-align: center;   vertical-align: middle;}

css3解决方法：
1. translate

position:absolute;left:50%; top:50%;transform: translate(-50%,-50%);

2.在父级元素上添加样式

justify-content:center;//子元素水平居中align-items:center;//子元素垂直居中display:-webkit-flex;

二题分析：
相同点：rem与em都是css相对单位。
不同点：
1、rem的大小是根据html根目录下的字体大小进行计算的。
2、rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。
3、em是基于父级的计算的。会继承父级的大小

三题答案：
1,2,0,0 this指向和作用常见场景不多解释了

四题答案：

这个题出的有点让人误解，我开始以为判断对应的点是否重合。后来才发现理解错了。是判断两个物体是否碰到一起。其实这个道理很简单的，如下图：

检测两个物体能否碰到一起，其实就是在一个物体的四周的区域算下距离 ，如果在不碰的范围内就返回一个false,否则返回一个true，其实实现这个有两种方案一种是利用当前物体的可视区的高和宽 offsetHeight offsetWidth offsetLeft offsetTop,分别进行对比如下：

function collTest(oDiv,oDiv2){    var l1=oDiv.offsetLeft;    var t1=oDiv.offsetTop;    var r1=oDiv.offsetLeft+oDiv.offsetWidth;    var b1=oDiv.offsetTop+oDiv.offsetHeight;        var l2=oDiv2.offsetLeft;    var t2=oDiv2.offsetTop;    var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;    var b2=oDiv2.offsetTop+oDiv2.offsetHeight;    if(r1<l2 || l1>r2 || b1<t2 || t1>b2){        return false;    }else{        return true;        }   }

另外一种就是这种坐标的方法，不过这里四个坐标分别通过x.y去计算才更准备才对即：

function Point (x,y){    this.x=x;    this.y=y;   }//return true or false to indicate overlap or notfunction is_overtap(l1,r1,l2,r2){    var l1=l1.x;    var t1=l1.y;    var r1=r1.x;    var b1=r1.y;        var l2=l2.x;    var t2=l2.y;    var r2=r2.x;    var b2=r2.y;    if(r1<l2 || l1>r2 || b1<t2 || t1>b2){        return false;    }else{        return true;        }   }

道理完全一样的。。

底下的一些问的问题理论性较多些。也基本没有什么难度，基本上很容易 ，最终这家公司面试的结果还算理想，最终也没有选择它是因为还有别的对比性，接下来还有几家的面试题，这里基本只说题了。别的废话也不多讲了
第二家是最近几年刚兴起的算是比较出名的互联网公司吧

去了也是做题，不过面试官基本守在你面前玩电脑，你在他面前做题，题出的都很老套，基本常问题的那些题

1. box-sizeing 种类和不同
2. HTML文档头
3. 跨域方法
4. 数据类型
5. 深度clone
6. 数组去重
7. js事件流机制
8. 闭包
9. HTML5特性
10. JS性能优化
    大概这些东西，我是实在是懒得写了。直接跟面试题说，我说下答案吧。你看下，我写字有点慢了。于是从头到尾说了下。然后最后一题算是有点水平吧。关于ES6 promise的一个执行顺序

console.log(1)new Promise(function (resolve, reject) {        console.log(2);        reject(true);        resolve(false);        setTimeout(function(){            console.log(3)        },0)    }).then(function (message) {    console.log(4)}, function (error) {    console.log(5)});console.log(6)

题分析结果：1 2 6 5 3，首先1 ，2，6这三个结果不用多说了吧，为什么没有先出现5，3，这个首先要了解promise是干什么的，他的两个参数分别代表了success 和error两个结果。不难看出，对应的值success并没有成功，所以只走了reject，所以此时第四步出现的是5，因为setTimeout延迟所以最后出来的是3

做完了这些题以后，接着又是劈头盖脸的一顿问，五花八门了。从CSS到node.js各种问题，所幸几乎没有被问住 的，最后又写了一个作用区域题，可能他觉得自己是面试官我也不好意思反驳吧。结果是他说错了。题如下：

function n(){    console.log(name)    var name=1}n();function n(){    name=0;    console.log(name)    var name=1}n();

这两个题结果应该是undefined 和 0才对。。结果面试官一直咬定两个都 是undefined.这个我无奈了不作声。因为不想花这个时间在这上面。。接着还有下家面试。

最后总结下吧。做题时还是不能慌，不要把题误解 了，然后稳住了去做，这5天基本面试了七八家左右的公司，最后怩能三四家有意让我上班，不过节后还有8家没有面试，基本有几家一线互联网公司。其实面试的题远远不止这些。还有更多的题。等下次我们再分享。谢谢