【前端面试】2020字节跳动面试记录
1. 牛客网笔试（五道编程题，每题100分）
- 输入一个区间【l,r】，请问里面有没有能组成三角形三边的三个数。思考了四十分钟，最后发现其实大于一的连续整数都行，例如（2,3,4）
// 根据三角形三边关系
// abc分别为从短到长
// 两短边之和大于长边
// 1 和谁都组不了
var line=readline();
var lines = line.split(" ");
var left = parseInt(lines[0]);
var right = parseInt(lines[1]);
function matchesGirl(l, r){
let a = l,b,c;
if(a === 1){
a = 2;
}
if(a + 1 <= r){
b = a + 1;
}else{
print("NO");
return;
}
if(a + 2 <= r){
c = a + 2;
}else{
print("NO");
return;
}
print("YES");
print(a + " " + b + " " + c);
}
matchesGirl(left,right)
- 字符串解密问题，一个单词奇数位抽出来做前半部分，偶数位倒序后做后半部分，拼接起来，形成一个串，你要解密出原来的字符串。加密过程 “Welcome” --》 “wloe” + “mce”，你要做加密算法。
// 倒序
function reverse(str){
var result = '';
for(let k = str.length - 1; k >=0; k--){
result += str[k];
}
return result;
}
// 解码
function _decode(word){
var len = word.length;
var mid = Math.floor((len-1)/2);
var left = word.slice(0,mid + 1);
var right = reverse(word.slice(mid + 1));
// 解码
var result = "";
for(let j = 0; j < left.length; j++){
result += left[j];
if(j < right.length){
result += right[j];
}
}
return result;
}
var n = parseInt(readline());
var lines = readline().split(" ");
var res = lines.map(d => _decode(d)).join(" ");
// 打印输出
print(res);
- 没读懂，应用题
- 没读懂，二叉树
- 读懂了不会。香槟塔，从最上面开始倒酒，问（i,j）个酒杯被倒满需要多少杯酒。
2. 一面（视频问答，编程时间多一点）
- 自我介绍
- 自己平时怎么学习前端（跟老师做项目）
- TCP，UDP（TCP稳定，UDP不稳定，讲的很模糊）
- 了解哪些树（二叉树，红黑树，B树），二叉树有哪些类。（完全二叉树等等…）
- 302和304（304 NOT MODIFIED）
- js依赖模块（import， require）
- ES6（用过），写一个async/await(…) 实现sleep函数（我知道需要return一个Promise对象，但我不会写）
(async () => {
document.querySelector('#root').innerText = '1'
await sleep(1000)
document.querySelector('#root').innerText = '2'
})()
// 实现sleep函数，当时没写出来，现在查资料，补上
function sleep(time){
return new Promise(function(resolve, reject) {
setTimeout(resolve, time);
})
}
-
开始编程吧（好）
-
function findNumCount(arr, num)实现一个函数，两个参数，第一个是数组，第二是要找的元素，返回元素出现的次数
（for循环…）
已经排序的数组呢？
（灵机一动，二分查找！）
（然后码了一遍，没有实际运行，但是思路大概对吧。） -
function time(hour, min)实现一个函数，给你输入0-11的小时，0-59的分钟，画出一个手表。。。
(我略微思考觉得不会做，灵机又一动，就说canvas吗老师，canvas我不会)
CSS就行
（吐血…，画div吗老师）
然后老师提醒我怎么写，我就写了半个点！
最后老师看时间快一个点了，就停了。
（我自信地说老师我实现的还行吧）
你的时针比分针长啊！
（…）
输入6:30，你的时针还指的是6！！！
（…）
（当时这题就完事了，下面附上的代码是我之后自己总结更正的版本，供大家参考） -
最后你还有什么想问的吗？
（老师你们平时项目用的技术栈，框架都是什么？）
React
（你们做移动端吗，小程序？）
我们做小程序
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="root">
<div id="clock">div>
<div class="pointer" id="hour">div>
<div class="pointer" id="min">div>
div>
<style>
#clock {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50px;
}
.pointer {
position: absolute;
top: 50px;
left: 50px;
border-top: 1px red solid;
transform-origin: 0% 0%;
}
#hour {
width: 25px;
}
#min {
width: 40px;
}
style>
<script>
function time(hour, min) {
var hourDiv = document.getElementById("hour");
var minDiv = document.getElementById("min");
var minDeg = min / 60 * 360 - 90;
var hourDeg = hour / 12 * 360 + (min / 60) * (360 / 12) - 90;
hourDiv.style.transform = `rotate(${hourDeg}deg)`;
console.log(hourDiv.style.transform);
minDiv.style.transform = `rotate(${minDeg}deg)`;
console.log(minDiv.style.transform);
}
time(6, 35);
script>
body>
html>
3. 二面（视频问答，注重基础）
- HTML
标签（charset=“utf-8”） - 注册功能的话需要用到哪些标签（form,input,button）input类型（text,button,radio,checkbox,file,password）
- 画几何图形的有哪些技术（CSS,canvas,svg; webGL?）
- 前端存储（Cookie，localStorage）
- http头信息（content-type，cache-control, accept）
- web缓存机制（…）
- 盒模型（border，padding，margin，content）浏览器间的区别
- flex布局（弹性布局）
与DOM渲染次序（defer, async）- JavaScript继承（1. 构造函数和原型；2. ES6 class）
- 跨域和JSONP（三不同；script标签不受跨域限制）
- 事件模型和事件代理（高程书上叫事件流和事件委托）
- VUE生命周期,created和mounted（created时data有了，mounted时DOM渲染完毕）
- vue组件间通信（props/emit, provide/inject, broadcast/dispatch）
- node.js做过吗
- GET/POST区别（查询字符串；请求body；安全性）
- 开始编程
- this指向
// 以下代码输出什么结果，this.name中this指向什么：
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();
- 事件队列（steTimeout不是立即执行）
// 输出顺序是啥
console.log('begin')
setTimeout(() => {
console.log('setTimeout 1')
Promise.resolve().then(() => {
console.log('promise 1')
setTimeout(() => {
console.log('setTimeout2 between promise1&2')
})
}).then(() => {
console.log('promise 2')
})
}, 0)
console.log('end')
- 函数柯里化?
题目：
使用JS实现一个repeat方法，
function repeat (func, times, wait) { /* your code */ }
const repeatFunc = repeat(alert, 4, 3000), 调用这个 repeatedFunc(“hellworld”)，会alert 4次 helloworld, 每次间隔3秒
function repeat(func, times, wait){
return function(arg){
var count = 1;
var intervalId = setInterval(function(){
func(arg);
count === times ? clearInterval(intervalId) : count++;
}, wait);
}
}
- 事件代理（我是面试完才觉得这道题就是考事件委托的）
<ul>
<li>111li>
<li>222li>
<li>333li>
ul>
<script>
// 这种实现有问题，列表选项比较多的时候有性能问题
var lists = document.getElementsByTagName("li");
for(let i = 0; i < lists.length; i++){
lists[i].addEventListener("click", function(e){
console.log(e.target.innerHTML);
})
}
// 改进的方法是，在父级元素上绑定事件，当场只是说了，没有具体实现
// 高级程序设计第三版403页事件委托
var unOrderList = document.getElementsByTagName("ul")[0];
console.log(unOrderList);
unOrderList.addEventListener("click",function(e){
e.preventDefault(); // 取消默认
e.stopPropagation(); // 组织冒泡
console.log(e.target.innerHTML);
})
script>
- Flex布局,实现一个输入框宽度自适应
<div class="wrap">
<input class="input"/>
<button>确认button>
div>
<style>
.input{
width: 100%;
}
.wrap{
display: flex;
}
style>
- 你了解那些排序算法？（要命题，我竟然连冒泡都不会写了）
- 最后自由发挥，你有什么想问的吗？
（这里我问了以下老师他面试时会更注重什么，怎么从前端走向全栈，需不需要学习java和c++等语言。老师大致认为搞好javascript才是前端王道，其次有计算机相关知识。）
4. 三面（项目+一道算法）
- 首先问了许多项目的东西，我表达能力不行，这是我不怎么擅长的东西，所以面试官很不满意吧。
- 问了Vue的问题，我也说只会用，不太懂。然后来了一道算法题。
- 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？
注意：给定 n 是一个正整数。
示例 1：
输入： 2
输出： 2
解释： 有两种方法可以爬到楼顶。
- 1 阶 + 1 阶
- 2 阶
示例 2：
输入： 3
输出： 3
解释： 有三种方法可以爬到楼顶。
- 1 阶 + 1 阶 + 1 阶
- 1 阶 + 2 阶
- 2 阶 + 1 阶
// 递归
function upStairs(n){
if(n > 2){
return upStairs(n-1) + upStairs(n-2);
}else if(n === 1){
return 1;
} else if(n === 2){
return 2;
}
}
最后，三面我凉了。