字节跳动2020届秋招提前批前端面经
字节跳动面经
一面
自我介绍完，面试官问了为什么项目中选择vue
1、上来聊如何理解mvvm、vue组件通信、vex、路由实现
2、写一个组件
实现一个user banner组件，根据用是否登录、注册显示不同的信息；name、id、icon
我的实现
<template>
<div>
<div v-if:'isLogin'>
<div>用户姓名：{{user.name}}div>
<div>用户id:{{user.userid}}div>
<img :src='user.usericon' />
div>
<div v-else>
<div>未检测到登录用户，请登录div>
<router-link />
div>
div>
template>
props {
isLogin:false,
user{
name:'',
userid: '',
usericon:''
}
}
看我用了v-if，问v-if和v-show的区别
3、http报文组成
答了个if-modefie，引申出了e-tag，浏览器缓存机制
问：E-tag保存在哪里，怎么匹配，谁匹配
4、登录流程是怎么样的
具体的session和cookie在整个登录流程中怎么保存的
5、实现每隔一秒输出数组中的一个数字：
function(arr){
for（let i = 0;i<arr.length;i++）{
setTimeout(() = > {
if(i<arr.length){
console.log(arr[i])
}
},1000)
}
}
6、判断单链表是否有环
function main(node){
let tmp = node.next;
let nodes = [];
nodes.push(tmp)
while(tmp){
if(isInnodes(node,tmp))
return true;
else{
nodes.push(tmp);
tmp = tmp.next;
}
}
return false;
}
function isInnodes(node,tmp){
for(let i = 0;i<node.length;i++){
if(tmp.next===node[i])
return true;
}
return false;
}
实现思路：用一个数组保存遍历过的节点，然后依次做匹配，面试官问我时间复杂度，我说n方，面试官觉得有点慢，能不能优化，我想了半天没想出来，就没耽误多久放弃了。
算法还是太差
二面
- 第一题：对无序数组 Array(n)，查找第 k 大元素
真的简单，我是个废物，长时间没看排序
- 第二题：
// 输入一个任意的四则运算字符串，给出计算结果
function exex(strInput: string): number{
//TODO
}
// 补全代码，得到正确输出结果
应该是构建一个什么树
我这两题根本没法提笔，这里面试官跟我说可以不考察算法，考察前端相关的内容，因为第一个面试官推荐的时候认为我接触前端不久，所以第二个面试官上来就打算考察我的计算机基础（算法、网络、操作系统），我就想你还是问我前端的吧，然后问我es5、es6熟悉吗，我说还可以（至少比算法强）
- 第三题
document.body.addEventListener('click', () => {
Promise.resolve().then(()=>console.log(1));
console.log(2)
});
document.body.addEventListener('click', () => {
Promise.resolve().then(()=>console.log(3));
console.log(4)
});
//用鼠标点击一下屏幕，输出结果是什么；为什么？事件循环是什么，微任务是什么，他们的执行顺序是什么样？哪些你知道的方法是微任务？
原生dom绑定多个事件怎么玩
我开始答案 2 4 1 3
后来经过面试官的提醒才知道是一个对象绑定了多个事件，我以为会覆盖，改了答案 4 3
正确答案2 1 4 3
这个地方我以为问了宏任务，其实我已经记不清promise和计时器哪个是微任务和宏任务了，就说了个微任务和宏任务的话有promise和计时器，然后面试官一听计时器，第四题就来了
- 第四题
console.log('start');
let intervalId;
Promise.resolve()
.then(() => {
console.log('p1');
}).then(() => {
console.log('p2');
});
setTimeout(() => {
Promise.resolve()
.then(() => {
console.log('p3');
}).then(() => {
console.log('p4');
});
intervalId = setInterval(() => {
console.log('interval');
},3000);
console.log('timeout1');
},0);
//
// start p1 p2 p3 p4 timeout1 interval
曾经我以为我彻底弄懂了事件循环，微任务和宏任务，但是这个地方依然犯了个错误
正确结果：start p1 p2 timeout1 p3 p4 interval
- 第五题
function Foo () {
getName = function () {
console.log(1)
}
console.log('this is' + this)
return this
}
Foo.getName = function () {
console.log(2)
}
Foo.prototype.getName = function () {
console.log(3)
}
var getName = function () {
console.log(4)
}
function getName () {
console.log(5)
}
// 请写出一下的输出结果
Foo.getName() //2
getName() // 4
Foo().getName() //this is window 1
getName() // 1
new Foo.getName() //2
new Foo().getName() // this is window 1
new new Foo().getName()
上面标记了一些答案，有待验证，这题考察的知识点之多，令人发指
- 第六题
window.name = 'ByteDance';
function A () {
this.name = 123;
}
A.prototype.getA = function(){
console.log(this);
return this.name + 1;
}
let a = new A();
let funcA = a.getA;
funcA();
// window
这里的调用funcA()this应该是指向window，但是我给自己挖了坑，我说我不知道字符串和数字做+运算返回什么
- 第七题
//使用JS实现一个repeat方法，
function repeat (func, times, wait) {
// Todo
};
const repeatFunc = repeat(alert, 4, 3000);
//调用这个 repeatedFunc("hellworld")，会alert4次 helloworld, 每次间隔3秒
我的实现
面试官说我一面的时候做法好像有些问题，所以又给我出了一道类似的题
第一次
function(func ,times, wait){
return function(str){{
for(let i=0;i<times;i++)
setTimeout(()=>{
func(str)
},wait)
}
}
面试官说这种做法要创建多个计时器，性能太差，然后我换了setInterval
function(func ,times, wait){
return function(str){{
setInterval(() => {
while(times--){
func(str)
}
},wait)
}
}
}
真实效果应该是和我想的不一样，面试官也指出不对
- 第八题
一个轻量页面中存在一个用户生日输入框，用input type=text来实现, 实现对任意输入的字符串的 validate 和 parse，输出为 Date 对象。
eg: yyyy-mm-dd
当时我就答到：这个就是正则加字符串转date，但是我从来不记api，我写不出来
然后面试官非常语重心长的给了我很多建议
面试面试，就和高考一样，这是要走流程的，不是说你会就行，谁知道你会，你得写在系统里面，面试的人那么多，人家会写你不会，肯定就不会选你了，面试的流程都是要review的，得看你有多少输出（面试系统的代码量），不是说这个面试官选你就选你了，这个面试官选你之后，下一个面试官一检验发现没有那么合格，上一个面试官是要背责任的（然后我感觉很愧对第一个面试官，第二个面试官说，二面机会是第一个面试官给我争取来的）
面试官推荐复习资料
leetcode
总结
非常感谢我的两个面试官，第一个给了我推荐，第二个给了我很多建议，并且全程鼓励指引，非常和蔼。下面的复习目标，巩固现有知识内容，加强算法和基础coding能力