和面试官上个礼拜约的时间，但是面试前一天突然接到金山的终面邀请，因此一天需要去两场面试，中午抽午休时间去金山参加了终面，然后大气没怎么喘，晚上下了班就直奔高德，开始真的不想去了，但是爽约是很不好的行为，于是硬着头皮去了高德。
由于两场面试都是占用的吃饭时间，所以基本一天没吃饭，路上买了俩包子随便垫吧了两口。我们公司离望京还比较远，本来约好的七点面试，等我到了七点半了已经，然后等于了一会儿来了一个比较严肃的面试官，本来白天的面试加上没怎么吃饭就整个人有点懵，然后气氛一紧张，我菊花一紧。。。
这次面试我没抱什么希望，因为招的是高级前端工程师，然后又是阿里的，所以难度还是不小，好了，上干货！
面试题：
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源码的东西，后来才知道面试官是写框架的大佬（🐂🍺）。。。
加油了后面～
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
