和面试官上个礼拜约的时间,但是面试前一天突然接到金山的终面邀请,因此一天需要去两场面试,中午抽午休时间去金山参加了终面,然后大气没怎么喘,晚上下了班就直奔高德,开始真的不想去了,但是爽约是很不好的行为,于是硬着头皮去了高德。
由于两场面试都是占用的吃饭时间,所以基本一天没吃饭,路上买了俩包子随便垫吧了两口。我们公司离望京还比较远,本来约好的七点面试,等我到了七点半了已经,然后等于了一会儿来了一个比较严肃的面试官,本来白天的面试加上没怎么吃饭就整个人有点懵,然后气氛一紧张,我菊花一紧。。。
这次面试我没抱什么希望,因为招的是高级前端工程师,然后又是阿里的,所以难度还是不小,好了,上干货!
面试题:
1.两个div,上面div的margin-bottom为20px,下面div的margin-top为40px,下面div里还有一个div,里面div的margin-top为15px,最终渲染出来是什么样的?
这道题住哟考察了两个知识点:
(1).上下margin的重叠
(2) 子节点margin-top溢出
先说(1),我们知道,两个块级元素,上面元素的margin-bottom和下面元素的margin-top是会重叠的,间距取两者最大值,看下面例子:
<html>
<head>
</head>
<body>
<div style="background-color: green; overflow: hidden;">
<p style="background-color: red; margin: 100px 0 100px 0;">1</p>
<p style="background-color: red; margin: 100px 0 0 0;">
<p style="background-color: yellow; margin: 0 0 0 0;">2</p>
</p>
</div>
</body>
</html>
效果图:
可以看到,上面元素的margin-bottom没有和下面元素的margin-top相加,而是取最大值100px。
解决这个问题的方法就是用BFC,用一个BFC容器包裹其中一个元素,由于BFC相当于一个不受外界影响的模块,因此margin不会重叠:
<html>
<head>
</head>
<body>
<div style="background-color: green; overflow: hidden;">
<div style="overflow: hidden; ">
<div style="background-color: red; margin: 100px 0 100px 0;">1</div>
</div>
<div style="background-color: red; margin: 90px 0 0 0;">
2
</div>
</div>
</body>
</html>
效果图:
间距不在重叠,而是相加
对于(2),看如下代码的效果:
<html>
<head>
</head>
<body>
<div style="background-color: green;">
<div style="background-color: red; margin: 100px 0 100px 0;">1</div>
<div style="background-color: red; margin: 90px 0 0 0;">
2
</div>
</div>
</body>
</html>
可以看到上面有留白,明显不是我们想要的结果(忽略表情,只是为了衬托留白。。。)
解决margin溢出通常有以下方式:
1:为父元素设置上边距。border-top:1px solid #ddd;(弊端:父元素高度变化。不提倡)
2:为父元素设置内边距取代外边距。(弊端:父元素高度改变。不提倡)
3:在子元素div前增加空的< table>< table/>元素,(提倡)
4:通过before伪元素动态创建table(和3其实是一个道理)
5:父元素设置为BFC,BFC内部的样式不受外部影响且不会影响外部
知识点说完,回到题目本身,首先考虑子元素margin溢出,溢出值和父元素的margin-top取最大值作为父元素的margin-top,15小于40,因此最终第二个父级div的margin-top为40px,和第一个div的margin-bottom 20px,取最大值,因此最终间距为40px。
我们可以验证一下:
<html>
<head>
</head>
<body>
<div style="background-color: green; overflow: hidden; ">
<div style="background-color: red; margin: 0 0 20px 0; height: 20px; ">1</div>
<div style="background-color: red; margin: 40px 0 0 0;">
<div style="background-color: red; margin: 15px 0 0 0; height: 20px; ">
2
</div>
</div>
</div>
</body>
</html>
效果图:
2.项目中遇到过的困难,怎么解决的?
开放性题目,根据自己实际情况,这题也挺看运气的,因为面试官会根据自己的兴趣点从里面挑知识点问,说的太简单,面试官肯定觉得你low,过分表现自己,就很有可能让面试官抓住其中涉及到的某个知识点往死里问,最后把自己玩儿死了。。。
3.手撕代码,给两个升序数组,合并为一个升序数组,并且去重?
直接上代码了:
/**
* @param {Array} arrA
* @param {Array} arrB
* 合并两个升序数组arrA、arrB,合并之后的数组仍为升序,并且去重
*/
function arrConcat (arrA, arrB) {
const res = [],
table = {};
let pointerA = 0,
pointerB = 0;
while (pointerA < arrA.length && pointerB < arrB.length) {
let itemToPush;
//将较小的值推到栈中
if (arrA[pointerA] > arrB[pointerB]) {
itemToPush = arrB[pointerB++];
}
else {
itemToPush = arrA[pointerA++];
}
//字典记录添加过的数据
if (!table.hasOwnProperty(itemToPush)) {
res.push(itemToPush);
table[itemToPush] = true;
}
}
//没有遍历到尾部的数组
const surplus = arrA.slice(pointerA).concat(arrB.slice(pointerB));
res.push(...surplus);
return res;
}
module.exports = {
arrConcat
}
4.对代码规范的看法?
这题还真是第一次被问到,答得不是很好。。。
5.对前端工程化的理解?
----------------------------------split line-------------------------------------------------
update:
时隔一年,2020.4.13日经过四轮面试,成功加入阿里,也算圆了自己短期的一个小目标,某种意义上也是一种缘分吧~~
这次要比上次的难度大一些,尤其二面开始考察知识深度比较大,二面着重考察了我vue源码的东西,后来才知道面试官是写框架的大佬(🐂🍺)。。。
加油了后面~