前端面经总结——字节跳动头条笔试一面+二面_字节前端面经

前言

笔者此次面的是深圳字节跳动的前端岗位，一直听说头条注重算法，所以面试前已经花了不少时间准备，可是最后还是到了二面就止步了，算法基础还是不够扎实啊-.-|||||||||所以大家要面头条的话还是要好好准备一下算法，多做做题啥的～

笔试 + 一面

敲黑板！头条是一定会有笔试题的哦，css，js，算法都会考察噢。我尽量还原题目。。有的实在是忘了-.-

1. 实现 css 布局
   一个 div 垂直居中
   其距离屏幕左右两边各 10px
   其高度始终是宽度的 50%

div 中有文本’A’
其 font—size:20px
文本水平垂直居中

我的回答：

<div class="wrap">
  <div class="box">
    a
  </div>
</div>
1
2
3
4
5

.wrap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.box {
  background: red;
  margin: 0 10px;

  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box:before {
  padding-top: 10%;
  content: "";
  display: block;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. 函数中的 arguments 是数组吗？类数组转数组的方法了解一下？
   答： arguments 当然不是数组啦，转数组的方法有：

[...arguments];
Array.from(arguments);
1
2

3. 类型比较

   if([]==false){console.log(1)};
   if({}==false){console.log(2)};
   if([]){console.log(3)}
   if([1]==[1]){console.log(4)}
1
2
3
4

答：1 3

== 是非严格比较操作符，false 会转换为 0，[]会转换成’'，{}会转换为"[object Object]"，所以会输出 1，不输出 2，具体的可以看看以下文章

参考文章
为什么[] 是 false

[]和{}是“空”的对象，不是“空”，所以会输出 3
最后一个引用地址不一致，不是同一个对象，所以不会输出 4

4. EventLoop

async function a1() {
  console.log("a1 start");
  await a2();
  console.log("a1 end");
}
async function a2() {
  console.log("a2");
}

console.log("script start");

setTimeout(() => {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(() => {
  console.log("promise1");
});

a1();

let promise2 = new Promise(resolve => {
  resolve("promise2.then");
  console.log("promise2");
});

promise2.then(res => {
  console.log(res);
  Promise.resolve().then(() => {
    console.log("promise3");
  });
});
console.log("script end");
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

正确答案：

script start
a1 start
a2
promise2
script end
// 此处开始执行异步队列
promise1
promise2.then
promise3
// 真的不知道 a1 end 为啥在这里才输出，还以为会在 promise1 后面。。
// 大家知道的话可以评论区分享一下啊～在网上看到的答案都说得模凌两可的
a1 end
// 执行完所有微任务才执行宏任务
setTimeout
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5. 改正代码，输出 0123401234

function a() {
  for (var i = 0; i < 5; i++) {
    this.i = i;
    setTimeout(function() {
      console.log(i);
    }, 0);
    console.log(this.i);
  }
}

a();
1
2
3
4
5
6
7
8
9
10
11

答：首先留意 var，可以改成 let，再加个立即执行函数；然后留意 this 指向，可以改为箭头函数。（我当时的想法就是这么短浅。。。）

function a() {
  for (let i = 0; i < 5; i++) {
    (function(i) {
      this.i = i;
      setTimeout(() => {
        console.log(i);
      }, 0);
      console.log(this.i);
    })(i);
  }
}

a();
1
2
3
4
5
6
7
8
9
10
11
12
13

我的一个牛逼大神同事用了这个方法，实在佩服啊哈哈哈