字节飞书前端校招面试记录(已OC）
我是通过了字节内部的一个活动，写几个项目，达成后直通面试。
看起来像是打印1对不对？这里实际上取决于是否开启严格模式，如果开启了严格模式，这里的this实际上是不能指向window对象的。
- 希望小伙伴们能给出一个递归解法（解法见#7）
个人技术栈为react等，会一些ts，打包工具webpack也有所了解。
写下这个帖子的目的主要在于记录、复盘自己的面试结果，希望能给大家抛砖引玉。
【一面】
面试时间是22年4月7日下午4点，面试官很准时，记录问题大致如下：
1.自我介绍
2.看到你的项目有登录注册接口，能聊一下具体实现吗？
- 其实面试官主要是想引导我回答session或者token实现的原理，我回答了session，又让我详细解释了session。
3.说一下本地存储
html5新特性 localstorage sessionstorage
4.写两个方法：
set方法：写入一个localstorage，写入时同时实现类似cookie maxage的功能
get方法：读取localstorage，如果已经过期，删除这个存储并返回null，如果未过期，返回这个存储。
- 基本思路正确了，写的时候有几个小问题：第一是没有把方法挂载在localstorage的原型对象上，第二是我采用的字符串拼接的方式来存储时间，这个方法没有普遍性。
面试结束后静心思考，实现如下：
第一是把两个方法挂载在了原型对象上。
第二利用JSON对象存储数据。
5.如何将一个width为400的图片变为300px（不能直接修改源代码）
- 我回答了直接设置style=300px和利用scale缩放，面试官提醒我还可以使用box-sizing以及max-width
6.选择器优先级相关，是一连串问题，反正就按照优先级权重推就完事了。
7.实现一个方法：
[1,2,3,4,5].copy()
返回[1,2,3,4,5,1,2,3,4,5]
- 条件反射写下了Array.prototype.copy=()=>[...this,...this]，太尴尬了，还好面试官准许我用浏览器看一下到底哪里有问题，顺利解决
8.React封装checkbox和checkbox-group
- 虽然写过类似的小demo....但现场写真的很紧张啊！我还是适合一个人安安静静地思考、安安静静地写代码。
1面总结：并没有问太多原理性的问题，但是某些细节会问得比较深入，比如session的存储位置、React Pure Component等，不过多赘述。末尾时面试官表示自己不喜欢考算法，但告诉我算法后面一定会有人问我（窃喜+紧张）。
希望二面顺利。
【二面】
面试时间是一面的第二天下午2点，面试官很准时，真的非常非常和善，我可太喜欢这个面试官了！！
这次的面试80%的内容都是网络方面，还好有仔细看过...原谅我这次面试官真的问的挺多的，我只能回忆起一部分
1.聊一下为什么从硬件转行前端
2.经典八股文之输入url发生了什么？
- 因为提及到了root server，面试官询问了root server返回ip的相关问题...没有答上
3.DNS使用什么协议传输？为什么？
- UDP 机制简单 开销小 性能更好
4.POST和GET的区别。
- 本质没有区别，只是建立在HTTP协议上的不同方式。
- 具体的区别有说到大小问题、安全性、包数等（为什么POST发两个TCP包？答：安全性）。
- 这里稍微拓展问了一下HTTPS协议的过程，以及什么是数字证书。
5.CommonJS和ES6 Module的区别
- 浅复制和引用。
6.聊到了TCP传输，如果TCP传输中第二个包丢失了，会怎么办？
- 从第二个包重新传输。其实这里面试官还问了很多零碎的东西，但我有点回忆不起来了。跟这个面试官聊天太舒服了，我都忘了问了啥了...
7.React相关 为什么if中不能使用hooks
- 不知道，面试官解释了一下，说实话没怎么理解，下来会去看看
8.JS中基本数据类型？
- 枚举了7种基本数据类型(number,string,symbol,bigint,boolean,null,undefined);
9.Number精度丢失问题，底层原因，解决方案
- JS Number类型的最大值为2^53 - 1，即MAX_SAFE_NUMBER（这里面试官问到了底层二进制的储存方式，其实就是2^E * M，E为阶码，M为尾码，然后聊到了计算方式，就是求同阶和取大阶等）。解决方案就是使用bigint。
这道题本质上和0.1+0.2 === 0.3 //false 是一样的，理解清楚即可。
10.Symbol类型
- 用过Symbol吗？我回答只在迭代器里使用过Symbol（[Symbol.iterator]）,聊了一下迭代器的实现方式，即通过ES6 Generator生成器next方法进行迭代。 symbol不能new。
补充部分
event loop相关
问到了事件循环的原理，以及常用的微任务、宏任务。
- 原理略
微任务：promise await queueMicroTask request AnimationFrame nextTick
宏任务：定时器
为什么使用rAF？为什么不用定时器
- 时间间隔比较稳定，10-20ms触发一次回调。 定时器的执行时间不一定是参数delay的值。
代码部分
11.原型链相关 this相关 理解透彻原型链肯定没任何问题。
抓住一个关键点就是，实例.__proto__ === 构造函数.prototype //true
这里面试官放置了一个陷阱，代码如下：
function A() {
this.a = 1
}
A()
console.log(a)
12.算法 多维数组全排列
//输入：[['A', 'B'], ['a', 'b'], ['1', '2']];
//输出：['Aa1','Aa2','Ab1','Ab2','Ba1','Ba2','Bb1','Bb2']
function permutaion(arrs) {
return arrs.reduce((pre, cur) =>{
const result = [];
for (let i = 0; i < pre.length; i++) {
for (let j = 0; j < cur.length; j++) {
result.push(pre[i] + cur[ j])
}
}
return result
})
}
13.闭包
sum(1,2)(3)(4)(5,6,7)()返回28
sum()返回0
不是柯里化。
参数数量任意，括号数量任意，实现sum
function sum(...rest) {
let args = rest;
if (args.length === 0) return 0;
return function partialSum(...rest) {
args = [...args, ...rest]
if (rest.length === 0) {
return args.reduce((pre, cur) => pre + cur)
} else {
return partialSum
}
}
}
【三面】
时间是4月15日下午六点，面试官不出意外应该是我的leader。总时长很短，只有45分钟。
1.为什么选择前端？
- 同2面
2.聊了一下个人经历
3.技术方面，BFC是什么，应用。
- 块级格式上下文。应用：解决边距塌陷、浮动遮盖问题等。我这里给出了比较具体的实现，比如左右定宽中间自适应什么的。
4.UDP相关的
- 同二面
5.模块化相关
- 同二面
6.React中router的底层api
- 我回答的是window对象里的history对象，面试官没有告诉我正确答案，也不知道是否正确。
7.cookie相关，相同一级域名跨域、不同一级域名跨域
- 相同的话设置domain就好了，不同一级域名跨域没接触过，没答出来，希望评论区小伙伴能解答
8.简单算法，求2个数组交并集。
- 过于简单了...
并集直接利用...操作符拼接两个数组，用set去重即可
交集遍历任意一个数组，利用数组filter方法即可
9.promise.all实现
- 思路就是遍历参数数组的每一个元素，并调用then方法。如果任意一个then方法返回reject，直接返回该reject，否则讲fulfilled的结果存入结果数组并返回。
重点是需要遍历数组时通过instanceof操作符判断元素是否为Promise实例。如果不是，需要用resolve方法将其转化为一个promise对象。
10.有啥问的吗
- 问了一下加班情况，面试官对我的评价等。
【HR面】
4月19日下午四点，我是在18日收到面试通过的消息，等死我了...
主要就是聊一聊薪资待遇和入职时间，面完后就收到了offer。
P.S.关于有的小伙伴问到的问题
Q.什么时候收到的面试通过的消息？
1面和2面通过之后大概只过了2个小时HR就通知我通过了
Q.面试时间？
两次都是HR让我自己选...
写在最后的：
我学习前端的时间非常非常短...之前也是硬件方向没有接触过除了c语言之外的语言。能进入字节是我梦寐以求的，也感觉自己非常幸运。如果你看到这里对前端学习路线有疑惑的话，可以私信我，我看到了就一定会回复。大家加油！
btw希望有oc的兄弟在中关村的联系我...找个室友hhhh
#面试复盘##字节跳动##前端工程师#
我每天打8小时原神还差不多
查看45道真题和解析