哔哩哔哩前端一面凉经（22秋招）

部门：主站技术中心-业务技术部

全程约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）