字节面试复盘

本文最后更新于:2022年4月22日 晚上

最近想走出舒适圈,所以重启了一下求职之路,其实做前端这么久,自己明白自己的基础很薄弱,可能整个职业生涯也比较佛,大部分时间都是得过且过,觉得不能再浪费生命了,还是得支棱起来,好好地努力一下,争取一下更好的生活,闲话不说,主要说一下面试遇到的一些问题,还有面试官给的一些题目

编程题目

可能首先还是以题目切入为主吧,也说明了自己在 js 基础知识掌握方面很薄弱,其实问题都很简单,就是还是不够细心,需要面试官提醒

题目一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var a = 10;
var obj = {
a: 20,
log0: function () {
var a;
if (a) {
a = 100;
} else {
a = 200;
}
console.log(a);
console.log(this.a);
var a = 30;
console.log(a);
},
log1: function () {
console.log(a);
},
};
obj.log0();
obj.log1();

这题非常基础,主要考的是变量提升、变量作用域和 this 的指向问题

  1. 第一个a,因为 log0 里面刚开始有定义一个var a,所以刚开始 a 是 undefined,也就走到第二个a=200,所以打印出来200
  2. 第二个this.a,this 指向的是 obj 里面的 a 变量,所以打印出来是20
  3. 第三个a因为前面重新定义了a=30,所以打印出来是30
  4. 而第四个因为没有this,所以指向的是全局的 a 变量,所以是最开始的10

这一题自己就犯了一个错误,第一个 a 以为 var 了之后,就会到 100,完全忘了没赋值就是 undefined,还得面试官提醒,真是太逊了,我感觉这里面试官其实就已经知道我基础不是很稳了

正确答案:
200
20
30
10

题目二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
console.log('script start');
setTimeout(function () {
console.log('script 1');
}, 0);
new Promise(function (resolve, reject) {
console.log('script 2');
resolve();
})
.then(function () {
console.log('script 3');
})
.then(function () {
console.log('script 4');
});
console.log('script end');

这题其实是蒙对的,面试官也指出了这点,这题主要考的是 js 中的宏任务和微任务,但是我之前确实没有了解过这部分的知识,这里重新巩固了一下,所有 js 中

先同步后异步,先微后宏,微任务的执行时机比宏任务早

1、微任务有哪些
Promise
await 和 async

2、宏任务有哪些
setTimeout
setInterval
DOM 事件
AJAX 请求

所以我们再来看这个题目

  1. script start肯定是第一个的这个毫无疑问
  2. 接下来因为script 1'是包在setTimeout这个宏任务中,所以对比其他 console,会先放在Promise这个微任务后面执行
  3. 来到Promise后,先执行里面的script 2,然后 resolve 之后,就会走到 then 的script 3,这里也考了一个 Promise 对象的知识点,就是这个 then 其实也是一个Promise 对象,链式调用法的缘故也就顺势执行了script 4
    Promise对象中的then链式用法
  4. 接着就执行script end
  5. 最后再执行被挂起的宏任务script 1

正确答案
script start
script 2
script end
script 3
script 4
script 1

题目三

1
2
3
4
5
6
7
8
9
10
11
const data = [
{ id: 'R1', parentId: null },
{ id: 'R2', parentId: null },
{ id: 'R1-1', parentId: 'R1' },
{ id: 'R1-2', parentId: 'R1' },
{ id: 'R1-3', parentId: 'R1' },
{ id: 'R2-1', parentId: 'R2' },
{ id: 'R2-2', parentId: 'R2' },
{ id: 'R1-1-1', parentId: 'R1-3' },
{ id: 'R1-2-3', parentId: 'R1-1-1' },
];

希望输出类似下面的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
[
{
id: 'R1',
parentId: null,
children: [
{
id: 'R1-1',
parentId: 'R1',
},
{
id: 'R1-2',
parentId: 'R1',
},
{
id: 'R1-3',
parentId: 'R1',
children: [
{
id: 'R1-1-1',
parentId: 'R1-3',
children: [
{
id: 'R1-2-3',
parentId: 'R1-1-1',
},
],
},
],
},
],
},
{
id: 'R2',
parentId: null,
children: [
{
id: 'R2-1',
parentId: 'R2',
},
{
id: 'R2-2',
parentId: 'R2',
},
],
},
];

这题因为之前算法复习的不够,所以虽然最后基本写出来了,但是用的时间太久了,我觉得也给面试官一个不好的印象,回来后也是自己先试着重新写了一次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const data = [
{ id: 'R1', parentId: null },
{ id: 'R2', parentId: null },
{ id: 'R1-1', parentId: 'R1' },
{ id: 'R1-2', parentId: 'R1' },
{ id: 'R1-3', parentId: 'R1' },
{ id: 'R2-1', parentId: 'R2' },
{ id: 'R2-2', parentId: 'R2' },
{ id: 'R1-1-1', parentId: 'R1-3' },
{ id: 'R1-2-3', parentId: 'R1-1-1' },
{ id: 'R1-2-3-5', parentId: 'R1-2-3' },
];
function getParentIndex(id) {
return data.findIndex((pinfo) => pinfo.id == id);
}

function getResultArr(arr) {
const inArr = arr;
inArr.forEach((item) => {
if (item.parentId) {
// 获取匹配的父节点
let parentIndex = data.findIndex((pinfo) => pinfo.id == item.parentId);
if (parentIndex > -1) {
let parentObj = data[parentIndex];
// 判断是否有children属性
if (parentObj.children) {
if (
// 判断chirldren中是否有已有对应的结点
parentObj.children.findIndex((target) => target.id == item.id) == -1
) {
parentObj.children.push(item);
}
} else {
parentObj.children = [item];
}
}
}
});
return inArr.filter((item) => item.children && item.parentId == null);
}
console.log('我的解法', getResultArr(data));

后来经过大神提醒,这道题其实就是算法中很经典的[数组转树]问题,网上已经有很多大神的分析贴了,大家也可以看看这篇【面试了十几个高级前端,竟然连(扁平数据结构转Tree)都写不出来】,也可以对解决这个问题的所有方法做个了解,包括怎么优化等等,看完就觉得真是学海无涯啊

其他面试问题总结

因为是一面,其实面试官主要还是围绕自己的简历来提问的,虽然之前提前准备了许多,但是对自己的项目还是没有深挖,把一些亮点更好地展示出来

  • 你有什么亮点项目,你对这些项目做了哪些事情
  • 为什么在技术上选型React,你觉得有什么优势
  • 在开发组件的时候,你们是怎么解决组件之间的联动的
  • 整个页面的组件搭建,整体是什么流程
  • 你对页面性能做了哪些优化
    …..

自己觉得回答的时候还是比较虚,没有去认真思考我的简历中为什么要写这个项目,这个项目可以怎么吸引面试官,之后得好好修改简历才行