首页 > 哔哩哔哩前端一面凉经(22秋招)
头像
嚼嚼嚼
编辑于 2021-10-10 22:46
+ 关注

哔哩哔哩前端一面凉经(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)
②四次挥手:Ⅰ客户端发送FIN;Ⅱ服务器收到请求,返回ACK;Ⅲ服务器返回FIN;Ⅳ客户端收到FIN,返回ACK,服务器收到后连接关闭。

问题2:四次挥手如果客户端没收到服务器返回的close会一直等吗?
答案:不会。

问题3:讲一下HTTPS?

反问

我:平常是纯前端还是偏全栈?
面试官:纯前端。
我:平时的业务场景?
面试官:活动拉新等。
我:校招注重什么?
面试官:主要看你会什么,不要对自己的能力夸大其词,慎用熟练、熟悉等词(委婉地说我的JS没有到熟悉的程度,CSS还学得比较好一些......),可以用系统学习过、系统了解过这样的措辞,还有看聪明度,举一反三的能力。

更多模拟面试

全部评论

(8) 回帖
加载中...
话题 回帖

相关热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

近期精华帖

热门推荐