部门：主站技术中心-业务技术部
全程约45min
写在前面
本来说要录屏/录音的，结果面试前有点紧张给忘了......
面试官人很好，收获很多，最大的收获就是，面试最好是你带着面试官走，把自己会的、有优势的全展现出来，实际上面试官也是一直在引导我展现自己的优势，是一次很有收获的面试
还有就是，项目和基础比起来还是基础更重要，面试官都没提到我写的项目，打好基础是最重要的！！！
这次也没让我写算法题，有可能是因为面试官到后面已经不想面了......
刚面完感觉还行，结果过了半小时就感谢信了......
唉，面试官人还是很好的，感谢
刚开始多面一些不是很想去的公司的策略还是对的，拿来练练手，不然真不知道自己有多菜
革命尚未成功，同志仍需努力
先是自我介绍
说了自己只会html\css\js，ES6正在学，框架没学过
ES6、JS部分
问题1：用Set实现数组去重（我提到的，他就说写一下吧）
[...new Set(arr)]问题2：var和let，说输出
var tmp = 123;
if(true){
tmp = 'abc';
let tmp;
console.log(tmp);
} 会报错Cannot access 'tmp' before initialization，对应知识点是let的暂时性死区，在一个块级作用域（一对花括号）内用let声明的变量会和这个作用域整体绑定，和外部的同名变量没有任何关系 经大佬提点，这里补充一下：
回答时要提到全局和块级的区别，全局环境是没有暂时性死区的，暂时性死区只会在块级作用域中出现，全局环境报错is not defined，块级报错cannot access before initialization
if(true){
tmp = 'abc';
console.log(tmp);
let tmp;
console.log(tmp);
tmp = 123;
console.log(tmp);
} 和上题同理 for(let i=0;i<10;i++){
//...
}
console.log(i); 报错i is not defined var a=[];
for(var i=0;i<10;i++){
a[i]=function(){
console.log(i);
};
}
a[6](); 经典闭包，输出10 原因：闭包只能取得上一层函数中任何变量的最后一个值。
问怎么让他输出想要的结果，有两种方法
一种是JS高级程序设计中的，创建另一个匿名函数强制让闭包的行为符合预期（先说了这个，他问能不能写出来，我说不太行......唉）
这种解法其实就是又多加了一层作用域来保存不同的i的值（我的理解）
（JS高程中的解释）在这种解法中，我们并没有直接把闭包赋值给数组，而是定义了一个匿名函数，并将立即执行该匿名函数的结果赋给数组。这里的匿名函数有一个参数num，也就是最终的函数要返回的值。在调用每个匿名函数时，我们传入了变量i。由于函数参数是按值传递的，所以就会将变量i的当前值复制给参数num。而在这个匿名函数内部，又创建并返回了一个访问num的闭包。这样一来，数组中的每个函数都有自己num变量的一个副本，因此就可以返回各自不同的数值了。
var a=[];
for(var i=0;i<10;i++){
a[i]=function(num){
return function(){
return num;
};
}(i);
}
a[6](); 第二种直接把var改成let let在每次循环都会形成一个块级作用域，所以每个闭包访问到的值都不同。
CSS部分
问题1：BFC是什么，怎么触发，一般用来做什么？
答案：
①通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
②有五种方式可以触发
-
1. 浮动float: left / right
2. 定位position: absolute / fixed
3. overflow属性: auto / scroll / hidden
4. <html> 根元素
5. display: inline-block / table-caption / table-cell
③解决margin塌陷；清除浮动（子元素浮动时父元素的高度会塌陷，给父元素触发BFC可以解决这个问题）；防止某元素被浮动元素覆盖（可以用这个方法实现两栏自适应布局，一栏固定宽度，一栏自适应）。
问题2：CSS选择器优先级？
答案：!important （无穷）> 行内样式 style=""（1000） > ID选择器 （100）> 类选择器、伪类选择器 （10）>元素选择器、 伪元素选择器（1） > 继承、*（通配符选择器）（0）
问题3：flex布局，a和b的宽度分别是多少？如果把container的宽度改成50px会怎样？flex这个属性是哪几个属性的简写？
<template> <div class="container"> <div class="a"></div> <div class="b"></div> </div> </template>
<style lang="less">
.container{
display:flex;
width:300px;
}
.a{
flex:1;
width:50px;
}
.b{
flex:2;
width:50px;
}
</style> ①实测，如果子元素全都设置了flex，再给子元素设置width是没用的，呈现的还是flex的效果，本题中就是a100px,b200px。container的width改成50px之后a和b也还是按1：2的比例分配。
②flex是flex-grow,flex-shrink,flex-basis的简写，第一个必须，后两个可选
PS：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果把题目中b的flex:2;这一句去掉，效果就是a250px,b50px（剩余空间=300px-50px=250px，a的flex:1;代表a把剩余空间全占了）
计网部分
问题1：TCP三次握手四次挥手的过程？
答案：
①三次握手：Ⅰ客户端发送连接请求，包括初始序列号和SYN=1的信息（SYN=1表示进行连接，实际上，SYN是synchronize（同步）的缩写，意思是通过告知初始序列号使通信双方保持步调一致）；Ⅱ服务器响应，SYN=1，返回自己的初始序列号和ACK（ACK等于客户端发送的初始序列号+1，TCP是累积确认机制）；Ⅲ客户端返回，序列号（自己的序列号+1），ACK（服务器序列号+1）
②四次挥手：Ⅰ客户端发送FIN；Ⅱ服务器收到请求，返回ACK；Ⅲ服务器返回FIN；Ⅳ客户端收到FIN，返回ACK，服务器收到后连接关闭。
问题2：四次挥手如果客户端没收到服务器返回的close会一直等吗？
答案：不会。
问题3：讲一下HTTPS？
反问
我：平常是纯前端还是偏全栈？
面试官：纯前端。
我：平时的业务场景？
面试官：活动拉新等。
我：校招注重什么？
面试官：主要看你会什么，不要对自己的能力夸大其词，慎用熟练、熟悉等词（委婉地说我的JS没有到熟悉的程度，CSS还学得比较好一些......），可以用系统学习过、系统了解过这样的措辞，还有看聪明度，举一反三的能力。
全部评论
(8) 回帖