2017年前端面试总结（一）

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

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

5. 已知两个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. 通过 $emit $on能实现的数据传递为何要用 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;
}

2. 可以用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 not
function 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家没有面试，基本有几家一线互联网公司。其实面试的题远远不止这些。还有更多的题。等下次我们再分享。谢谢