【前端面试】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
（你们做移动端吗，小程序？）
我们做小程序

<!DOCTYPE html>
<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>Document</title>
</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<meta>标签（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布局（弹性布局）
<script></script>与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>111</li>
	<li>222</li>
	<li>333</li>
</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;
	}
}

最后，三面我凉了。